Angular cannot match any routes

Question

I am trying to understand how the roiuting works on Angular. So here is my header and I want to go on different pages. my simple header

app.routing.ts:

export const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'auth', component: AuthComponent },
    { path: 'about', component: AboutComponent }
]

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ...
    ROUTING
  ],
  ...
})
export class AppModule { }

app.component.html

 <router-outlet></router-outlet>

home.component.html

 <router-outlet></router-outlet>

Home <--> auth is OK

Home <--> about is OK

But auth <--> about is not working

I get this kind error:

Error: Cannot match any routes. URL Segment: 'about/auth'

As we can see the url is about/auth insead of authenter code here

Can you please add the code you're using to change routes, whether that be the template HTML, or ts. — user184994

Pankaj Parkar Pankaj Parkar · Accepted Answer · 2018-07-14T21:10:04

It seems like you are using relative specified relative paths inside routerLink directive, which basically end up appending mentioned route to current route like that's why you got about/auth on about to auth redirection. To solve this issue use Absolute routing like below.

[routerLink]="'/auth'"`
[routerLink]="'/about'"`

The reason being is, when you have route without / mentioned inside the routerLink directive, it will eventually end up appending the route to currentRoute since its relative routing. Make sure you should use absolute route while navigating to particular route (add / before your route).

Angular cannot match any routes

1 Answers