EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details'

Question

I have this router:

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
  }
];

Also I have an appropriate controller, named ProjectDetailsComponent.

This is my app module, in which I have registered my routes:

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

And its my app.component, in which I try to redirect to ProjectDetailsComponent using "/details" routes and send to it project 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]);
    }
}

But when I try to navigate to 'details/:id' router I get following error:

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'

Please help me with my problem.

if you browse directly to <server_url>/details/1 does it work? — shusson
– shusson, Commented Jan 31, 2017 at 8:09
I use Angular2 in the electron app and I don't know how I can check this way. If I try change location by using window.location.assing() it doesn't work as expected. But if I use this.router.navigateByUrl("/app/details/1"); I get the previous error. — Yevhen.Stienin
– Yevhen.Stienin, Commented Jan 31, 2017 at 8:27

shusson · Accepted Answer · 2017-01-31 08:37:54Z

2

The redirect is going to /details which doesn't have a component defined. You need to define a component for /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]);
  }

}

answered Jan 31, 2017 at 8:37

shusson

5,79237 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yevhen.Stienin Over a year ago

Thanks for you answer. I tried this way. But I always get to the DetailsComponent instead of ProjectDetailsComponent, even if I passed the id. If I set the same component to all routes, I always get to the ProjectDetailsComponent as expected, but I can't get id, because it is undefined.

shusson Over a year ago

Did you add a router-outlet to your app.component.html?

Yevhen.Stienin Over a year ago

Yes. I did it.

<div class="projects-panel">     <project-list [(selected)]="activeProject" [projects]="projects"></project-list>     <router-outlet></router-outlet> </div>

Yevhen.Stienin Over a year ago

I beleave, this proves that the outlet works. And routing partially works. But for some reason it does not determine the route with parameters.

shusson Over a year ago

This worked for me, try simplifying your problem and look at the angular tutorial for routing.

|

Jayant Patil · Accepted Answer · 2017-12-05 10:30:03Z

0

I faced the same issue apply, all possible solution but finally, this solve my problem

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

This will work because angular 4 has not given any default route so handle error catch that and you can redirect to default route

answered Dec 5, 2017 at 10:30

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details'

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related