how to use lazy loading in angular2-meteor app

Question

I am creating a angular2 meteor app in which i need to do lazy loading .

I have tried angular 2 doc for lazy loading.

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
    }
    ]
}
];

when i run my code after adding lazy loading i am getting this error.

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)

Why its not working.What should i do to make it work?

can anyone tell me how to use lazy loading in angular2-meteor app ?

score 2 · Answer 1 · answered Jun 16 '17 at 05:40

i think Angular Meteor support Lazy Loading now. Here is the code of how to do it

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

for complete example check this github repo https://github.com/joerex/angular-meteor-lazy-load

Great to see a working example, I had many issues getting SystemJS to work — Mattijs, Sep 17 '17 at 10:17
Question: what is the difference between the cheap and expensive load? For both I don't see anything happening in my network tab. I do realise that the cheapModule has been imported at the top and the expensive module not. But does it really make a difference in load performance or is it marginal? I assume all JS code in minified and concatenated so everything is loaded over the line any way. Also, how would you type the `module` object that has the dynamicImport? — Mattijs, Sep 17 '17 at 10:35

score 1 · Answer 2 · answered Oct 30 '16 at 08:01

1

Lazy loading does not appear to be supported in angular-meteor at this time. (See: https://github.com/Urigo/angular2-meteor/issues/370 for a discussion )

answered Oct 30 '16 at 08:01

KauriNZ

142
5

how to use lazy loading in angular2-meteor app

2 Answers2