例外：キャッチされていません（約束しています）：エラー：いずれのルートにも一致しません。 URLセグメント： '詳細'

Question

私はこのルータを持っている：

import { Route, RouterModule } from '@angular/router'; 
import { ProjectDetailsComponent } from '../components/project-details/project-details.component'; 

export const ROUTES: Route[] = [ 
    { 
    path: '', 
    redirectTo: '/details', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'details/:id', 
    component: ProjectDetailsComponent 
    } 
]; 

はまた、私はProjectDetailsComponentという名前の適切なコントローラを持っています。

これは私が私のルートを登録している私のアプリモジュール、次のとおりです。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 

// Custom components 
import { AppComponent } from './app.component'; 
import { ProjectDetailsComponent } from './components/project-details/project-details.component'; 

// Routes 
import { ROUTES } from './services/router'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    declarations: [AppComponent, ProjectDetailsComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

そして、私は「/詳細」のルートを使用してProjectDetailsComponentにリダイレクトし、それを送信しようとしたその私のapp.component、プロジェクトID：

import { Component, OnInit } from '@angular/core'; 
import { IProject } from './domain/projects 
import { Router } from '@angular/router'; 
// Routes 
import { ROUTES } from './services/router'; 

@Component({ 
    selector: 'projects-app', 
    templateUrl: 'app/app.component.html' 
}) 
export class AppComponent implements AfterViewInit { 
    public activeProject: IProject; 
    public projects: Array<IProject>; 

    constructor(public router: Router) { 
    } 

    ngOnInit() { 
     this.router.navigate(['/details', this.activeProject.Id]); 
    } 
} 

しかし、私は '詳細/：ID' に移動しようとすると、ルータ、私はエラーを以下の取得：

C:\Sources\SolarPro\build\debug\resources\app\node_modules\@angular\core\bundles\core.umd.js:3521 EXCEPTION: Uncaught (in promise): 
    Error: Cannot match any routes. URL Segment: 'details' 

私の問題を手伝ってください。

Answer 1

リダイレクトは、コンポーネントが定義されていない/detailsになります。 /detailsのコンポーネントを定義する必要があります。

routes.ts

export const ROUTES: Routes = [ 
    { 
    path: '', 
    redirectTo: '/details', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'details', 
    component: DetailsComponent 
    }, 
    { 
    path: 'details/:id', 
    component: ProjectDetailsComponent 
    } 
]; 

details.component.ts

@Component({ 
    selector: 'app-details', 
    templateUrl: './details.component.html', 
    styleUrls: ['./details.component.css'] 
}) 
export class DetailsComponent implements OnInit { 

    constructor(private router: Router) { } 

    ngOnInit() { 
    this.router.navigate(['/details', 1]); 
    } 

} 

Answer 2

私はすべての可能な解決策、同じ問題が適用されます直面したが、最終的には、これは私の問題を解決する

export class AppRoutingModule { 
constructor(private router: Router) { 
    this.router.errorHandler = (error: any) => { 
     this.router.navigate(['details']); // or redirect to default route 
    } 
    } 
} 

これは、角度4がデフォルトルートを与えていないのでエラーキャッチを処理し、dにリダイレクトできるため機能しますエラーのルート