Friday, 19 August 2022

Angular routing issue when 1 module is imported in another module

 module A

const routes: Routes = [

    {

        path: '',

        children: [

            {

                path: 'active',

                component: ActiveComponent,

            },

            {

                path: '',

                pathMatch: 'full',

                redirectTo: 'active',

            },

        ],

    },

];

@NgModule

...

imports: [

moduleB

]



module B

const routes: Routes = [

    {

        path: 'moduleBPath',


        children: [

            {

                path: '',

                component: ModuleBComponent,

            },


        ],

    },

];


App module :

const routes: Routes = [

    {

        path: '',

        children: [

               {

                path: 'mainPath',

                loadChildren: () =>

                    import('@module_A_Path').then(

                        (mod) => mod.ModuleAModule

                    ),

            },

            {

                path: 'mainPath/moduleBPath',

                loadChildren: () =>

                    import(

                        '@module_B_path'

                    ).then((mod) => mod.ModuleBModule),

            },


    ]



The above will ensure /mainPath hits moduleA, then loads /mainPath/active route in module A's ActiveComponent

Then /mainPath/moduleBPath will hit moduleB and loads moduleB's ModuleBComponent





No comments:

Post a Comment