I have a complex application in which I want to load a module as a child of lazy loaded modules.
For example, I would like the following path:
https://localhost:8080/ui/ examplemodule / new
examplemodule and new are each a module, each with its own routing.config file.
My app-routing.module.ts looks like this:
const routes: Routes = [
{
path: '',
component: ParentComponent,
canActivate: [LoginRequiredGuard],
children: [
{
path: '',
children: [
{
path: '',
component: HomeComponent,
},
{
path: 'examplemodule',
loadChildren: 'app/my-modules/example/example.module#ExampleModule',
canActivate: [LoginRequiredGuard],
},
{
// examplemodule2
},
{
// examplemodule3
},
{
path: 'new',
loadChildren: 'app/new/new.module#NewModule',
canActivate: [LoginRequiredGuard],
},
],
},
...
The new.routing.ts file of the NewModule looks like this:
const routes: Routes = [
{
path: '',
redirectTo: 'new',
pathMatch: 'full'
},
{
path: 'new',
component: NewViewComponent,
},
];
As I have made it currently, I get a "resource not found".
For example I wan't to have the following routes:
https://localhost:8080/ui/ examplemodule / new
https://localhost:8080/ui/ examplemodule2 / new
https://localhost:8080/ui/ examplemodule3 / new
What am I doing wrong? I hope I could explain it understandably..
I think you need to load the NewModule
from inside ExampleModule
So remove your new
path from the app module routing and add this bit to ExampleModule
's routing
const routes: Routes = [
{
path: '',
component: YourParentComponentForExampleModule,
children: [
{
path: '',
children: [
//All your other paths here
//...
{
path: 'new',
loadChildren: 'app/new/new.module#NewModule',
//canActivate: [LoginRequiredGuard], //You probably don't need it as it's already there on parent module
},
],
},
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.