Angular routes children do not hit

I am using the latest version of Angular. I am trying to define routes with children to follow adequate hierarchy.

I have app-routing.module.ts which has the following:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';



import { HomeRoutes } from './modules/home/home-routing.module';

import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';



const routes: Routes = [

  ...QuickReferenceRoutes,

  ...HomeRoutes

];



@NgModule({

  imports: [ RouterModule.forRoot(routes) ],

  exports: [ RouterModule ]

})

export class AppRoutingModule { }

The other files it calles for route are as following:

home-routing.module

import { Route } from '@angular/router';



import { HomeComponent } from './home.component';



export const HomeRoutes: Route = [

      { path: '', component: HomeComponent }

];

quick-reference-routing.module

import { Routes } from '@angular/router';



import { QuickRefComponent } from './quick-reference.component';

import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



export const QuickReferenceRoutes: Routes = [

    {

        path: 'quick-reference',

        component: QuickRefComponent,

        children: [

            { path: 'test', component: CombatQRFComponent }

        ]

    },

    {

        path: 'quick-reference/combat',

        component: CombatQRFComponent

    }

];

So after this setup quick-reference/combat loads CombatQRFComponent, but at quick-reference/test CombatQRFComponent does not load it. It loads QuickRefComponent instead. I tried to look for this problem, but I can't seem to find anyone with similar problem.

All tutorials say that if you config your routes like this, with children routes, the route quick-reference/test should load CombatQRFComponent. Instead it loads the component of the parent route.

Edit: Here is a link to the repo for better view of the whole structure: https://github.com/Panglot/DnD_app

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

can you post the error?
– alokstar
Oct 30 '18 at 19:34

There is no error at all. It just loads QuickRefComponent instead of CombatQRFComponent. No problems, no errors.
– SkyLordPanglot
Oct 30 '18 at 19:36

can you try adding '/test' to you child component path?
– alokstar
Oct 30 '18 at 19:37

If I add slash I get this error: "Invalid configuration of route 'quick-reference//test': path cannot start with a slash"
– SkyLordPanglot
Oct 30 '18 at 19:40

Here's a link to the repo for better view of the whole structure: github.com/Panglot/DnD_app
– SkyLordPanglot
Oct 30 '18 at 19:49

|
show 4 more comments

I am using the latest version of Angular. I am trying to define routes with children to follow adequate hierarchy.

I have app-routing.module.ts which has the following:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';



import { HomeRoutes } from './modules/home/home-routing.module';

import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';



const routes: Routes = [

  ...QuickReferenceRoutes,

  ...HomeRoutes

];



@NgModule({

  imports: [ RouterModule.forRoot(routes) ],

  exports: [ RouterModule ]

})

export class AppRoutingModule { }

The other files it calles for route are as following:

home-routing.module

import { Route } from '@angular/router';



import { HomeComponent } from './home.component';



export const HomeRoutes: Route = [

      { path: '', component: HomeComponent }

];

quick-reference-routing.module

import { Routes } from '@angular/router';



import { QuickRefComponent } from './quick-reference.component';

import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



export const QuickReferenceRoutes: Routes = [

    {

        path: 'quick-reference',

        component: QuickRefComponent,

        children: [

            { path: 'test', component: CombatQRFComponent }

        ]

    },

    {

        path: 'quick-reference/combat',

        component: CombatQRFComponent

    }

];

Edit: Here is a link to the repo for better view of the whole structure: https://github.com/Panglot/DnD_app

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

can you post the error?
– alokstar
Oct 30 '18 at 19:34

There is no error at all. It just loads QuickRefComponent instead of CombatQRFComponent. No problems, no errors.
– SkyLordPanglot
Oct 30 '18 at 19:36

can you try adding '/test' to you child component path?
– alokstar
Oct 30 '18 at 19:37

If I add slash I get this error: "Invalid configuration of route 'quick-reference//test': path cannot start with a slash"
– SkyLordPanglot
Oct 30 '18 at 19:40

Here's a link to the repo for better view of the whole structure: github.com/Panglot/DnD_app
– SkyLordPanglot
Oct 30 '18 at 19:49

|
show 4 more comments

I am using the latest version of Angular. I am trying to define routes with children to follow adequate hierarchy.

I have app-routing.module.ts which has the following:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';



import { HomeRoutes } from './modules/home/home-routing.module';

import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';



const routes: Routes = [

  ...QuickReferenceRoutes,

  ...HomeRoutes

];



@NgModule({

  imports: [ RouterModule.forRoot(routes) ],

  exports: [ RouterModule ]

})

export class AppRoutingModule { }

The other files it calles for route are as following:

home-routing.module

import { Route } from '@angular/router';



import { HomeComponent } from './home.component';



export const HomeRoutes: Route = [

      { path: '', component: HomeComponent }

];

quick-reference-routing.module

import { Routes } from '@angular/router';



import { QuickRefComponent } from './quick-reference.component';

import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



export const QuickReferenceRoutes: Routes = [

    {

        path: 'quick-reference',

        component: QuickRefComponent,

        children: [

            { path: 'test', component: CombatQRFComponent }

        ]

    },

    {

        path: 'quick-reference/combat',

        component: CombatQRFComponent

    }

];

Edit: Here is a link to the repo for better view of the whole structure: https://github.com/Panglot/DnD_app

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

I am using the latest version of Angular. I am trying to define routes with children to follow adequate hierarchy.

I have app-routing.module.ts which has the following:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';



import { HomeRoutes } from './modules/home/home-routing.module';

import { QuickReferenceRoutes } from './modules/quick-references/quick-reference-routing.module';



const routes: Routes = [

  ...QuickReferenceRoutes,

  ...HomeRoutes

];



@NgModule({

  imports: [ RouterModule.forRoot(routes) ],

  exports: [ RouterModule ]

})

export class AppRoutingModule { }

The other files it calles for route are as following:

home-routing.module

import { Route } from '@angular/router';



import { HomeComponent } from './home.component';



export const HomeRoutes: Route = [

      { path: '', component: HomeComponent }

];

quick-reference-routing.module

import { Routes } from '@angular/router';



import { QuickRefComponent } from './quick-reference.component';

import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



export const QuickReferenceRoutes: Routes = [

    {

        path: 'quick-reference',

        component: QuickRefComponent,

        children: [

            { path: 'test', component: CombatQRFComponent }

        ]

    },

    {

        path: 'quick-reference/combat',

        component: CombatQRFComponent

    }

];

Edit: Here is a link to the repo for better view of the whole structure: https://github.com/Panglot/DnD_app

angular routing children

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

edited Oct 30 '18 at 19:50

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

asked Oct 30 '18 at 19:31

SkyLordPanglot

134

can you post the error?
– alokstar
Oct 30 '18 at 19:34

There is no error at all. It just loads QuickRefComponent instead of CombatQRFComponent. No problems, no errors.
– SkyLordPanglot
Oct 30 '18 at 19:36

can you try adding '/test' to you child component path?
– alokstar
Oct 30 '18 at 19:37

If I add slash I get this error: "Invalid configuration of route 'quick-reference//test': path cannot start with a slash"
– SkyLordPanglot
Oct 30 '18 at 19:40

Here's a link to the repo for better view of the whole structure: github.com/Panglot/DnD_app
– SkyLordPanglot
Oct 30 '18 at 19:49

|
show 4 more comments

can you post the error?
– alokstar
Oct 30 '18 at 19:34

There is no error at all. It just loads QuickRefComponent instead of CombatQRFComponent. No problems, no errors.
– SkyLordPanglot
Oct 30 '18 at 19:36

can you try adding '/test' to you child component path?
– alokstar
Oct 30 '18 at 19:37

If I add slash I get this error: "Invalid configuration of route 'quick-reference//test': path cannot start with a slash"
– SkyLordPanglot
Oct 30 '18 at 19:40

Here's a link to the repo for better view of the whole structure: github.com/Panglot/DnD_app
– SkyLordPanglot
Oct 30 '18 at 19:49

can you post the error?
– alokstar
Oct 30 '18 at 19:34

There is no error at all. It just loads QuickRefComponent instead of CombatQRFComponent. No problems, no errors.
– SkyLordPanglot
Oct 30 '18 at 19:36

can you try adding '/test' to you child component path?
– alokstar
Oct 30 '18 at 19:37

If I add slash I get this error: "Invalid configuration of route 'quick-reference//test': path cannot start with a slash"
– SkyLordPanglot
Oct 30 '18 at 19:40

Here's a link to the repo for better view of the whole structure: github.com/Panglot/DnD_app
– SkyLordPanglot
Oct 30 '18 at 19:49

|
show 4 more comments

1 Answer
1

active

oldest

votes

try this

    import { Routes } from '@angular/router';



    import { QuickRefComponent } from './quick-reference.component';

    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



    export const QuickReferenceRoutes: Routes = [

        {

            path: 'quick-reference',

            children: [

                { path: '', component: QuickRefComponent}

                { path: 'test', component: CombatQRFComponent }

            ]

        },

        {

            path: 'quick-reference/combat',

            component: CombatQRFComponent

        }

    ];

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

add a comment |

protected by Community♦ Nov 19 '18 at 19:36

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

try this

    import { Routes } from '@angular/router';



    import { QuickRefComponent } from './quick-reference.component';

    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



    export const QuickReferenceRoutes: Routes = [

        {

            path: 'quick-reference',

            children: [

                { path: '', component: QuickRefComponent}

                { path: 'test', component: CombatQRFComponent }

            ]

        },

        {

            path: 'quick-reference/combat',

            component: CombatQRFComponent

        }

    ];

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

add a comment |

try this

    import { Routes } from '@angular/router';



    import { QuickRefComponent } from './quick-reference.component';

    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



    export const QuickReferenceRoutes: Routes = [

        {

            path: 'quick-reference',

            children: [

                { path: '', component: QuickRefComponent}

                { path: 'test', component: CombatQRFComponent }

            ]

        },

        {

            path: 'quick-reference/combat',

            component: CombatQRFComponent

        }

    ];

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

add a comment |

try this

    import { Routes } from '@angular/router';



    import { QuickRefComponent } from './quick-reference.component';

    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



    export const QuickReferenceRoutes: Routes = [

        {

            path: 'quick-reference',

            children: [

                { path: '', component: QuickRefComponent}

                { path: 'test', component: CombatQRFComponent }

            ]

        },

        {

            path: 'quick-reference/combat',

            component: CombatQRFComponent

        }

    ];

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

try this

    import { Routes } from '@angular/router';



    import { QuickRefComponent } from './quick-reference.component';

    import { CombatQRFComponent } from './combat-quick-reference/combat-qrf.component';



    export const QuickReferenceRoutes: Routes = [

        {

            path: 'quick-reference',

            children: [

                { path: '', component: QuickRefComponent}

                { path: 'test', component: CombatQRFComponent }

            ]

        },

        {

            path: 'quick-reference/combat',

            component: CombatQRFComponent

        }

    ];

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

answered Oct 30 '18 at 19:53

Artyom Amiryan

1,835113

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

add a comment |

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

Yes this works. Thanks a lot!
– SkyLordPanglot
Oct 30 '18 at 19:57

glad to help, then you can mark it as accepted answer
– Artyom Amiryan
Oct 30 '18 at 20:08

add a comment |

protected by Community♦ Nov 19 '18 at 19:36

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu