Search code examples
angularrouterangular-router

Angular 4 router loses params when refreshing page

When i am using router link, the router finds the page and renders it but when i am trying to refresh the page or re enter from the url, it fails and gives me this error:

Error: Cannot match any routes. URL Segment: 'project'

I've searched a lot before asking here but couldn't find an answer.

The link i am using: http://localhost:4200/#/project/5

This is my router configuration:

export const routes: Routes = [
    { path: '', component: UserHomepageComponent },
    { path: 'signin', component: SigninComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'userHomepage', component: UserHomepageComponent },
    { path: 'project/:project', component: ProjectComponent }
];

the link that does work:

<div [routerLink]="['/project/', project.id ]" class="project" *ngFor="let project of projects">
    <div class="project-name">{{project.id}} - {{project.description}}</div>
</div>

Any ideas?

Solution

  • Your code should be just

    <div [routerLink]="['/project', project.id ]" class="project" *ngFor="let project of projects"> <div class="project-name">{{project.id}} - {{project.description}}</div> </div>

    Also i see that you have # in the path, so when you refresh it may cannot find the matching routes!

    change your app.module without these,

    {provide: LocationStrategy, useClass: HashLocationStrategy}