Search code examples
angularroutesangular6angular-routingangular-module

Can an angular module have more than one routing module?


I want to create a condition based routing in my application. Like for one case follow one routing and for second case follow second routing module. is it Possible to do this? or angular modules are strictly one to one mapped with routing modules. I am guessing from the amount of information available on this, it is not possible so what is the best way to achieve the same results?

 <div *ngIf="ifRouting1">
    <router-outlet1></router-outlet1>
 </div>
<div *ngIf="!ifRouting1">
    <router-outlet2></router-outlet2>
</div>

Solution

  • It is possible but you have to name your router-outlet with the name attribute, not directly in the balise:

    <div *ngIf="ifRouting1">
        <router-outlet name='child1'></router-outlet>
     </div>
    <div *ngIf="!ifRouting1">
        <router-outlet name='child2'></router-outlet>
    </div>
    

    And you have to update your routing like that:

    {
        path: 'home',
        component: 'appComponent',
        children: [
            { path: '', component: childOneComponent, outlet: 'child1' },
            { path: '', component: childTwoComponent, outlet: 'child2' }
        ]
    }