Lazy Loading Folder in angular 2

Question

I am currently using angular version RC-1

can you please explain me how to implement a lazy loading in angular with an example with in the guide lines https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%20Folders

it would be very useful to implement in my project

Prefix Lazy Loaded Folders with + need a example for this also

explicit I need to load my angular 2 components only on demand

app.component.ts

  import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange,
    EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef,
    RouteConfig, Router, ROUTER_DIRECTIVES,
    Http, HTTP_PROVIDERS, Headers,
    APIServiceHelper
    , APIServiceConstants
    , Header
    , Footer
    , LeftNavigation
    , sample
    , AsyncRoute
} from "./index";
declare var $;
declare function initiateSessionTimeOut(minutes);
declare var System: any;
@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES, Header, Footer, LeftNavigation],
    providers: [HTTP_PROVIDERS, APIServiceHelper, APIServiceConstants],
    host: {
        '(document:click)': 'onClick($event)',
    }
})
@RouteConfig([
    { path: '/sample', name: 'sample', component: sample, useAsDefault: true },
    new AsyncRoute({
        path: '/sample',
        loader: () => System.import('./app/sample/sample.component').then(m => m.sample),
        name: 'sample'
    }),
    new AsyncRoute({
        path: '/sample1',
        loader: () => System.import('./app/sample1/sample1.component').then(m => m.sample1),
        name: 'sample1'
    }),
    new AsyncRoute({
        path: '/sample2',
        loader: () => System.import('./app/sample2/sample2.component').then(m => m.sample2),
        name: 'sample2'
    }),


])
export class AppComponent implements OnInit {


}

Akshay Rao · Accepted Answer · 2016-07-22 07:37:37Z

3

If you are looking for lazy loading concept with the angular 2 then you just have to make some changes in your routes ... You have to make them load only when they are required ...

new AsyncRoute({
path: '/login',
loader: () => System.import('./dist/login.component').then(m => m.loginComponent),
name: 'Login'   })

just don't forget to import asyncroute.. that's how concept of lazy loading works with angular 2 :)

further you can check this out at https://www.xplatform.rocks/2016/02/09/angular2-quicky-async-routes/

i hope this is what u were looking for :)

answered Jul 22, 2016 at 7:37

Akshay Rao

3,5441 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jaishankar Over a year ago

i have followed the above steps but all components js are loading even if route through async route

Akshay Rao Over a year ago

can u show me your file where u have defined your routes...? because i am doing the same and this is working pretty fine

Akshay Rao Over a year ago

just start again ur npm i.e. npm start .... your code looks correct,it should have changed... n tell me if it still doesn't works

Jaishankar Over a year ago

still it not works please have a loook at screen shot on page load only it is loading every thing

Akshay Rao Over a year ago

just check your network tab when u load any page .... if a call is being sent to other components.js file or not ??? lazy loading stops that call... but your files that are being loaded should not be loaded :|

|

Long Field · Accepted Answer · 2016-09-01 04:39:11Z

1

The bad news is with rc1 you won't be able "load my angular 2 components only on demand"

The good news is with ng2 rc5, you can do this now by ng2 team introducing back "module" just like angularJs 1. So, first module your project as:

@NgModule({
  imports:      [ BrowserModule, routing ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Then load on demand:

import { Routes, RouterModule } from '@angular/router'; 
 const routes: Routes= [{path: 'welcome', loadChildren: 'app/screens/welcome.module'}];
export const routing = RouterModule.forRoot(routes);

here: loadChildren: 'app/screens/welcome.module' is ts file app/screens/welcome.module.ts

For more detail example, checked this: http://plnkr.co/edit/nm5m7N?p=preview

edited Sep 1, 2016 at 4:39

answered Aug 15, 2016 at 4:48

Long Field

8889 silver badges17 bronze badges

Collectives™ on Stack Overflow

Lazy Loading Folder in angular 2

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related