angular-cli router lazy loading

Question

Я пытаюсь запустить образец веб-приложения, чтобы узнать, как работает ленивая загрузка с помощью модулей Angular. Я создал приложение через angular-cli 1.0.0-beta.24, который использует угловой 2.4.1. Я создал основное приложение, а затем 3 компонента. Затем я добавил маршрутизацию на уровне приложения и напрямую ссылаюсь на первые два компонента, импортируя компоненты в модуль приложения. Для третьего компонента я просто добавил маршрутизацию, используя метод loadChildren, указанный в Angular routing docs. Моя конфигурация маршрутизации для основного приложения выглядит следующим образом:

const appRoutes: Routes = [ 
    { path: 'comp1', component: Comp1Component}, 
    { path: 'comp2', component: Comp2Component}, 
    { path: 'comp3', loadChildren: 'app/comp3/comp3.module'} 
]; 

export default RouterModule.forRoot(appRoutes); 

Я повернул код для третьего компонента в модуль и удалить весь импорт из приложения к третьему компоненту. Конфигурации маршрутизации для модуля выглядит следующим образом:

const routes: Routes = [ 
    {path: '', component:Comp3Component} 
]; 

export default RouterModule.forChild(routes); 

Когда я запустить приложение, маршруты для COMP1 и comp2 работать нормально, когда я нажимаю ссылку для Comp3 (модуль маршрутизации), я получаю следующее ошибка зарегистрирована на консоли:

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'. 
Error: Cannot find module './comp3/comp3.module'. 
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular] 

Кажется, что веб-пакет не обрабатывает ленивую загрузку. Я пробовал все виды вариантов пробега вызова «loadChildren» в том числе:

loadChildren: 'app/comp3/comp3.module#Comp3Module' 

без изменений в поведении (все еще получаю ошибку выше). Новым для angular2 может быть что-то в моем коде, но я вижу, что другие получают ту же ошибку. Мой google/stackoverflow foo не привел меня к решению. Я добавил свой sample app to my Github account here.

I saw this issue logged by another developer with the Angular team but they kicked it as a support issue to StackOverflow because the sample worked on plunkr. Я уверен, что где-то там есть ключ, но я действительно недостаточно знаю о веб-пакете и о том, что он делает, чтобы найти различия в выполнении plunkr и ng.

Добавление дополнительной информации. Шаблон HTML для приложения выглядит следующим образом (also available on github repo):

<h1> 
    {{title}} 
</h1> 
<ul> 
    <li><a class="nav-link" routerLink="/comp1" routerLinkActive="active">Component 1</a></li> 
    <li><a class="nav-link" routerLink="/comp2" routerLinkActive="active">Component 2</a></li> 
    <li><a class="nav-link" routerLink="/comp3" routerLinkActive="active">Component 3</a></li> 
    </ul> 
    <p></p> 
    <router-outlet></router-outlet> 

Я скопировал мой дерево исходников для этого приложения (от SRC/приложения на вниз) к angular2 seed project, и с некоторыми незначительными ожидается tweeks, он прекрасно работает там и продолжает сбой в среде, созданной угловым кли. Единственным изменением, которое я внес в свой источник TS, является использование относительного пути:

{ path: 'comp3', loadChildren: './comp3/comp3.module#Comp3Module'} 

для загрузки вызова для детей. Я изменил код примера Github, чтобы отразить это обновление, но он все еще не работает в среде angular-cli.

Answer 1

Изменить ваш comp3.routes.ts:

export default RouterModule.forChild(routes); 

To:

export const comp3Routing = RouterModule.forChild(routes); 

На вашем comp3.module.ts заменить:

import comp3Routes from "./comp3.routes"; 

To:

import { comp3Routing } from "./comp3.routes"; 

Наконец импорта comp3Routing, поэтому он должен выглядеть следующим образом:

@NgModule({ 
    imports: [ 
     CommonModule, 
     RouterModule, 
     comp3Routing, 
    ], 
    declarations: [ 
     Comp3Component 
    ], 
    exports: [ 
     Comp3Component 
    ], 

    providers: [], 
}) 
export class Comp3Module { } 

И ваша отложенной загрузки для comp3 должен работать.

Answer 2

Вы пробовали указать полный путь для ленивого загруженного компонента?

Ниже приведен пример того, что мы работаем (все наши ленивые компоненты размещены в папке ленивой +):

{ path: 'lazy', loadChildren: './omfpages/+lazy/lazy.module#LazyModule' }], canActivate: [AuthGuard] } 

Мы используем угловые консоли ж/WebPack.

Также - как выглядит ваш маршрутизаторLink на ленивой странице?

Ours:

routerLink: ['omfpages/lazy/page32'] 

Обратите внимание, что "ленивый" тег, что попадает в основной маршрутизатор. Затем App.router ищет путь к ленивому модулю и затем переходит в «page32» часть к ленивому маршрутизатору.

Ниже наш ленивый маршрутизатор:

... 
const routes: Routes = [ 
    { path: 'page30', component: Page30Component, data: { title: 'Fun  Page'} }, 
    { path: 'page31/:id', component: Page31Component, data: { title:  'Another Page'} },  // <-- this route requires a param to be passed. 
    { path: 'page32', component: Page32Component, data: { title: 'Some Page'} } 
]; 

export const routing: ModuleWithProviders = RouterModule.forChild(routes); 

Answer 3

Другой способ использования loadChildren маршрутизации, как показано ниже:

В вашем app.route.ts использовании

// have to be export modules to handle the lazy loading routing 
export function loadExampleModuleOne() { return ExampleModuleOne } 
export function loadExampleModuleTwo() { return ExampleModuleTwo } 

затем после того как в вашей маршрутизации вам нужно использовать как:

const APP_ROUTE: Routes = [ 
    { 
    path: '', 
    redirectTo: 'example-one', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'example-one', 
    loadChildren: loadExampleModuleOne 
    }, 
    { 
    path: 'example-two', 
    loadChildren: loadExampleModuleTwo 
    } 
]; 

export const AppRouting = RouterModule.forRoot(APP_ROUTE); 

, а затем использовать AppRouting постоянный в вашем app.module.ts:

import {AppRouting} from './app.routing'; 


@NgModule({ 
    import: [ 
    AppRouting 
    ] 
}) 
export class AppModule() { 
}