如何在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