Angular 12 懒加载两种语法哪个正确？二者区别及适用场景是什么？

报错根因 #

你遇到的报错和文件路径是否正确无关，核心原因是Angular 12已经完全移除了对字符串形式loadChildren语法的支持，同时你写的字符串语法中额外增加了.ts后缀，哪怕是在支持该语法的低版本Angular中也会触发模块找不到的错误。

两种写法的由来 #

• 字符串形式loadChildren是Angular 8版本之前的专属懒加载语法，依赖Angular内置的自定义构建逻辑解析字符串中的路径和模块名，实现懒加载模块的打包拆分，原生旧语法规则不需要携带.ts文件后缀。
• 动态import()形式的写法是Angular 8及以后版本推出的官方标准语法，完全符合ECMAScript官方的动态导入规范，不再依赖Angular专属的构建逻辑做特殊解析，通用性和可扩展性更强。

功能等价性 #

在各自适配的Angular版本范围内，两种写法最终实现的懒加载效果完全一致：都是在用户访问对应路由时才异步加载目标模块的资源，有效降低首屏加载的资源体积。

适用场景 #

• 字符串语法：仅适用于Angular 7及更早的历史版本，Angular 8开始已被官方标记为废弃，Angular 9+已经逐步移除对该语法的支持，当前所有处于维护周期内的Angular版本都不建议使用该写法。
• 动态import语法：适用于Angular 8及之后的所有版本，是当前官方唯一推荐的懒加载写法，天然支持TypeScript类型校验，构建工具兼容性更好。

内容的提问来源于stack exchange，提问作者Mawg