使用systemjs builder捆绑项目进行延迟加载 - Angular 2 RC6

时间:2016-09-15 01:06:42

标签: angular systemjs

我正在使用systemjs构建器将我的延迟加载的模块捆绑在angular 2 rc6中,当我运行我的应用程序时,我看到所有非延迟加载的模块都被下载(使用fiddler),这是因为我在app.module.ts中导入它们,但是没有一个我的延迟加载模块带有" loadChildren"在app.routing工作中的属性,我看到一个白色的屏幕" loading ..."永远挂在那里,模块没有下载。 这是我的app.routing:

    export const routes: Routes = [
      { path: '', redirectTo: '/strategies', pathMatch: 'full' },
**// NONE OF THE BUNDLES FOR FOLLOWING MODULES ARE BEING DOWNLOADED BY SYSTEM** JS
      { path: 'strategies', loadChildren: 'app/strategy/strategy.module' },
      { path: 'login', loadChildren: 'app/login/login.module' },
      { path: 'crises', loadChildren: 'app/crisis/crisis.module' },
      { path: 'heroes', loadChildren: 'app/hero/hero.module' },
    ];
    export const routing = RouterModule.forRoot(routes);

这是我的app.module:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        routing,
        CoreModule, ==> **THIS IS BUNDLED TOO AND SYSTEMJS DOWNLOADS IT UP FRONT**
        HttpModule,
    ],
    bootstrap: [AppComponent],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
    ],
})
export class AppModule { }

这是我在systemjs.config文件中的bundle配置:

bundles: {
    'dist/index.js': ['app/*'],
    'dist/shared/index.js': ['app/shared/*'],
    'dist/core/index.js': ['app/core/*'],
    'dist/crisis/index.js': ['app/crisis/*'],
    'dist/hero/index.js': ['app/hero/*'],
    'dist/strategy/index.js': ['app/strategy/*'],
    'dist/login/index.js': ['app/login/*'],

    'dist/dependencies.js' : [
        '@angular/core/bundles/core.umd.js',
        '@angular/common/bundles/common.umd.js',
        '@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http/bundles/http.umd.js',
        '@angular/router/bundles/router.umd.js',
        '@angular/forms/bundles/forms.umd.js',
        'angular2-in-memory-web-api/index.js',
        'rxjs/*','rxjs/scheduler/*','rxjs/add/*','rxjs/add/operator/*','rxjs/observale/*','rxjs/add/observable/*',
        ]
}

任何暗示都会受到赞赏。

1 个答案:

答案 0 :(得分:2)

如果这有助于任何人,我能够解决我的问题。 配置错了。 我更新了我的systemjs配置文件,有两个不同的配置,一个用于开发,一个用于systemjs builder包。 生产/捆绑版本如下:

{{1}}

并且开发配置保持不变。 更多信息:rc6 config