Угловой модуль 2 ленивый-загрузочный не работает

Question

Я пытаюсь разобраться в работе над блоками с угловым 2 (RC5), создав базовую структуру сайта с двумя разделами, приветствуем и поддерживаем (подумайте о странице входа и главный сайт). Я установил его в соответствии с документами Angular 2 на функциональных модулях, один для приветственного раздела и один для бэкэнд. Он правильно по умолчанию использует приветственный компонент, но моя кнопка в приветственном компоненте, который должен ссылаться на «бэкэнд», отправляется вместо «приветствия/бэкэнд». Ввод в URL с помощью just/backend идет/backend/welcome. Вот мой app.routing.ts файл:

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:

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

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

Во всяком случае, вот бухнуться всего приложения, чтобы сделать его проще Plunkr. Те, которые имеют значение, находятся в приветственных и вспомогательных папках. При нажатии кнопки «Войти» следует указать «Бэкэнд» с кнопкой «Выход», которая вернет вас на страницу приветствия.

Любые предложения будут оценены.

Answer 1

Я, наконец, работаю, выясняя, что маршрутизатор стекирует маршруты из вложенных модули (например, «backend» в app.routing и «backend» в backend.routing приводит к «/ backend/backend» в качестве URL-адреса). Таким образом, решение состояло в том, чтобы иметь backend.routing.ts с одним маршрутом {path: '', component: BackendComponent}. Также необходимо было добавить значения/to для значений routerLink (например,/backend вместо backend). Вот мои последние backend.routing.ts:

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:

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

В результате появилась кнопка входа в систему taki ng me to/backend и кнопка выхода из системы, которая приведет меня в/приветствовать, как ожидалось. Вот ссылка на плунж: Plunker

Answer 2

С вашим plunkr было много чего не так. Вот рабочий пример https://plnkr.co/edit/QciaI8?p=preview

Ссылка маршрутизатор был перемещен в app.component

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

Также нужно backend.routing.ts

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 было изменено на

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