使用systemjs builder捆绑项目延迟加载-Angular 2 RC6
我正在用systemjs builder捆绑angular 2 rc6中的惰性加载模块,当我运行我的应用程序时,我看到所有非惰性加载模块都在下载(使用fiddler),这是因为我在app.module.ts中导入了它们,但在app.routing work中没有一个具有“loadChildren”属性的惰性加载模块,我看到一个带有“loading…”的白色屏幕永远挂在那里,模块不会被下载。 这是我的应用程序。路由:使用systemjs builder捆绑项目延迟加载-Angular 2 RC6,angular,systemjs,Angular,Systemjs,我正在用systemjs builder捆绑angular 2 rc6中的惰性加载模块,当我运行我的应用程序时,我看到所有非惰性加载模块都在下载(使用fiddler),这是因为我在app.module.ts中导入了它们,但在app.routing work中没有一个具有“loadChildren”属性的惰性加载模块,我看到一个带有“loading…”的白色屏幕永远挂在那里,模块不会被下载。 这是我的应用程序。路由: export const routes: Routes = [
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);
这是我的应用程序模块:
@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文件中的我的bundles配置:
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/*',
]
}
任何提示都将不胜感激。以防万一,如果这对任何人都有帮助,我就能解决我的问题。 配置错误。 我更新了systemjs配置文件,使其具有两种不同的配置—一种用于开发,另一种用于systemjs builder捆绑包。 生产/捆绑包版本如下所示:
config.transpiler = 'typescript',
config.map = {
'app': 'app', // this is where your transpiled files live
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs',
'typescript': 'node_modules/typescript/lib/typescript.js'
};
config.packages = {
'app': { main: 'main.js', format: 'cjs', 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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
};
config.bundles = {
'dist/index.js': ['app/*'],
'dist/dependencies.js': [
'@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',
'angular2-in-memory-web-api/index.js',
'rxjs/*', 'rxjs/scheduler/*', 'rxjs/add/*', 'rxjs/add/operator/*', 'rxjs/observale/*', 'rxjs/add/observable/*',
]
}
开发配置保持不变。
更多信息:以防万一,如果这对任何人都有帮助,我就能解决我的问题。 配置错误。 我更新了systemjs配置文件,使其具有两种不同的配置—一种用于开发,另一种用于systemjs builder捆绑包。 生产/捆绑包版本如下所示:
config.transpiler = 'typescript',
config.map = {
'app': 'app', // this is where your transpiled files live
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs',
'typescript': 'node_modules/typescript/lib/typescript.js'
};
config.packages = {
'app': { main: 'main.js', format: 'cjs', 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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
};
config.bundles = {
'dist/index.js': ['app/*'],
'dist/dependencies.js': [
'@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',
'angular2-in-memory-web-api/index.js',
'rxjs/*', 'rxjs/scheduler/*', 'rxjs/add/*', 'rxjs/add/operator/*', 'rxjs/observale/*', 'rxjs/add/observable/*',
]
}
开发配置保持不变。
更多信息:你能帮我吗?你能帮我吗?