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

Question

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

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

vs

{ 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 in Angular 8.0.0（2019-05-28）。

  Angular CLI和

ES2017动态import()现在受支持   更大的工具链。这在很大程度上呈现了loadChildren: string API   冗余，因为import()更自然，错误更少，并且   符合标准。

除此之外，使用这两种方法的最终结果是相同的（路由被延迟加载，如果使用了不赞成使用的版本，则会发出警告）。

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

{ 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/

*根据字符串ProductsModule，它应该是productsModule而不是'app/products/products.module#ProductsModule'。