首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular-cli webpack懒惰加载不工作

Angular-cli是一个用于快速搭建Angular应用的命令行工具。它提供了一系列的命令,帮助开发者创建组件、服务、模块等,并且可以自动化构建、测试和部署应用。

Webpack是一个模块打包工具,它可以将多个模块打包成一个或多个静态资源文件。在Angular中,Webpack用于将应用的各个模块打包成一个或多个bundle文件,以提高应用的加载速度。

懒惰加载(Lazy Loading)是一种优化技术,它允许应用在需要时才加载特定的模块或组件,而不是一次性加载所有的模块。这样可以减少初始加载时间,提高应用的性能。

然而,有时候在使用Angular-cli和Webpack进行懒惰加载时可能会遇到不工作的情况。这可能是由于以下原因导致的:

  1. 配置错误:在Angular-cli的配置文件(angular.json)中,需要正确配置懒惰加载的模块和路由。确保在路由配置中使用了懒惰加载的语法,并且在模块配置中设置了懒惰加载的标志。
  2. 依赖问题:有时候懒惰加载不工作可能是由于依赖包版本不兼容或者缺少必要的依赖包。可以尝试更新相关的依赖包或者检查是否缺少必要的依赖。
  3. 编译问题:有时候懒惰加载不工作可能是由于编译问题导致的。可以尝试重新编译应用,确保所有的模块和组件都正确地被编译和打包。

如果以上方法都无法解决问题,可以尝试查看官方文档、社区论坛或者提交一个issue来获取更多帮助。

对于Angular-cli webpack懒惰加载不工作的具体解决方案,由于没有提及腾讯云相关产品,无法给出具体的腾讯云产品和产品介绍链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular开发实践(二):HRM运行机制

引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。...image 下面让我们从一些不同的角度观察,以了解HMR的工作原理…… 在应用程序中 通过以下步骤,可以做到在应用程序中置换(swap in and out)模块: 应用程序代码要求 HMR runtime...通常将这些ID存储在内存中(例如,使用webpack-dev-server时),但是也可能将它们存储在一个JSON文件中。 在模块中 HMR是可选功能,只会影响包含HMR代码的模块。...如果请求成功,待更新chunk会和当前加载过的chunk进行比较。对每个加载过的chunk,会下载相对应的待更新chunk。当所有待更新chunk完成下载,就会准备切换到ready状态。

1.7K70

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

---- 什么是Angular-cli 简言之:就是NG团队自行维护的一个`脚手架`[内置单元测试及webpack2打包工具等] -- 这货前身是ember-cli; 官网:cli.angular.io...推荐; 目前最新的是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次,每次升级各种酸爽; rc2开始基本变化不大,可以直接拿来用了。。...装上的 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内的cnpm安装,记得带版本号,有时候不带版本会安装0.0.1...v0.33.1/install.sh | bash 记得重新读取bash的配置文件,因为脚本没法实时生效,用linux的source命令一下子就搞定了 source ~/.bashrc : 意思就是重新加载当前用户的...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

1.8K10

用编译型语言去解决脚本语言的性能问题是个不小的机会

前言 技术预演第一步很重要,开始错了后面可能都是白费力气 起因 打包优化是我之前一直想解决的一个问题,修改webpack源码也是增加缓存和多线程这两个方式juejin.im/post/5def81… 前段时间的...开发语言没有优劣之分只是区分不同的应用场景,最快的执行效率,代表最快的开发效率,最快的开发效率也代表有最好的生态社区稳定性等等。 小结如果用c开发打包脚本是不是更快呢哈哈?...只要注释掉两行代码就可以正确执行了 第三步改进脚手架把angular-cli 本地化打包成exe 执行构建命令 结果是能打包出来,然后效率并没有提升 注意事项 pkg打包过程中本地路径引用的问题一定要注意...(例如__dirname是在执行二进制的文件目录下面而不是真正执行的工作目录下面) value with node packaged comments __filename /project/app.js...project/app.js require.main.filename /project/app.js /snapshot/project/app.js 由于前面资源路径引用的问题所以可能需要把某些脚本资源加载到二进制中

46620

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

什么是angular-cli 简言之:就是NG团队自行维护的一个项目脚手架[内置单元测试及webpack打包工具等],这货前身是ember-cli; 官网 / Github 吐槽 我最早是从Angular...cli beta18开始用的,截止beta28.3,这个分支已经废弃,已经迁移,之前npm install angular-cli推荐; 目前最新的是v1.0.0正式版【2017-3-24】,从旧版本到...正式版的配置稍微有些改动,我比较了下基本不大,放心使用 系统环境配置 window 安装lts版本的nodejs v6.10.0 , Angular-cli中的node-sass不支持7.x,装上的...安装windows-build-tools: windows下的依赖库,再执行官方安装命令 Linux下: nodejs控制推荐用nvm来管理 先下载nvm的脚本,用curl或者wget都行,前者有些预装...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

10810

webpack 热更新(HMR)实现原理

优点: 代码文件修改到页面内容更新,自动完成 兼容目前市面上主流的开发框架 :react,vue,angular2,如使用angular-cli创建ng项目通过@ngtools/webpack已经内置了...webpack 相比location.reload() 更新方式,不需要刷新页面,可以保存应用的当前状态 HMR相关的中间件 webpack-dev-middleware 本质上是一个容器,将webpack...webpack-dev-server 内置了webpack-dev-middleware和express服务器,利用webpack-dev-middleware提供文件的监听和编译,利用express提供...HMR的工作原理 [图片] webpack --watch启动监听模式之后,webpack第一次编译项目,并将结果存储在内存文件系统,相比较磁盘文件读写方式内存文件管理速度更快,内存webpack服务器通知浏览器加载资源...Webpack HMR 原理解析 从零实现webpack热更新HMR

3.1K20

走近webpack(0)--正文之前的故事

在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如...:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。   ...但是你会发现,所有的文档甚至官方说明都不推荐全局安装webpack,因为全局安装会把webpack锁定到指定的版本,无法自由的根据情况去选择webpack版本,也有可能你从git上clone的webpack...代码如下: npm install webpack -g /*全局安装最新版本的webpack*/ npm install webpack --save-dev /*安装最新版本的webpack到当前项目...根本没有达到我们想要的自动化,热加载等使项目开发方便,打包灵活,减少http请求等优化项目的目的。   是的,上面的打包方式在我们的实际开发和应用中基本上是不会用到的。

68140

webpack4 新特性

学习参考 学习一项新知识最好能站在巨人的肩膀上,其中 angular-cli、create-react-app 和 vue-cli 中对 webpack4 中的使用都是我们学习和模仿的对象。...CLI 没有像 angular-cli 和 create-react-app 那样提供 eject 命令,而是通过 vue.config.js 进行包括 webpack 在内的全局配置。...如果希望使用 webpack-chain 的话,可以参考其它比较成熟的 vue 项目,比如 vue-element-admin 也非常具有借鉴意义。...none 选用任何默认优化选项 (1)可以在启动命令后加入参数使用: "scripts": { "dev": "webpack --mode development", "build": "...(1)runtime 在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。

1.1K20

angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过eject命令把webpack...serve --host (self) 指定本地Server绑定的域名,默认值:localhost.如果希望使用self来访问你的站点,须加入以上参数 2.ng serve --hmr 注意开启之后,只是在angular-cli...里的webpack添加必要的扩展,等价于webpack-dev-server --hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加: if(module.hot) { module.hot.accept...CLI会根据指定的值加载对应的环境配置文件。...下面两句等价: ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件: "environments

1.6K30

走近webpack(0)–正文之前的故事

在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如...:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。   ...但是你会发现,所有的文档甚至官方说明都不推荐全局安装webpack,因为全局安装会把webpack锁定到指定的版本,无法自由的根据情况去选择webpack版本,也有可能你从git上clone的webpack...代码如下: npm install webpack -g /*全局安装最新版本的webpack*/ npm install webpack --save-dev /*安装最新版本的webpack到当前项目...根本没有达到我们想要的自动化,热加载等使项目开发方便,打包灵活,减少http请求等优化项目的目的。   是的,上面的打包方式在我们的实际开发和应用中基本上是不会用到的。

23310

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

前言 很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天生支持debug功能,不用白不用,今天我就说说怎么调教...angular-cli; ---- 题外话(号外) 最近vscode又更新了。。...简言之:就是让你的代码在chrome上调试,为什么vscode集成这个,可能控制体积大小什么的。。...记得ng serve要先行启动,调试是调试,不包括引导angular-cli的启动; 配置文件很简单: { "version": "0.2.0", "configurations": [{..." }] }复制代码 配置解释 version : 你定义这个配置文件的版本,默认是0.2.0,生成的时候 configuration:配置域 name:配置文件的名字,比如你可以叫做Debug Angular-cli

96220

Angular10配置webpack打包 「详细教程」

对于 Angular 项目,推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。...initial:提取同步加载和异步加载模块,如果xxx在项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同的文件中。...同步加载的模块:通过 import xxx或require('xxx')加载的模块。 all:不管异步加载还是同步加载的模块都提取出来,打包到一个文件中。...需要注意的是,默认angular-cli打包生成的入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中的配置。...} `` 允许您跳过一些块(例如,添加单元测试块) xhtml {Boolean} false 如果true将link标签呈现为自动关闭(符合XHTML) 最后奉上完整的webpack.partial.js

4.8K20

npm依赖(框架平台)

移动端应用框架 stencil: Ionic原生 weex: Vue移动端应用框架 微信框架 mpvue: Vue小程序框架 wepy: Vue小程序框架 westore: 无依赖小程序框架 脚手架 angular-cli...react-fastclick: React点透组件 react-hold: React占位组件 react-hot-loader: React模块热替换转换器 react-lazyload: React懒加载组件...react-loadable: React动态加载组件 react-pdf: React PDF组件 react-placeholder: React占位组件 react-select: React选择组件...connect-history-api-fallback: 浏览器历史 cookie-parser: Cookie解析 http-proxy-middleware: HTTP代理 polyfill-service: 垫片服务 webpack-dev-middleware...: Webpack本地服务器 webpack-hot-middleware: Webpack模块热替换 结语 写到最后总结得差不多了,后续如果我想起还有哪些框架平台遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解

2.4K20

php工程狮感知的前端工作流程

css 我们对美的追求是无止境的,光有结构,看起来没有色彩,有些地方突出。...当然今天不讲这么多发展历史(关键是我也没理清呀),总的来说就是 js 开发工作原来比较简单,大家随便写写久搞定工作了,但是现在工作的复杂度越来越高,像以前那么任性的工作,开发麻烦、维护麻烦。...Perl语言的发明人Larry Wall说,好的程序员有3种美德: 懒惰、急躁和傲慢(Laziness, Impatience and hubris)。...懒惰: 是这样一种品质,它使得你花大力气去避免消耗过多的精力。它敦促你写出节省体力的程序,同时别人也能利用它们。为此你会写出完善的文档,以免别人问你太多问题。...还没有,现在的基本都讲究什么前后端分离,也就是变成了web app的方式,那么就要求页面重新加载要变少,用户交互要变多,也就导致一个页面上js越来越多。这么多的js怎么管理?如何提高浏览器的加在速度?

70430

学不动了,Vercel 推出比 Vite 快 10 倍的打包器 Turbopack

新的 `next/image` (stable)[6] :[7] native browser 延迟加载速度更快。...Streaming:[16] 显示即时加载状态并流式传输更新。...懒惰打包 Next.js 的早期版本试图在开发模式下打包整个Web 应用程序。我们很快意识到这种“急切”的方法并不是最优的。Next.js 的现代版本仅打包开发服务器请求的页面。...“我们可能是 Webpack 的最大用户。我们开始和作者聊了很多,因为当时我们有像沃尔玛这样的客户,有超过 250 名工程师在 Next.js 代码库上工作,分享关于编译过程的反馈。...我们对市场说,我们将进行服务器渲染并编排由多个入口点组成的复杂应用程序,因此我们开始改变 Webpack 的默认设置。Webpack 非常单一且面向 SPA。”

3.6K10

Vue.js中的延迟加载和代码拆分

Webpack bundling 打包机制 本系列中的大多数技巧都将集中在如何使我们的JS包更小。要了解它,首先我们需要了解Webpack如何打包所有文件。...延迟加载 那么当我们仍然需要添加新功能并改进我们的应用程序时,我们如何削减budle包大小?答案很简单 - 延迟加载和代码分割。 顾名思义,延迟加载是一个懒惰加载应用程序的部分(块)的过程。...现在是时候看看我们如何在我们自己的Vue.js应用程序中使用延迟加载。 动态导入 我们可以使用webpack的动态导入,轻松地加载我们应用程序的某些部分。...让我们看看它们的工作原理,以及它们与常规导出模块的区别。 如果我们以这样的标准方式导入JavaScript模块: ? 它将作为main.js的节点添加到依赖关系图中并与之捆绑在一起。...了解动态导入的工作方式之后,我们知道产品和类别最终会以单独的bundle包形式出现,但是未动态导入的productGallery模块会发生什么?

7.7K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券