Skip to content
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

feat(router): deprecate loadChildren:string #30073

Closed

Conversation

@alxhub
Copy link
Contributor

commented Apr 23, 2019

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. This commit deprecates the string form of loadChildren in
favor of dynamic import().

@alxhub alxhub requested a review from angular/fw-router as a code owner Apr 23, 2019

@googlebot googlebot added the cla: yes label Apr 23, 2019

@alxhub

This comment has been minimized.

Copy link
Contributor Author

commented Apr 23, 2019

Reviewer: please also review the commit message deprecation section, as it's intended to go in the CHANGELOG for 8.0.

@ngbot ngbot bot added this to the needsTriage milestone Apr 23, 2019

@kara kara requested review from alexeagle and IgorMinar Apr 23, 2019

@alxhub alxhub force-pushed the alxhub:router/loadChildren/deprecation branch from e46ef67 to e0d2c35 Apr 23, 2019

@alxhub alxhub requested a review from angular/fw-public-api as a code owner Apr 23, 2019

@alxhub alxhub requested a review from kara Apr 23, 2019

@alxhub

This comment has been minimized.

Copy link
Contributor Author

commented Apr 23, 2019

@@ -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

This comment has been minimized.

Copy link
@trotyl

trotyl Apr 24, 2019

Contributor

Dynamic import is not part of ES2017 (or any edition), only a stage-3 proposal.

This comment has been minimized.

Copy link
@alxhub

alxhub Apr 24, 2019

Author Contributor

Corrected, good catch!

@trotyl

This comment has been minimized.

Copy link
Contributor

commented Apr 24, 2019

Shouldn't NgModuleFactoryLoader/SystemJsNgModuleLoader be deprecated as well? Which are dedicated for string children.

@alxhub alxhub force-pushed the alxhub:router/loadChildren/deprecation branch from e0d2c35 to 777f9c4 Apr 24, 2019

@alxhub alxhub requested a review from angular/fw-core as a code owner Apr 24, 2019

@alxhub

This comment has been minimized.

Copy link
Contributor Author

commented Apr 24, 2019

@trotyl indeed. I added them.

feat(router): deprecate loadChildren:string
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.

@alxhub alxhub force-pushed the alxhub:router/loadChildren/deprecation branch from 777f9c4 to 898e253 Apr 24, 2019

@IgorMinar
Copy link
Member

left a comment

looks good! Thanks for all the updates

@IgorMinar IgorMinar removed the request for review from kara Apr 24, 2019

@IgorMinar

This comment has been minimized.

Copy link
Member

commented Apr 24, 2019

merge-assistance: global approval

@IgorMinar IgorMinar modified the milestones: needsTriage, version 8 Apr 24, 2019

BioPhoton added a commit to BioPhoton/angular that referenced this pull request May 21, 2019

feat(router): deprecate loadChildren:string (angular#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 angular#30073
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.