如何在angular2流星应用中使用延迟加载

Question

我正在创建一个angular2流星应用，我需要在其中进行延迟加载。

我已经尝试了角度2 doc为懒加载。

app.routes.ts

import { Route } from '@angular/router'; 
import { Meteor } from 'meteor/meteor'; 
import { LoginComponent } from './modules/loginComponent/login.component'; 
export const routes: Route[] = [{ 
    path: '', 
    redirectTo: "login", 
    pathMatch: "full" 
}, { 
    path: 'login', 
    component: LoginComponent 
}, { 
    path: 'csvtemplate', 
    loadChildren: './modules/core/core.module#CoreModule' 
} 
]; 

core.route.ts

const routes: Routes = [ 
    { path: '', component: TemplateComponent, 
    children: [{ 
     path: '', 
     redirectTo: 'csvtimeline' 
    }, 
    { 
     path: 'csvtimeline', 
     component: CsvTimelineComponent 
    }, { 
     path: 'csvjson', 
     component: CsvJsonComponent 
    }, { 
     path: 'addcategory', 
     component: CsvAddProductComponent 
    }, { 
     path: 'adduser', 
     component: adduserComponent 
    } 
    ] 
} 
]; 

当我加入延迟加载我得到这个错误后，我的代码运行。

core.umd.js:3257 EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined 
ReferenceError: System is not defined 
    at SystemJsNgModuleLoader.loadAndCompile (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:7882:20) 
    at SystemJsNgModuleLoader.load (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:7875:64) 
    at RouterConfigLoader.loadModuleFactory (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:18376:76) 
    at RouterConfigLoader.load (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:18368:52) 
    at MergeMapSubscriber.project (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:19111:82) 
    at MergeMapSubscriber._tryNext (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:46645:27) 
    at MergeMapSubscriber._next (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:46635:18) 
    at MergeMapSubscriber.Subscriber.next (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:44167:18) 
    at ScalarObservable._subscribe (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:54671:24) 
    at ScalarObservable.Observable.subscribe (http://localhost:3000/packages/modules.js?hash=61f678ddc710f75692a22ec6b345330dc289d744:43030:27) 

为什么它不工作我该怎么做才能使它工作？

谁能告诉我如何在angular2流星应用中使用延迟加载？

Answer 1

目前在角流中似乎不支持延迟加载。 （请参阅：https://github.com/Urigo/angular2-meteor/issues/370讨论）

Answer 2

我觉得Angular Meteor现在支持Lazy Loading。这里是如何做到这一点

import {Route, RouterModule} from '@angular/router'; 
import {NgModule} from "@angular/core"; 
import {Home} from "../home/home.component"; 
import {CheapModule} from "../cheap/cheap.module"; 

declare global { 
    interface NodeModule { 
    dynamicImport(path: string): any; 
    } 
} 

export const appRoutes: Route[] = [ 
    { path: '', component: Home }, 
    { 
    path: 'cheap-route', 
    loadChildren:() => CheapModule 
    }, 
    { 
    path: 'expensive-route', 
    loadChildren:() => module.dynamicImport('../expensive/expensive.module').then(m => m.default) 
    } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 

export class AppRoutingModule {} 

为完整的例子检查这个GitHub库的代码https://github.com/joerex/angular-meteor-lazy-load