Angular2延迟加载模块：如何使用SystemJS Builder创建构建包？

我正在使用Angular2和SystemJS来创建Web应用程序.
我的应用程序中有一些模块,在路由器配置中我使用延迟加载来打开它们.

这是我的应用程序的路由文件,延迟加载两个模块：

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

编辑：

如在带有静态包的SystemJs Builder站点上所述,我们不需要SystemJ来加载模块.实际上我正在创建一个静态包(使用buildStatic而不是bundle),但由于我排除了SystemJs,似乎没有其他方法来延迟加载模块.
那么如何使用bundle创建生产构建然后使用延迟加载模块但没有SystemJS(在dist文件夹中没有systemjs.config.js文件)？我看到WebPack可以做到……

看看您是否可以通过提供所需模块的映射来安抚system.js.所以当system.js找到路径模块/ FIRST-SECTION / first-section.module时,你告诉它：嘿,你能不能在控制台中将这条路径映射到模块/ FIRST-SECTION / first-section.module.js .希望这可以帮助 .

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

Angular2延迟加载模块：如何使用SystemJS Builder创建构建包？

猜你在找的Angularjs相关文章