Angular项目开发环境下编译时间长的问题

这个问题来自于我的个人博客项目。

解决方法来自StackOverflow: Angular 12 'ng serve' builds apps slowly, almost like production builds

事情是这样的：

我的Angular项目编译运行是正常的, 在模板和代码中如果作了更改, 只要保存就会在1秒内编译并重新完成部署. 但在我添加基于jquery的markdown渲染组件时, 突然出现了奇葩的错误, 无法将组件添加到项目中. 于是我将整个npm_modules文件夹删掉, 并重新运行npm install. 最后组件成功添加了, 但却遗留下了一个问题: 从此编译速度变慢了百倍. 文件保存后往往要运行好几十秒才能重新编译部署到浏览器中, 大大降低了我的开发效率.

但当时为了趁早完成我的第一个博客项目, 就没有管那么多, 头铁地完成了. 最近学校要交数据库实践项目, 我就想把该项目加强并完善后, 应付上去.

这次我决定先把这个问题解决了.

问题缘由

在Google上搜了大多资料后, 所有苗头都指向了一个问题: 版本更新.

如果你的Angular项目版本是v11, 然后运行了npm install, 那么极有可能会给你安装v12版本的依赖包. 而v12版本的cli对angular.json文件的理解方式与v11的不一样. 若升级后不对angular.json文件进行一定的配置, 或运行ng update命令. 那么就会导致 ng server 运行处于生产环境的相关配置中.

处于这种配置的时候, 打包方式就从JIT变成了AOT, 时间大大增长.

(其实这几段话有我个人的理解, 如果大佬您觉得有不对