Stack Overflow
Stack Overflow

Questions tagged [router-outlet]

Use it for questions about the angular 2 or 4 router-outlet element.

The router-outlet is part of the routing-system of angular 2 and above. Depending on the navigated route, a specific component can be displayd in a router-outlet.

Multiple <router-outlet/>-tags are possible in one component if you name at least all but 1 of them. Nested router-outlets working together with the child-property of routing-objects in the route-config of a NgModule

See also: https://angular.io/api/router/RouterOutlet

308 questions
24
votes
5 answers

Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet

Here is the issue that I'm encountering with Angular 7 : I have two outlets : the main app router outlet, and a secondary outlet named 'administration'. When I want to navigate through any administration link at start, it works fine. But next time,…
Anthony Coucke
  • 251
  • 1
  • 2
  • 5
20
votes
2 answers

Why does Angular 2 render app component template twice

I want to display common header and footer throughout my app. But when I try to do it, it gets displayed twice :- app.component.html
Header
Footer
app.component.ts import…
Stacy J
  • 2,721
  • 15
  • 58
  • 92
11
votes
1 answer

Angular 5 Cannot match any routes on named outlet of lazy loaded module

My Route of the Root Module is like this: RouterModule.forRoot([ { path: '', redirectTo: 'management-portal', pathMatch: 'full' }, { path: 'management-portal', loadChildren:…
LittleNewb
  • 153
  • 2
  • 2
  • 10
11
votes
1 answer

pass data through using component interaction in angular2

I'm trying to use this technique intercept input property changes with a setter to pass some data from a parent component to a child component and call a method in child component when the value is changed. my problem is the child component is…
Bahman Rouhani
  • 1,139
  • 2
  • 14
  • 33
11
votes
2 answers

Angular 2 Router - named router-outlet navigation from code

Using @angular/router": "3.4.7". Proposed solution here doesn't work anymore. /** The ProductComponent depending on the url displays one of two info components rendered in a named outlet called 'productOutlet'. */ …
Mandark
  • 798
  • 1
  • 12
  • 33
9
votes
4 answers

'router-outlet' is not a known element in angular 6

I get the following error on a fresh install of angular6 using the angular-cli. Uncaught Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this…
Terje Nesthus
  • 810
  • 3
  • 12
  • 30
9
votes
2 answers

Angular, how to block the keyboard interaction with the parent component

The environment I have a big component tree on my angular application with multiples routes outlet to display specific component on each level. the deepest level is a modal that manages certain info. The Problem I can block the interaction through…
Ricardo
  • 2,427
  • 19
  • 35
9
votes
1 answer

Using nested router-outlets in angular 4

Im using multiple router-oulets to load my components. The outer router-outlet is used load most basic components like login, home, 404. I used nested router-outlet to load sub components of home page. That router-outlet is nested inside the…
LSampath
  • 138
  • 1
  • 3
  • 11
9
votes
1 answer

Angular : Relative navigation on a named router outlet

I have the following Angular Route configuration const appRoutes: Routes = [ { path: '', component: DirectoryComponent }, { path: 'manage/:type/:id', component: ManageComponent, outlet: 'manage', …
Radouane ROUFID
  • 10,595
  • 9
  • 42
  • 80
8
votes
1 answer

Angular 5 child route getting loaded at root Level router-outlet when using loadchildren in routing

I have a root app component with a router-outlet, and the routes are loaded from a home module routes which uses lazy loading with loadchildren in its children routes. There is a router-outlet in the home component and also there is router-outlets…
crystalthinker
  • 1,200
  • 15
  • 30
8
votes
2 answers

flex layout (flexbox) with angular router outlet

I am trying to place 2 elements next to each other where one is takes 25% of the screen and the other is an angular router outlet which takes up the rest of the container. Using the following ends up with both elements on either side of the screen…
dinamix
  • 651
  • 8
  • 22
7
votes
1 answer

Multiple named router-outlet - component imported but not initialized and rendered

I'm using multiple named angular 8 router-outlet in a web app. All the routerLink seems to work as it changes the URL but components in my 2nd router-outlet are imported but not initialized nor rendered. I made a Stackblitz available here :…
Adrien Martinet
  • 113
  • 11
7
votes
2 answers

Angular routing with multiple routes and router-outlet

I'm trying to add navigation to components in addition to the navigation of the app root, but it is not navigating to component route. I'm using two router-outlet: router outlet for the app root (app.component.html) router outlet for users…
Israel
  • 445
  • 2
  • 5
  • 15
7
votes
2 answers

Angular 6 - multiple router outlets

I want to have an Enter-comp. as overview and basically two child-comp. For instance a login- and register-comp. Furthermore I want to manage this with multiple router outlets. But "of course" it doesnt work yet. It keeps me throwing: Error: Cannot…
MarcoLe
  • 2,309
  • 6
  • 36
  • 74
7
votes
0 answers

Angular redirectTo named router-outlet

For SEO and legacy external links going to our site we need to provide fallback routes for deprecated urls. Things get tricky with named outlets. Trying to find the right settings now for specifying routes for redirection to updated named…
Markus
  • 1,069
  • 8
  • 26
1
2 3
…
20 21