Компонент не имеет конфигурации маршрута - вложенные маршруты угловые2 RC1

Question

У меня есть вложенные маршруты.

@Routes([ 
{ path: "/", component: RootComponent }, 
{ path: "/parent", component: ParentComponent }]) 

Маршрут второго уровня имеет параметры.

@Routes([ 
{ path: "/:id", component: ChildComponent }, 
{ path: "/child/:id", component: ChildComponent }]) //same component 

Когда я провожу с RouterLink:

['/parent/child/1'] 

Я получаю сообщение об ошибке:

Component 'ChildComponent' does not have route configuration.

Если изменить вложенный маршрут к одному уровню (плоский) маршрут:

@Routes([ 
{ path: "/", component: RootComponent }, 
{ path: "/parent", component: ParentComponent }, 
{ path: "/child/:id", component: ChildComponent }]) 

все работает нормально (маршрут erLink - то же самое).

Вопрос: Где моя ошибка?

Update: Nested route also do not works when I use just a simple url: e.g. http://server/parent/child/1 url

Answer 1

Проблема:

Причина этого сообщения об ошибке в том, что с новым угловых маршрутизациями 2 RC1, вы, по сути построения дерева маршрута так, когда вы просите '/parent/child/1' ваш второго последний сегмент маршрута (/child/) отправляет вас в ChildComponent и угловатый внешний вид в ChildComponent, чтобы узнать, есть ли какие-либо маршруты, которые могут соответствовать следующему сегменту (/1), и поскольку у вас нет маршрутов, определенных в ChildComponent, это исключает это исключение:

Cannot match any routes. Current segment: '1'. Available routes: []. 

Решение:

Определение вашего (плоский) маршрут дерево в AppComponent, как вы сделали это, безусловно, один из способов решения этой проблемы. Другой способ дифференцировать свои вторые маршруты уровня путем изменения маршрутов в ParentComponent на:

@Routes([ 
    { path: 'childs', component: ChildComponent },  
    { path: 'child/:id', component: ChildComponent },    
]) 

В основном мы создаем две ветви, являющиеся childs и child/:id как маршрутизируется ChildComponent.

Зачем стоит определять маршрут ?

В основном Угловые 2 RC1 маршрутизатор делает не лечить child/:id маршрут в целом, когда маршрут по имени child также определяются, вместо этого, угловой маршрутизатор разбивает child/:id маршрута на два маршрут сегменты child и :id, а затем использовать определение маршрут child, чтобы отвезти вас в ChildComponent, а затем найдите определение маршрута для сегмента :id в ChildComponent, которого он не смог найти. Переименовывая child маршрут до childs, мы вынуждаем нас принять child/:id в целом и взять нас в ChildComponent как конечный пункт назначения, который мы хотим.

Deep Links

Что касается вашего второго вопроса с глубокими связями:

Nested route also do not works when I use just a simple url: e.g. http://server/parent/child/1

Если предположить, что вы используете по умолчанию PathLocationStrategy в качестве LocationStrategy, вы должны убедиться, что ваш веб-сервер служит для файла index.html для каждого маршрута маршрута. Например, в живом сервере добавить следующий аргумент команды веб запуска сервера:

live-server --entry-file=index.html 

Update: Looks like this is a known bug in RC1 and changing the order of the Routes makes everything to work correctly. Please see David's answer for an example.

Answer 2

При определении маршрута, вы можете определить, что маршрут не останавливало добавление этого синтаксиса «/ ... ".

Для вашего родительского маршрута, вы должны написать его так:

компонент для родителей:

import {TestComponent} from ''; 
@Routes([ 
    { path: "/", component: RootComponent }, 
    { path: "/parent/...", name: 'Parent', component: TestComponent } 
]) 

Компонент для детей под названием TestComponent:

@Routes([ 
    {path: '/:id', name: 'Id', component: ChildComponent }, 
    {path: '/child/:id', name: 'ChildId', component: ChildComponent } 
]) 

Answer 3

OMG, я только что перешел порядка второго уровня, и он работал:

@Routes([ 
{ path: "/child/:id", component: ChildComponent }, 
{ path: "/:id", component: ChildComponent }]) //same component 

Это работает, но не знаю почему.

Я уверен, что это URL отображения:

• http://localhost/parent/1 -> выбирает второй конфигурации
• http://localhost/parent/child/1 -> выбирает первый CONFIG

Update

Как показали сейчас известна проблема: https://github.com/angular/angular/issues/8420