Angular 中的 LoadChildren Route 中的箭头函数 Vs String 路径

Question

在下面的代码中，除了在第一个例子中，我们需要将productsModule导入文件之外，这两种延迟加载路由的方式有什么区别？

{ path: 'products', loadchildren: () => productsModule }

对

{ path: 'products', loadchildren: 'app/products/products.module#ProductsModule' }

Answer 1

{ path: 'products', loadchildren: 'app/products/products.module#ProductsModule' }

这是 Angular 8.

延迟加载模块的弃用方式

loadChildren 路由配置应从

等字符串更改

{ path: 'products', loadchildren: () => productsModule }

https://angular.io/guide/deprecations#loadchildren-string-syntax

Answer 2

loadChildren:string was deprecated 在 Angular 8.0.0 (2019-05-28) 中。

ES2017 dynamic import() is now supported by the Angular CLI and the larger toolchain. This renders the loadChildren: string API largely redundant, as import() is far more natural, is less error-prone, and is standards compliant.

除此之外，使用两种方式的最终结果是相同的（路由是延迟加载的，如果使用已弃用的版本，则会发出警告）。

但是，要使任何项目保持最新，请考虑使用

{ path: 'products', loadchildren: () => productsModule }

弃用版本 may be removed in version 11。

见

• Changelog
• Commit

Answer 3

如果我错了请纠正我，但我认为第一种情况：

{ path: 'products', loadchildren: () => productsModule }

不会延迟加载模块，因为 productsModule 必须在 .ts 文件的顶部导入（访问路由时也不会下载 .js 包）。您必须使用 import() 语句使其变得惰性，例如：

{ path: 'products', loadChildren: () => import('./products/products.module').then(m => m.productsModule) }

https://angular.io/guide/lazy-loading-ngmodules

https://alligator.io/angular/lazy-loading/

*根据字符串 'app/products/products.module#ProductsModule'.

应该是 ProductsModule 而不是 productsModule