각도 2 모듈 지연 작동 안 함

Question

두 섹션, 환영 및 백엔드가있는 사이트의 기본 구조를 작성하여 모듈 2의 각도 2 (RC5) 지연로드를 시도하고 있습니다 (로그인 페이지 및 주요 사이트). 시작 부분과 백엔드 용으로 하나씩, 기능 모듈에 대한 Angular 2 문서를 따라 설정했습니다. 그것은 올바르게 환영 구성 요소를 기본값으로하지만 '백엔드'경로에 연결해야하는 환영 구성 요소의 내 단추는 '환영/백엔드'로 대신 이동합니다. just/backend로 url을 타이핑하면/backend/welcome로 간다. 여기에, 어쨌든

import { Component } from '@angular/core'; 

@Component({ 
    template: ` 
     <h2>Welcome</h2> 
     <nav><a routerLink="backend">Login</a></nav> 
    ` 
}) 
export class WelcomeComponent { } 

쿵하는 소리입니다 :

import { Routes, RouterModule } from '@angular/router'; 

export const routes: Routes = [ 
    { path: '', redirectTo: 'welcome', pathMatch: 'full'}, 
    { path: 'backend', loadChildren: 'app/backend/backend.module' } 
]; 

export const routing = RouterModule.forRoot(routes); 

그리고 내 welcome.routing.ts :

import { RouterModule } from '@angular/router'; 

import { WelcomeComponent } from './welcome.component'; 

export const routing = RouterModule.forChild([ 
    { path: 'welcome', component: WelcomeComponent} 
]); 

그리고 내 welcome.component.ts 여기 내 app.routing.ts 파일입니다 전체 애플 리케이션의 용이성을 향상시키기 위해 Plunkr. 중요한 것은 환영 및 백엔드 폴더에 있습니다. 로그인을 클릭하면 로그 아웃 버튼이있는 백엔드가 나타나서 시작 페이지로 돌아갑니다.

의견을 보내 주시면 감사하겠습니다.

Answer 1

나는 마침내 라우터가 중첩 된 모듈 (예 : 'append.routing의'백엔드 '경로와'backend.routing '의'backend '는'/ backend/backend '를 URL로 사용합니다). 그래서 해결책은 {path : '', component : BackendComponent}의 단일 라우트로 백엔드를 라우팅하는 것이 었습니다. routerLink 값에 /를 추가해야합니다 (예 : 백엔드 대신 백엔드).

import { Routes, RouterModule } from '@angular/router'; 
import { BackendComponent } from './backend.component'; 

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

export const routing = RouterModule.forChild(routes); 

을 그리고 backend.module.ts :

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { BackendComponent } from './backend.component'; 
import { routing } from './backend.routing'; 

@NgModule({ 
    imports: [ routing ], 
    declarations: [ BackendComponent ] 
}) 
export default class BackendModule { } 

welcome.component.ts : 여기 내 마지막 backend.routing.ts의

import { Component } from '@angular/core'; 

@Component({ 
    template: ` 
     <h2>Welcome</h2> 
     <nav><a routerLink="backend">Login</a></nav> 
    ` 
}) 
export class WelcomeComponent { } 

backend.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    template: ` 
     <h2>Backend</h2> 
     <nav><a routerLink="welcome">Logout</a></nav> 
    ` 
}) 
export class BackendComponent { } 

로그인 버튼 타키 ng/backend로 이동하고 로그 아웃 버튼을/welcome으로 가져 오십시오. 다음은 plunk에 대한 링크입니다. Plunker

Answer 2

plunkr에는 많은 문제가있었습니다. 여기 https://plnkr.co/edit/QciaI8?p=preview

라우터 링크는 또한

import { Routes, 
     RouterModule } from '@angular/router'; 

import { BackendComponent } from './backend.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: 'backend', pathMatch: 'full'}, 
    { path: 'backend', component: BackendComponent } 
]; 

export const routing = RouterModule.forChild(routes); 

Backend.module이 변경되었습니다

에 backend.routing.ts 필요

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>Module Test</h1> 
     <nav><a routerLink="../backend">Logins</a></nav> 
     <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { } 

을 app.component로 이동 된 작업 예입니다

import { NgModule }  from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { BackendComponent } from './backend.component'; 
import { routing }   from './backend.routing'; 

@NgModule({ 
    imports:  [ routing ], 
    declarations: [ BackendComponent ] 
}) 
export default class BackendModule { }