I have a situation where our main app lazily loads other modules:
//main NgModule RouterModule.forRoot( [ {path:'profile', loadChildren:'path/to/profile.module#ProfileModule}, {path:'classroom', loadChildren:'path/to/classroom.module#ClassroomModule}, {path:'tests', loadChildren:'path/to/test.module#TestsModule} ])
Now the profile module has a few components in it that are necessary for the Classroom module.
//Profile NgModule RouterModule.forChild( [ {path:'', component:ProfileComponent, ]) //Classroom NgModule imports: [ ProfileModule, RouterModule.forChild( [ {path:'', component:ClassroomComponent} //this requires a component in ProfileModule ]) ]
This compiles nicely but when I try to navigate to '/classroom' all I get is the ProfileComponent
I suppose this is because the ProfileModules route configuration is being combined with the ClassroomModule route configuration. Is there a way I could prevent this from happening? I'd prefer not having to remove all of the shared components from ProfileModule and putting them into a new shared module if possible.
define where we want to load our component in the template with the ng-template tag, define its view query through ViewChild decorator, which gives us access to the DOM and defines the container to which the component will be added, finally, dynamic import the component and add it to the container.
LoadChildrenlinkA function that returns a set of routes to load.
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.
The best way I found to do this was to create a Module which does all the declarations of the original module but without importing the routing.
<Module Name>WithoutRouting.ts
I then create anther module
<Module Name>.ts
Where I import the routing and the <Module Name>WithoutRouting.ts
module.
Then when I want to use the module with routing, for example when lazy loaded I use <Module Name>.ts
and if I want to import the Module directly I use <Module Name>WithoutRouting.ts
.
I have encountered a similar issue. All I found is that if you put a module already combined with a RouterModule before the current module's routing module, it will just use the imported module's routing if any path matches the pattern. So make sure your routing module is imported at the very beginning, just after CommonModule maybe, it'll be safer.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With