feat(router): deprecate loadChildren:string (#30073)
The proposed ES 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. This commit deprecates the `string` form of `loadChildren` in favor of dynamic import(). DEPRECATION: When defining lazy-loaded route, Angular previously offered two options for configuring the module to be loaded, both via the `loadChildren` parameter of the route. Most Angular developers are familiar withthe `string` form of this API. For example, the following route definition configures Angular to load a `LazyModule` NgModule from `lazy-route/lazy.module.ts`: ``` [{ path: 'lazy', loadChildren: 'lazy-route/lazy.module#LazyModule', }] ``` This "magic string" configuration was previously necessary as there was no dynamic module loading standard on the web. This has changed with the pending standardization of dynamic `import()` expressions, which are now supported in the Angular CLI and in web tooling in general. `import()` offers a more natural and robust solution to dynamic module loading. The above example can be rewritten to use dynamic `import()`: ``` [{ path: 'lazy', loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule), }] ``` This form of lazy loading offers significant advantages in terms of: * type checking via TypeScript * simplicity of generated code * future potential to run natively in supporting browsers (see: [caniuse: dynamic import()](https://caniuse.com/#feat=es6-module-dynamic-import)) As a result, Angular is deprecating the `loadChildren: string` syntax in favor of ES dynamic `import()`. An automatic migration will run during `ng upgrade` to convert your existing Angular code to the new syntax. PR Close #30073
This commit is contained in:

committed by
Andrew Kushnir

parent
abcb2cf9a0
commit
c61df39323
@ -17,6 +17,8 @@ import {NgModuleFactory} from './ng_module_factory';
|
||||
* Used to load ng module factories.
|
||||
*
|
||||
* @publicApi
|
||||
* @deprecated the `string` form of `loadChildren` is deprecated, and `NgModuleFactoryLoader` is
|
||||
* part of its implementation. See `LoadChildren` for more details.
|
||||
*/
|
||||
export abstract class NgModuleFactoryLoader {
|
||||
abstract load(path: string): Promise<NgModuleFactory<any>>;
|
||||
|
@ -24,6 +24,8 @@ declare var System: any;
|
||||
* token.
|
||||
*
|
||||
* @publicApi
|
||||
* @deprecated the `string` form of `loadChildren` is deprecated, and `SystemJsNgModuleLoaderConfig`
|
||||
* is part of its implementation. See `LoadChildren` for more details.
|
||||
*/
|
||||
export abstract class SystemJsNgModuleLoaderConfig {
|
||||
/**
|
||||
@ -47,6 +49,8 @@ const DEFAULT_CONFIG: SystemJsNgModuleLoaderConfig = {
|
||||
/**
|
||||
* NgModuleFactoryLoader that uses SystemJS to load NgModuleFactory
|
||||
* @publicApi
|
||||
* @deprecated the `string` form of `loadChildren` is deprecated, and `SystemJsNgModuleLoader` is
|
||||
* part of its implementation. See `LoadChildren` for more details.
|
||||
*/
|
||||
@Injectable()
|
||||
export class SystemJsNgModuleLoader implements NgModuleFactoryLoader {
|
||||
|
Reference in New Issue
Block a user