Ленивая загрузка папка в угловых 2

Question

настоящее время я использую угловой вариант RC-1

вы можете, пожалуйста, объясните мне, как реализовать отложенную загрузку в угловом с примером с в КОНТР.ЛИНИИ https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%20Folders

его было бы очень полезно реализовать в моем проекте

Приставка Ленивые Loaded папки с + нужен пример для этого также

явный I необходимо загрузить мои угловые 2 компонентов только по требованию

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 { 


} 

Answer 1

Если вы ищете ленивые концепции загрузки с угловым 2, то вы просто должны внести некоторые изменения в вашем маршруты ... Вы должны сделать их нагрузить только тогда, когда они необходимы ...

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

просто не забудьте импортировать asyncroute .. вот как концепция отложенной загрузки работает с угловым 2 :)

дальнейшего вы можете проверить это на https://www.xplatform.rocks/2016/02/09/angular2-quicky-async-routes/

я надеюсь, что это то, что у искало :)

Answer 2

Плохие новости с rc1 вы не сможете «загружать мои угловые 2 компоненты только по требованию»

Хорошая новость с ng2 rc5, вы можете сделать это сейчас командой ng2, которая вводит обратно «модуль» так же, как angularJs 1. Итак, сначала модулируйте свой проект как:

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

Затем загрузите по запросу:

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

здесь: loadChildren: 'приложение/экраны/welcome.module' это приложение TS файл/экраны/welcome.module.ts

Для более подробной информации Например, отметьте это: http://plnkr.co/edit/nm5m7N?p=preview