Mixing
Angular nested routing with lazy loading issue
0
I have an app on which I need only the sign in functionality to be available at startup, and all remaining code should be lazy loaded after user authenticates.
I've created a core.module with a core-routing.module and a core.component to handle this, but the child components (for example DashboardComponent) are being rendered inside router-outlet element on app.component.html and not at core.component.html and so the header is not being displayed.
I've already searched and a lot, but couldn't find how to have this working.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'signin', pathMatch: 'full' },
{ path: 'signin', component: SigninComponent },
{ path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'signin' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.html
<router-outlet></router-outlet>
core-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CoreRoutingModule { }
core.component.html
<div id="header">
<app-header></app-header>
</div>
<main id="content">
<router-outlet></router-outlet>
</main>
dashboard-routing.module.ts
const dashboardRoutes: Routes = [
{ path: '', component: DashboardComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
MaterialModule,
SharedModule,
RouterModule.forChild(dashboardRoutes)
],
angular angular-router
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
add a comment |
0
I have an app on which I need only the sign in functionality to be available at startup, and all remaining code should be lazy loaded after user authenticates.
I've created a core.module with a core-routing.module and a core.component to handle this, but the child components (for example DashboardComponent) are being rendered inside router-outlet element on app.component.html and not at core.component.html and so the header is not being displayed.
I've already searched and a lot, but couldn't find how to have this working.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'signin', pathMatch: 'full' },
{ path: 'signin', component: SigninComponent },
{ path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'signin' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.html
<router-outlet></router-outlet>
core-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CoreRoutingModule { }
core.component.html
<div id="header">
<app-header></app-header>
</div>
<main id="content">
<router-outlet></router-outlet>
</main>
dashboard-routing.module.ts
const dashboardRoutes: Routes = [
{ path: '', component: DashboardComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
MaterialModule,
SharedModule,
RouterModule.forChild(dashboardRoutes)
],
angular angular-router
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17
add a comment |
0
0
0
I have an app on which I need only the sign in functionality to be available at startup, and all remaining code should be lazy loaded after user authenticates.
I've created a core.module with a core-routing.module and a core.component to handle this, but the child components (for example DashboardComponent) are being rendered inside router-outlet element on app.component.html and not at core.component.html and so the header is not being displayed.
I've already searched and a lot, but couldn't find how to have this working.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'signin', pathMatch: 'full' },
{ path: 'signin', component: SigninComponent },
{ path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'signin' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.html
<router-outlet></router-outlet>
core-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CoreRoutingModule { }
core.component.html
<div id="header">
<app-header></app-header>
</div>
<main id="content">
<router-outlet></router-outlet>
</main>
dashboard-routing.module.ts
const dashboardRoutes: Routes = [
{ path: '', component: DashboardComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
MaterialModule,
SharedModule,
RouterModule.forChild(dashboardRoutes)
],
angular angular-router
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
I have an app on which I need only the sign in functionality to be available at startup, and all remaining code should be lazy loaded after user authenticates.
I've created a core.module with a core-routing.module and a core.component to handle this, but the child components (for example DashboardComponent) are being rendered inside router-outlet element on app.component.html and not at core.component.html and so the header is not being displayed.
I've already searched and a lot, but couldn't find how to have this working.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'signin', pathMatch: 'full' },
{ path: 'signin', component: SigninComponent },
{ path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'signin' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.html
<router-outlet></router-outlet>
core-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CoreRoutingModule { }
core.component.html
<div id="header">
<app-header></app-header>
</div>
<main id="content">
<router-outlet></router-outlet>
</main>
dashboard-routing.module.ts
const dashboardRoutes: Routes = [
{ path: '', component: DashboardComponent, pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
MaterialModule,
SharedModule,
RouterModule.forChild(dashboardRoutes)
],
angular angular-router
angular angular-router
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
asked Nov 22 '18 at 2:09
GCSDCGCSDC
545516
545516
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17
add a comment |
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17
add a comment |
2 Answers
2
active
oldest
votes
0
This is because of you have used 2 router outlets. so you have to name the routers to render component to correct one
<router-outlet name="secondRouterOutlet"></router-outlet>
{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}
this stackoverflow answer might be helped
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
add a comment |
0
After trying it on many different ways, what worked for me was changing core-routing.module.ts to have a single route and including the lazy loaded modules as children inside it:
const routes: Routes = [
{
path: '',
component: CoreComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
{ path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
{ path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
]
}
];
Hope this may help someone trying to implement the same functionality.
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422944%2fangular-nested-routing-with-lazy-loading-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
This is because of you have used 2 router outlets. so you have to name the routers to render component to correct one
<router-outlet name="secondRouterOutlet"></router-outlet>
{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}
this stackoverflow answer might be helped
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
add a comment |
0
This is because of you have used 2 router outlets. so you have to name the routers to render component to correct one
<router-outlet name="secondRouterOutlet"></router-outlet>
{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}
this stackoverflow answer might be helped
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
add a comment |
0
0
0
This is because of you have used 2 router outlets. so you have to name the routers to render component to correct one
<router-outlet name="secondRouterOutlet"></router-outlet>
{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}
this stackoverflow answer might be helped
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
This is because of you have used 2 router outlets. so you have to name the routers to render component to correct one
<router-outlet name="secondRouterOutlet"></router-outlet>
{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}
this stackoverflow answer might be helped
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
answered Nov 22 '18 at 3:48
AsankaAsanka
1,085416
1,085416
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
add a comment |
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
Thanks @Asanka. I've checked the answer you mentioned, and tried naming router-outlet and using outlet property on route configuration, but it does not solve the issue (the components aren't displayed). How should this be done with lazy loading?
– GCSDC
Nov 22 '18 at 4:09
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
try this stackoverflow.com/a/47487220/6706381
– Asanka
Nov 22 '18 at 4:21
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
thanks again, but still couldn't solve it!
– GCSDC
Nov 22 '18 at 15:13
add a comment |
0
After trying it on many different ways, what worked for me was changing core-routing.module.ts to have a single route and including the lazy loaded modules as children inside it:
const routes: Routes = [
{
path: '',
component: CoreComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
{ path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
{ path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
]
}
];
Hope this may help someone trying to implement the same functionality.
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
add a comment |
0
After trying it on many different ways, what worked for me was changing core-routing.module.ts to have a single route and including the lazy loaded modules as children inside it:
const routes: Routes = [
{
path: '',
component: CoreComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
{ path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
{ path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
]
}
];
Hope this may help someone trying to implement the same functionality.
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
add a comment |
0
0
0
After trying it on many different ways, what worked for me was changing core-routing.module.ts to have a single route and including the lazy loaded modules as children inside it:
const routes: Routes = [
{
path: '',
component: CoreComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
{ path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
{ path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
]
}
];
Hope this may help someone trying to implement the same functionality.
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
After trying it on many different ways, what worked for me was changing core-routing.module.ts to have a single route and including the lazy loaded modules as children inside it:
const routes: Routes = [
{
path: '',
component: CoreComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
{ path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
{ path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
{ path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
{ path: '**', redirectTo: 'dashboard' }
]
}
];
Hope this may help someone trying to implement the same functionality.
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
answered Nov 22 '18 at 16:22
GCSDCGCSDC
545516
545516
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422944%2fangular-nested-routing-with-lazy-loading-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This answer may help you. If you see my profile, you will see a large scale application on how routing modules work. Hope this helps. stackoverflow.com/questions/49621578/…
– harold_mean2
Nov 22 '18 at 2:22
@harold_mean2 thanks for the reply. I've checked the answer you mentioned but couldn't solve the issue based on it. The problem seems to be related with nesting lazy loaded paths.
– GCSDC
Nov 22 '18 at 2:32
Each module you import has its own <router-outlet></router-outlet>. You can extend these modules like a tree component. My answer works because that is how I implement my app. youtube.com/watch?v=z5lHNx640wY I hope you find your answer and good luck with your app.
– harold_mean2
Nov 22 '18 at 16:13
Thanks again, @harold_mean2 but this didn't work for me. Anyway, I finally got it working by using children on core-routing.module.ts and including the lazy loaded routes inside it. Will post this as answer.
– GCSDC
Nov 22 '18 at 16:17