I can not figure out why this scenario works and not the following one.
Scenario 1:
This loads the CasesModule component correctly for the module.
NavigationEnd(id: 2, url: '/cases', urlAfterRedirects: '/cases/current')
app-routing.modules.ts:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
{
path: "cases",
loadChildren: () => import("./cases/cases.module").then(m => m.CasesModule)
},
{ path: "**", redirectTo: "", pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
cases.routing.modules:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CurrentCasesComponent } from './current-cases/current-cases.component';
const routes: Routes = [
{ path: '', redirectTo: 'current', pathMatch: 'full' },
{
path: 'current',
component: CurrentCasesComponent,
},
];
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CasesRoutingModule {}
Scenario 2:
I want to load the module routes dynamically since I am importing the modules dynamically using SystemJs import.
The main difference are:
app-routing.modules.ts:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
// {
// path: "cases",
// loadChildren: () => import("./cases/cases.module").then(m => m.CasesModule)
// },
{ path: "**", redirectTo: "", pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
I would like to load the route with a component or service.
app.component.ts
import { Component, VERSION } from "@angular/core";
import { Route, Router } from "@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
constructor(private router: Router) {}
route() {
this.createRoute();
// test navigation
this.router.navigate(["cases"]);
}
createRoute() {
const appRoutes = [...this.router.config];
const route: Route = {
path: "cases",
loadChildren: () =>
import("./cases/cases.module").then(m => m.CasesModule)
};
appRoutes.push(route);
this.router.resetConfig(appRoutes);
}
}
app.component.html
<button (click)="route()">cases</button>
<app-shell></app-shell>
I can see the route is loaded correctly in the router config, but it doesn't create the _LoadedConfig when I invoke the route and redirect to the default page instead.
NavigationEnd {id: 2, url: "/cases", urlAfterRedirects: "/"}
Here is the link to an example reproducing the issue:
StackBlitz
What am I missing?