CODEWITHSUNDEEP
javascriptangular
mightycode Newton
mightycode Newton

Reputation: 3949

Child route as default route on the main route in Angular

I hava a Angular 6 application and I have a route with child routes. But if you go to the main route you have to go to the first child route of the main route. Like this:

http://localhost:4200/instellingen/account

But now it goes to this:

http://localhost:4200/instellingen/instellingen/account

I tried a lot and googled a lot

So I have this in the app.routes.ts file:

{
     path: 'instellingen',    
     component: SettingsNavigationComponent,
     canActivate: [AuthGuard],
     children: [
      {path: '', redirectTo: 'instellingen/account', pathMatch: 'full' },
      {path: 'instellingen/account', component: SettingsAccountComponent },
      {path: 'apparaten' , component: SelfcareComponent },
      {path: 'apparaten' , component: SelfcareComponent },
      {path: 'apps' , component: SettingsAppsComponent },
      {path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent },
      {path: 'algemeen' , component: SettingsGeneralComponent },
      { path: 'algemeen', component: SettingsGeneralComponent },
      {path: 'log' , component: SettingsLogComponent },
     ]
   },

Thank you

Thank you. but then I get this error: Error: Invalid configuration of route '{path: "instellingen/", redirectTo: "account"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.
    at validateNode (router.js:554)
    at validateConfig (router.js:515)
    at validateNode (router.js:560)
    at validateConfig (router.js:515)
    at Router.push../node_modules/@angular/router/fesm5/router.js.Router.resetConfig (router.js:3546)
    at new Router (router.js:3427)
    at setupRouter (router.js:5385)
    at _callFactory (core.js:9291)
    at _createProviderInstance$1 (core.js:9237)
    at initNgModule (core.js:9170)

And this is how the navigation component looks like:

<nav class="nav-tab-bar">
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/account">Account</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/apparaten">Apparaten</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/apps">Apps</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/indicatiepermissies">Meldingen</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/algemeen">Gegevens toegang</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/log">Log</a>

</nav>
<router-outlet></router-outlet>

Upvotes: 0

Views: 981

Answers (1)

Bhavin
Bhavin

Reputation: 501

follow below changes

{
 path: 'instellingen',    
 component: SettingsNavigationComponent,
 canActivate: [AuthGuard],
 children: [
  { path: '', redirectTo: 'account', pathMatch: 'full' },
  { path: 'account', component: SettingsAccountComponent },
  { path: 'apparaten' , component: SelfcareComponent },
  { path: 'apparaten' , component: SelfcareComponent },
  { path: 'apps' , component: SettingsAppsComponent },
  { path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent },
  { path: 'algemeen' , component: SettingsGeneralComponent },
  { path: 'algemeen', component: SettingsGeneralComponent },
  { path: 'log' , component: SettingsLogComponent },
 ]
},

Upvotes: 3

Related Questions