Hello i just want to know how many router-outlets i can use in angular, is there any limit?

if so how many?

Here is the link to understand "multiple outlet", for anyone who is not aware of this!

Thank You

Hello i just want to know how many router-outlets i can use in angular, is there any limit?

if so how many?

Here is the link to understand "multiple outlet", for anyone who is not aware of this!

https://medium./angular-in-depth/angular-router-series-secondary-outlets-primer-139206595e2

Thank You

• javascript
• angular
• frontend

• 1 there is no limit on the outlets, however every outlet corresponds to a piece of code, that will be rendered there, and it affects the url. With more code your app will be loaded longer and there are some restrictions on url length. apart from these 2 I don't think there is any limit – Andrei Commented Jan 7, 2021 at 13:29
• Lets say iam using two more outlets, how the URL would be displayed? Something like ‘localhost:4200/home(router2:p2)(router3:p3)? – Yerrapotu ManojKiran Commented Jan 7, 2021 at 13:42
• You cannot route this way like you have mentioned in your ment. For any parent or child ponents to be activated, you can make use of separate routes. Here's a kick starter: freakyjolly./… – Deepak Commented Jan 7, 2021 at 13:48
• We can, you can see here. medium./@natelapinski/…. Thanks for your answer and link – Yerrapotu ManojKiran Commented Jan 7, 2021 at 14:01
• 1 Thanks for letting me know @Yerrapotu. What I meant was you can specify more than 1 outlet in the route path specification a bit different as pared to normal routing. codeburst.io/… – Deepak Commented Jan 7, 2021 at 14:22

3 Answers 3

there is no limit on the outlets, however every outlet corresponds to a piece of code, that will be rendered there, and it affects the url. With more code your app will be loaded longer and there are some restrictions on url length. apart from these 2 I don't think there is any limit

If you want to use multiple <router-outlet></router-outlet> you can use it. There is no limit in angular but there are some best practices of using multiple place one in app.ponent.html and if you have a number of featured modules then you can use separate for each featured module.

====== app.ponent.html=====

<app-header></app-header>
<!-- router-outlet will emit an activate event any time a new ponent is being instantiated, and a deactivate event when it is being destroyed. -->
<!-- It will act as a placeholder that angular automatically fills the current route state-->
<router-outlet></router-outlet>
<app-footer></app-footer>

======= app-routing.ts =====

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' , canActivate : [AuthGuardService]},
  { path: 'dashboard',  ponent: DashboardComponent, canActivate : [AuthGuardService], data: {role: 'system'}},
  { path: 'featureModule', loadChildren: './module/featureModule.module#FeatureModule', canActivate : [AuthGuardService]},
  { path: '**', ponent: NotFoundComponent }
];

and in FeatureModule add saparate <router-outlet> so all ponents in featuredModule will get rendered in FeatureModuleComponent.html.

featureModuleComponent.Html

<app-menu [sysType]="featureModule"></app-menu>
<div class="bg-mage" [ngStyle]="{'background-image': backgroundImage, 'height': customImgHeight} ">
    <router-outlet></router-outlet> <!-- router outlet of featured module -->
</div>

is there any limit?

No, there is no specific limit.