2016-10-29 1 views
4

Я создаю приложение angute2 meteor, в котором мне нужно делать ленивую загрузку.Как использовать ленивую загрузку в angular2-meteor app

Я пробовал угловой документ 2 для ленивой загрузки.

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-meteor?

ответ

2

i think Угловая поддержка метеоров Lazy Загрузка сейчас. Вот код, как это сделать

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 Repo https://github.com/joerex/angular-meteor-lazy-load

+0

Великий видеть рабочий пример, я много вопросов, получая SystemJS работать – Mattijs

+0

Вопрос: В чем разница между дешевая и дорогая нагрузка? Для обоих я ничего не вижу на моей вкладке в сети. Я действительно понимаю, что cheapModule был импортирован наверху, а дорогостоящий модуль - нет. Но действительно ли это влияет на производительность загрузки или является ли это маргинальным? Я предполагаю, что весь JS-код в миниатюре и конкатенирован, поэтому все загружается по строке любым способом. Также, как бы вы набрали объект 'module', который имеет dynamicImport? – Mattijs

Смежные вопросы