Nested Router-outlet with angular-elements | Angular Community | Page 1

sacred vigil Dec 21, 2022, 4:16 PM

#

Hi everyone,
Do you know if it is possible to have a named router-outlet in a component that is loaded by primary router-outlet ? My problem is that if I pass the named router-outlet routes configuration in the children section it is working properly but I also use my "subcomponent" (the one hosting the named outlet) with @angular/elements and I need to be able to navigate on my named outlet routes without activating the primary level.

thin owl Dec 23, 2022, 12:33 PM

#

Yes, it is possible to have a named router-outlet in a component that is loaded by the primary router-outlet. You can configure the named router-outlet routes in the children section of the primary router-outlet's configuration, as you mentioned.

Here is an example of how you can set up the routing configuration for a named router-outlet:

const routes: Routes = [
  {
    path: '',
    component: PrimaryComponent,
    children: [
      {
        path: '',
        component: Subcomponent,
        outlet: 'namedOutlet',
        children: [
          {
            path: 'route1',
            component: Route1Component
          },
          {
            path: 'route2',
            component: Route2Component
          }
        ]
      }
    ]
  }
];

In this example, the PrimaryComponent has a named router-outlet called namedOutlet, and the Subcomponent is loaded into the namedOutlet. The Route1Component and Route2Component are then loaded into the namedOutlet based on the active route.

To navigate to a route in the named router-outlet, you can use the router.navigate method and specify the outlet name in the commands array, like this:

this.router.navigate(['route1'], {outlets: {namedOutlet: ['route1']}});

This will navigate to the Route1Component in the namedOutlet.

sacred vigil Dec 23, 2022, 3:06 PM

#

Yes I found this solution and it's working well.
My problem comes when I use angular/elements to expose the SubComponent for another non-angular application. I can't get the named router-outlet populated since the primary routing level is never displayed (of course, I don't have any primary router-outlet if I only display the SubComponent). That's why I would like to declare the routes at the same level than the primary, and not as children of the primary routing level. But this is working only if the named router-outlet is next to the primary.

thin owl Dec 23, 2022, 3:10 PM

#

To use a named router outlet in a component that is loaded by the primary router outlet, you can use the Router.createUrlTree method to create a URL tree that targets the named outlet. You can then navigate to this URL tree using the Router.navigate method.

Here's an example of how you can do this:

import { Router } from '@angular/router';

// Inject the Router service into your component
constructor(private router: Router) {}

navigateToNamedOutlet() {
  // Create a URL tree that targets the named outlet
  const urlTree = this.router.createUrlTree([{ outlets: { namedOutlet: ['route'] } }]);

  // Navigate to the URL tree
  this.router.navigate(urlTree);
}

This will navigate to the route in the named outlet without activating the primary routing level. You can use this approach to navigate to routes in the named outlet from any component, including components that are loaded by the primary router outlet.

sacred vigil Dec 23, 2022, 3:12 PM

#

Thank you, i'll try this and keep you in touch !

sacred vigil Dec 23, 2022, 4:43 PM

#

const routes: Routes = [
  { path: 'aa', component: AContainerComponent },
  { path: 'bb', component: BContainerComponent },
  { path: 'lista', component: ListAComponent, outlet: 'a' }
];

#

my AContainerComponent :

<div class="container" style="background: blue">
    <h1>I am the listA container</h1>
    <router-outlet name="a"></router-outlet>
</div>

#

and my AContainerComponent

export class AContainerComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    const urlTree = this.router.createUrlTree(['', { outlets: { a: ['lista'] } }]);
    this.router.navigate([urlTree]);
  }

}

#

but the named router-outlet "a" is not populated (even if it to the appcomponent at the same level than the primary outlet)

#

I also had to replace :

this.router.navigate(urlTree);
// by
this.router.navigate([urlTree]);

#

I also tried to remove the first blank string in the createUrlTree call, same result. No error in the console.

#

and if I call

this.router.navigate([{ outlets: { a: ['lista'] } }]);

the named router at the appcomponent level is populated
the named router at the AContainerComponent level is NOT populated

thin owl Dec 23, 2022, 6:10 PM

#

It looks like the issue might be with the way you are calling navigate in your ngOnInit method.

When you call navigate with a URL tree, you should pass the tree as the first argument. Instead, you are passing it as the second argument within an array.

Try changing your ngOnInit method to this:

ngOnInit(): void {
  const urlTree = this.router.createUrlTree(['', { outlets: { a: ['lista'] } }]);
  this.router.navigate(urlTree);
}

This should correctly navigate to the lista route within the a outlet.

If you still see issues after this change, it might be helpful to log the value of urlTree to see what is being passed to navigate. You can also try using the router.events observable to log any routing events that might give you more information about what is happening during the navigation process.

#Nested Router-outlet with angular-elements