ИСКЛЮЧЕНИЕ: Неподготовлено (в обещании): Ошибка: не может соответствовать любым маршрутам. 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 { 
} 

и его мой app.component, в котором я пытаюсь перенаправить ProjectDetailsComponent с помощью «/ детали» маршрутов и отправить на него проект 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]); 
    } 
} 

Но когда я пытаюсь перейти к '/ детали: идентификатор' маршрутизатора я получаю следующее сообщение об ошибке:

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 efault route