Angular2 lazy loading modules: how to create an assembly package using SystemJS Builder?

Question

I am using Angular2 and SystemJS to build a web application. I have some modules in my application and in the router configuration I use lazy loading to open them.

Here is the routing file of my application in which two modules are lazily loaded:

const appRoutes: Routes = [ { path: '', component: MainComponent, canActivate: [AuthGuard], children: [ { path: 'dashboard', component: DashboardComponent }, { path: 'first-section', loadChildren: 'app/modules/FIRST-SECTION/first-section.module' }, { path: 'second-section', loadChildren: 'app/modules/SECOND-SECTION/second-section.module' }, { path: 'documents', component: DocumentsComponent }, { path: 'users', component: UsersComponent }, { path: '', redirectTo: 'dashboard', pathMatch: 'full' } ] } ]; 

I use Gulp to create tasks for the development server and to build the assembly. For assembly, I use SystemJS Builder, which creates a mini-JS file for the entire application.

 gulp.task('app-bundle', function() { var builder = new Builder('src', 'src/systemjs.config.js'); return builder.buildStatic('app/main.js', 'build/scripts/app.min.js', { minify: true }); }); 

But ... if I try to start the server in the build package, the application will not work when it tries to start lazy loadable modules. This gives me the following error:

 GET http://127.0.0.1:8080/app/modules/FIRST-SECTION/first-section.module 404 (Not Found) 

Here is my systemjs.config.js file:

 (function (global) { System.config({ paths: { 'npm:': './node_modules/', }, map: { app: 'app', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 'rxjs': 'npm:rxjs', 'lodash': 'npm:lodash/lodash.min.js', 'jquery': 'npm:jquery/dist/jquery.min.js', }, packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, } }); })(this); 

EDIT:

As described on the SystemJs Builder site with static links, we do not need SystemJs to load modules. I am actually creating a static package (with buildStatic instead of bundle ), but since I exclude SystemJs, it seems that there are no other ways to lazy load modules. So, how to create an assembly using bundle and then use lazy loading modules, but without SystemJS (without the systemjs.config.js file in the dist folder)? I see that WebPack can do this ...

Answer 1

See if you can reassure system.js by providing a map for the required module. Therefore, when system.js finds the path modules / FIRST-SECTION / first-section.module , you say: Hey, you could map this path to the modules / FIRST-SECTION / first- section.module.js without a cry in the console. Hope this helps.

 (function (global) { System.config({ paths: { 'npm:': './node_modules/', }, map: { app: 'app', 'modules/FIRST-SECTION/first-section.module':'modules/FIRST-SECTION/first-section.module.js', ......................... your other mappings here ......................... 'lodash': 'npm:lodash/lodash.min.js', 'jquery': 'npm:jquery/dist/jquery.min.js', }, packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, } }); })(this); 

Answer 2

for your application to run bundles, you need to define the "bundles" property for systemjs, something like this:

  if (global.ENV === 'production') { config.transpiler = 'typescript'; config.map = { 'app': 'app', '@angular': 'node_modules/@angular', }; config.packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, '@angular/core': { main: 'index.js' }, '@angular/common': { main: 'index.js' }, '@angular/compiler': { main: 'index.js' }, '@angular/forms': { main: 'index.js' }, '@angular/http': { main: 'index.js' }, '@angular/platform-browser': { main: 'index.js' }, '@angular/platform-browser-dynamic': { main: 'index.js' }, '@angular/router': { main: 'index.js' }, }; config.bundles = { 'build/scripts/app.min.js': [ 'app/modules/FIRST-SECTION/*', 'app/modules/SECOND-SECTION/*', '@angular/core/index.js', '@angular/common/index.js', '@angular/compiler/index.js', '@angular/platform-browser/index.js', '@angular/platform-browser-dynamic/index.js', '@angular/http/index.js', '@angular/router/index.js', '@angular/forms/index.js', ] } System.config(config);