CODEWITHSUNDEEP
angularangular-routingangular-router
Malik Rizwan
Malik Rizwan

Reputation: 787

Angular Route LazyLoading match the route prefix to load children

I am trying to do lazyloading for different modules and i am trying to match route prefix to load module. But it is not working, it works for exact url but not for prefix. i am using angular 6.1.

this code does't work

{
    path: 'account',
    component: AuthComponent,
    children: [
        {
            path: '',
            loadChildren: './modules/auth/auth.module#AuthModule'
        }
        {
            path: '**',
            loadChildren: './modules/auth/auth.module#AuthModule'
        }
    ]
},

and this code works fine

{
    path: 'account',
    component: AuthComponent,
    children: [
        {
            path: '',
            loadChildren: './modules/auth/auth.module#AuthModule'
        },
        {
            path: 'login',
            loadChildren: './modules/auth/auth.module#AuthModule'
        },
        {
            path: 'register',
            loadChildren: './modules/auth/auth.module#AuthModule'
        },
        {
            path: '**',
            loadChildren: './modules/auth/auth.module#AuthModule'
        }
    ]
},

Do i have to map each route for loading module?

These are the routes i have in my module i am trying to load.

const routes = [
{
    path: '',
    component: LoginComponent,
    data: {
        title: 'login'
    }
},
{
    path: 'login',
    component: LoginComponent,
    data: {
        title: 'login'
    }
},
{
    path: 'register',
    component: RegisterComponent,
    data: {
        title: 'register'
    }
},
{
    path: 'admin/login',
    component: LoginComponent,
    data: {
        title: 'Admin login'
    }
}
 ];

Thanks in advance.

Upvotes: 0

Views: 1002

Answers (1)

RoadEx
RoadEx

Reputation: 541

Try like this :

MainModule

{
    path: 'account', loadChildren: './modules/auth/auth.module#AuthModule'
},

AuthModuleRouting

const routes = [
{
    path: '', component: AuthComponent,
},
{
    path: 'login',
    component: LoginComponent,
    data: {
        title: 'login'
    }
},
{
    path: 'register',
    component: RegisterComponent,
    data: {
        title: 'register'
    }
},
{
    path: 'admin/login',
    component: LoginComponent,
    data: {
        title: 'Admin login'
    }
}
 ];

Upvotes: 1

Related Questions