-
Notifications
You must be signed in to change notification settings - Fork 26.2k
feat(router): deprecate loadChildren:string #30073
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Reviewer: please also review the commit message deprecation section, as it's intended to go in the |
e46ef67
to
e0d2c35
Compare
packages/router/src/config.ts
Outdated
@@ -93,6 +93,16 @@ export type ResolveData = { | |||
/** | |||
* | |||
* A function that is called to resolve a collection of lazy-loaded routes. | |||
* | |||
* Often this function will be implemented using an ES2017 dynamic `import()` expression. For |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dynamic import is not part of ES2017 (or any edition), only a stage-3 proposal.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Corrected, good catch!
Shouldn't |
e0d2c35
to
777f9c4
Compare
@trotyl indeed. I added them. |
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.
777f9c4
to
898e253
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good! Thanks for all the updates
merge-assistance: global approval |
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 angular#30073
Do you have a preview of what lazy-loading routing files should look like in future: https://stackoverflow.com/questions/56272160/loadchildren-is-deprecated-in-angular8 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
ES2017 dynamic import() is now supported by the Angular CLI and the larger
toolchain. This renders the
loadChildren: string
API largely redundant, asimport() is far more natural, is less error-prone, and is standards
compliant. This commit deprecates the
string
form ofloadChildren
infavor of dynamic import().