Компонент Angular2 не отображается и не работает, набирая ссылку вручную, всегда переходя на родительский путь.

Я только начал свое путешествие по Angular 2. Я делаю небольшое приложение для управления клиентами, чтобы видеть и добавлять клиентов. Я смог заставить работать три других компонента, но застрял на новом.

Компоненты, над которыми я работал до сих пор:

«Клиент» только с шаблоном роутера-розетки для маршрутов Клиента.

Компонент ClientList, который отображает список клиентов в левой части представления. Когда клиент из списка выбран, маршрутизатор переходит на страницу идентификатора клиента / client / id. В этом шаблоне также есть кнопка «Добавить клиента», чтобы начать добавление нового клиента.

Компонент ClientDetail с шаблоном сведений о клиенте для отображения сведений о выбранном клиенте в правой части представления.

Я застрял с компонентом ClientNew. Я бы хотел сделать так, чтобы после нажатия кнопки «Добавить клиента» в правой части представления была загружена пустая форма, чтобы пользователи могли добавлять сведения о клиенте. Но всякий раз, когда я нажимаю «Добавить клиента», я всегда перехожу к родительскому пути, например, если page / client / new не существует.

Вот что у меня есть:

Компонент Client.routing

import { NgModule }                from '@angular/core';
import { Routes, RouterModule }    from '@angular/router';
import { ClientsComponent }        from './clients.component';
import { ClientListComponent}      from './client-list.component';
import { ClientDetailComponent }   from './client-detail.component'; 
import { ClientDetailResolver }    from './client-detail-resolver.service';
import { ClientNewComponent   }    from './client-new.component';

 const clientRoutes: Routes = [
  {
     path: '',
     component: ClientsComponent,
     children: [
       {
         path: '',
         component: ClientListComponent,
         children: [
           {
            path: ':id',
            component: ClientDetailComponent,
            resolve: {
              client: ClientDetailResolver
            }
          },
           {
             path: 'new',
             component: ClientNewComponent,
           }
        ]
      },
    ]
   }
];

@NgModule({
   imports:   [RouterModule.forChild(clientRoutes)],
   exports:   [RouterModule],
   providers: [ ClientDetailResolver]
})
export class ClientRouting { }

Компонент ClientList

import 'rxjs/add/operator/switchMap';
import { Component, OnInit }     from '@angular/core';
import { Client }                from './client';
import { ClientService }         from './client.service';
import { Observable }            from 'rxjs/Observable';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
styles: [],
  template: require('./client-list.component.html')
})

export class ClientListComponent implements OnInit {
  clients: Observable<Client[]>;
  selectedId: number;

constructor(
  private router: Router,
  private route: ActivatedRoute,
  private clientService: ClientService) {
}

ngOnInit(): void {
   this.clients = this.route.params
         .switchMap((params: Params) => {
         this.selectedId = +params['id'];
         return this.clientService.getClients();
       });
  }

onSelect(client:Client): void {
  this.selectedId = client.id;
  this.router.navigate([client.id], { relativeTo: this.route });
}
onSelectNew(): void {
    console.log(this.router);
    this.router.navigate(['new'], { relativeTo: this.route });
    console.log('test');
}
}

Компонент ClientNew

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Client }         from './client';
@Component({
  selector: 'new',
  templateUrl: './client-new.component.html',
  styles: []
})

export class ClientNewComponent {
  constructor(
  private route: ActivatedRoute,
  private router: Router,
) {}

ngOnInit(): void {
   console.log("Test");
  }
}

Clients.module

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { NgaModule }     from '../../theme/nga.module';

import { ClientRouting } from './clients.routing';

import { ClientDetailComponent }  from './client-detail.component';
import { ClientsComponent }       from './clients.component';
import { ClientService }          from './client.service';
import { ClientListComponent }    from './client-list.component';
import { ClientNewComponent }    from './client-new.component';

@NgModule({
  imports:     [CommonModule,FormsModule,NgaModule,ClientRouting],
  declarations: [ClientsComponent, ClientDetailComponent,ClientHomeComponent, ClientListComponent, ClientNewComponent],
  providers:[ClientService]
})
export default class ClientsModule {}