angular-cli 라우터 지연로드

Question

각도 모듈을 통한 지연로드가 작동하는 방법을 배우기 위해 샘플 웹 애플리케이션을 실행하려고합니다. 각도 2.4.1을 사용하는 각도 -cli 1.0.0-beta.24를 통해 앱을 생성했습니다. 핵심 애플 리케이션을 생성 한 다음 3 개의 컴포넌트를 생성했습니다. 그런 다음 앱 수준에서 라우팅을 추가하고 구성 요소를 앱 모듈로 가져 와서 처음 두 구성 요소를 직접 참조했습니다. 세 번째 구성 요소의 경우 간단히 Angular routing docs에 지정된 loadChildren 메서드를 사용하여 라우팅을 추가했습니다.

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

export default RouterModule.forRoot(appRoutes); 

내가 세 번째 구성 요소로 응용 프로그램의 모든 수입을 모듈로 세 번째 구성 요소의 코드를 설정 제거 다음과 같이 주요 응용 프로그램에 대한 나의 라우팅 구성이다. 나는 응용 프로그램을 실행하면 내가 COMP3 (모듈 경로)에 대한 링크를 클릭하면

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

export default RouterModule.forChild(routes); 

는 COMP1 및 COMP2에 대한 경로가 잘 작동, 나는 다음과 같은 얻을 다음과 같이 모듈에 대한 라우팅 설정은 콘솔에 기록 된 오류 :

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. 어딘가에 실마리가 있다는 것이 확실하지만 webpack에 대해 충분히 알지 못하고 plunkr과 ng의 응용 프로그램 실행 차이점을 찾기 위해 무엇을하는지 알 수 없습니다.

추가 정보를 추가하십시오. 이 앱의 HTML 템플릿처럼 보이는이 (also available on github repo) : 나는 angular2 seed project이 응용 프로그램 (아래에 SRC에서/응용 프로그램) 내 소스 트리를 복사하고, 약간의 기대 tweeks로, 거기 잘 실행하고 계속

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

angular-cli로 설정된 환경에서 실패합니다. 내 TS 소스로 변경 한 사항은 상대 경로 지정을 사용하는 것입니다.

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

(loadChildren 호출 용) 이 업데이트를 반영하기 위해 내 Github 예제 코드를 변경했지만 angular-cli 환경에서는 여전히 실패합니다.

Answer 1

변경하여 comp3.routes.ts :

export default RouterModule.forChild(routes); 

하려면 다음을 수행하십시오 comp3.module.ts에

export const comp3Routing = RouterModule.forChild(routes); 

교체

다음은 우리의 게으른 라우터 :

import comp3Routes from "./comp3.routes"; 

으로

:

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

우리는/웹팩 승 각도 CLI를 사용

다음은 우리가 (우리의 게으른 모든 구성 요소가 + 게으른 폴더에 보관되어 있습니다) 작업 한 내용의 예입니다.

또한 lazy 페이지에 대한 routerLink의 모습은 어떻습니까?

로맨티스트 :은 "게으른"태그 메인 라우터 안타 무엇이라고

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 사용하는 또 다른 방법 : 당신이 당신을 라우팅에 후

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

다음 app.route.ts 사용에

처럼 사용할 필요가 : 사용 후

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); 

과 app.module.ts처럼 AppRouting 상수 :

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


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