CODEWITHSUNDEEP
angularerror-handlingroutes
Akd
Akd

Reputation: 53

Angular cannot match any routes

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

Upvotes: 2

Views: 297

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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).

Upvotes: 2

Related Questions