Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Importing Module without routes

Tags:

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.

like image 486
VFein Avatar asked May 31 '17 12:05

VFein


People also ask

How do I load a component without routing?

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.

What is Loadchildren in Angular?

LoadChildrenlinkA function that returns a set of routes to load.

What is the lazy loading in Angular?

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.


2 Answers

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.

like image 139
rogermushroom Avatar answered Sep 29 '22 12:09

rogermushroom


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.

like image 21
chipro Avatar answered Sep 29 '22 13:09

chipro