Angular2 lazy loading modules: как создать пакет сборки с помощью SystemJS Builder?

Question

Я использую Angular2 и SystemJS для создания веб-приложения. У меня есть некоторые модули в моем приложении, и в конфигурации маршрутизатора я использую ленивую загрузку, чтобы открыть их.

Вот файл маршрутизации моего приложения, ленивые нагрузки двух модулей:

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' } 
     ] 
    } 
]; 

Я использую Gulp для создания задач для сервера разработки и производства сборки. Для сборки я использую SystemJS Builder, который создает мини-JS-файл для всего приложения.

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 }); 
}); 

... Но если я пытаюсь запустить сервер на пакете сборки приложение не работает, когда он пытался бежать ленивые загруженные модули. Это дает мне следующую ошибку:

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

Вот мой systemjs.config.js файл:

(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:

Как описано на сайте SystemJs Builder статических расслоений нам не нужны SystemJs для загрузки модулей. На самом деле я создаю статический пакет (с buildStatic, а не bundle), но поскольку я исключаю SystemJs, кажется, что нет других способов ленивых модулей загрузки. Итак, как создать сборку с использованием bundle, а затем использовать ленивые модули загрузки, но без SystemJS (без systemjs.config.js файла в папке dist)? Я вижу, что WebPack может это сделать ...

Answer 1

Посмотрите, можете ли вы успокоить system.js, предоставив карту для требуемого модуля. Поэтому, когда system.js находит путь модулей/FIRST-SECTION/first-section.module, вы скажете: Эй, не могли бы вы отобразить этот путь до модулей/FIRST-SECTION/first-section.module.js без крича в консоли. Надеюсь это поможет .

(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

для того, чтобы иметь пучки работать для вашего приложения, вам необходимо определить свойство «расслоения» для systemjs, что-то вроде этого:

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);