2016-10-29 4 views
4

私は遅延読み込みを行う必要があるangular2流星アプリを作成しています。angle2-meteorアプリケーションでの遅延読み込みの使用方法

私はレイジーローディングのために角度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) 

なぜ機能しないのですか。動作させるにはどうすればよいですか?

誰でも私にangel2-meteorアプリケーションの遅延読み込みを使用する方法を教えてもらえますか?

答えて

2

私は角度流星のサポートが遅れていると思います。違いは何である:ここでは実施例を参照するのに最適なこのGitHubのレポhttps://github.com/joerex/angular-meteor-lazy-load

+0

をチェックし、完全例えばそれを

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 {} 

を行う方法のコードは、私が – Mattijs

+0

質問を仕事にSystemJSを得る多くの問題がありました安くて高価な荷物?どちらも私のネットワークタブで何も起こっていない。私はcheapModuleが高価なモジュールではなくトップにインポートされていることを認識しています。しかし、それは実際に負荷性能に違いを生むのですか、それとも限界的なのでしょうか?私はすべてのJSコードを縮小し連結していると仮定し、すべてが何らかの方法で行にロードされるようにします。 また、dynamicImportを持つ 'module'オブジェクトをどのように入力しますか? – Mattijs