feat: use import() construct via ng-router-loader@2.0.0 #1387
Conversation
fix: upgrade webpack-dll-bundles-plugin
|
@colinskow that's actually not related.
The modules are loaded at startup due to the route strategy, this is configurable.
They are still asynchronous, they just load automatically at startup but a separate bundle is there for each module.
This update doesn't add new functionality, it's more syntax related.
End result for all async code styles (require.ensure, System.import and import()) is logically the same...
…Sent from my iPhone
On Jan 18, 2017, at 1:54 AM, Colin Skow ***@***.***> wrote:
colinskow
|
|
How would you configure it to load the chunks on route change? |
|
https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.module.ts#L63
Just remove the strategy the default should be nod preloading I think.
Anyway you can change it to what's available (see the docs) and you can create custom strategies
The way module load is not part of loader... work
Sent from my iPhone
… On Jan 18, 2017, at 2:23 AM, Colin Skow ***@***.***> wrote:
How would you configure it to load the chunks on route change?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Outside of Patrick's approval, we need to get decent documentation around this with all the other routing docs. Most of the users of this starter don't follow TypeScript issues / TC-39 like we do. |
|
Worth noting that in 2.0.0 you had to move the loader to the top only if you wanted to use In 2.1.0 it is required for all use cases since I switched to JS AST, if you sent TS to the loader it will fail... It doesn't make sense to use the TS compiler here since angular can run on raw JS code |
The definition of the `*.ts` loader is getting more complex. We need AOT compliance so we use `angular2-template-loader` We need lazy loading so we use `ng-router-loader` And of course, we need to compile TS to JS, `awesome-typescript-loader` We can't explain all that in the configuration file but we can use Webpack 2 new loader syntax and use objects instead of literal string to configure the loaders.
|
@d3viant0ne, last commit reasoning The definition of the We can't explain all that in the configuration file but we can use Webpack 2 new loader syntax and use objects instead of literal string to configure the loaders. |
|
@d3viant0ne Please review https://github.com/AngularClass/angular2-webpack-starter/wiki/Routing-and-Lazy-loading-@NgModules Comments are welcome |
|
@gdi2290 make a quick review on this one, it's a block for another PR and the current loader's version (2.1.0) has bug fixes and improvements that we need to push into the starter. |
|
@shlomiassaf I made some documentation on lazy loading here: You could probably take the first part of that. |
* feat: use import() construct via ng-router-loader@2.0.0 fix: upgrade webpack-dll-bundles-plugin * refactor: verbose ts loader definition The definition of the `*.ts` loader is getting more complex. We need AOT compliance so we use `angular2-template-loader` We need lazy loading so we use `ng-router-loader` And of course, we need to compile TS to JS, `awesome-typescript-loader` We can't explain all that in the configuration file but we can use Webpack 2 new loader syntax and use objects instead of literal string to configure the loaders.
Support the Dynamic import proposal [TC39 Stage 3] as a loader (codegen).
The import() construct is supported in webpack from 2.1.0-beta28
Moving to 2.0.0 requires a subtle change in the TS loader order.
Dev's that just upgrade the packages will have some trouble locating this change in the configs so we might expect some noise
Reason for change:
Typescript transform
import(...)syntax into something else.To use
ng-router-loaderwithasync-importcode generator theng-router-loadermustrun AFTER the TS compiler (e.g: awesome-typescript-loader), that is in a lower index in the loaders array. If it runs before, TS will see the
import(...expression and will convert it into invalid code.This change also requires the code generators to emit ES5 code, all codegen's now emit ES5 code.
SEE: microsoft/TypeScript#12364