CODEWITHSUNDEEP
angulartypescriptroutes
DESH
DESH

Reputation: 540

Child Routing Error

I created the following in my app.module.ts:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect

]

And added the following imports in my @NgModule

imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    HttpClientModule
  ],

I recieve the following error in my browser after adding the children routes:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1705)
    at CatchSubscriber.error (catchError.js:105)

...

Upvotes: 1

Views: 183

Answers (3)

Hasan Fathi
Hasan Fathi

Reputation: 6086

In your rout info 'home' not defined.

please add this to your rout info like this:

{ path: 'home', component: HomeComponent }

OR

change this part of rout info:

{ path: '', redirectTo: '/', pathMatch: 'full' }, 
{ path: '**', redirectTo: '/', pathMatch: 'full' }

Upvotes: 2

Kiran Dash
Kiran Dash

Reputation: 4956

Solution 1: With Home at /home

Change code to

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect

]

When there is no path mentioned you are redirecting the route to path '/home', so then you must mention the component HomeComponent for '/home' and not ''

Solution 2: With Home at /

If you want the home to be on '/' then dont use the redirects and keep the code as

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] }

]

Upvotes: 0

Maciej Treder
Maciej Treder

Reputation: 12342

The problem is here:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect
]

You're trying to redirect user to the 'home' path which is not declared in the routing.

Didn't you want to write?:

  { path: 'home', component: HomeComponent },

Or maybe you wanted to do it this way?:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }   // if path is anything not defined --> redirect
]

Upvotes: 1

Related Questions