Using router-outlet with angular elements - detect url change in Router

[zolekm]

How to use router outlet with angular elements

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Url change is not detected inside angular elements component when subscribe on changes using router

Expected behavior

Using router outlet url change should be detected. It will also be ok if we will be able to use something like named router outlet navigation /#/(namedOutlet:link) for navigation inside of angular elements component.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-elements-routing?file=main.ts

Scenario 1 - direct access - FAIL

1. https://angular-elements-routing.stackblitz.io/#/(namedOutlet:test)

Scenario 2 - access after initial route load - PASS

1. https://angular-elements-routing.stackblitz.io/#/
2. click on routerLink -> https://angular-elements-routing.stackblitz.io/#/(namedOutlet:test)

using this code:

    //on every route change tell router to navigate to defined route
    this.location.subscribe((data)=>{
      console.log("Data subscribe", data);
      this.router.navigateByUrl(data.url);
    });

    //using this router outlet is loaded normaly on init
    this.router.navigateByUrl(this.location.path(true));


    //event subscribe to detect route change inside angular
    this.router.events.subscribe((data)=>{
      console.log(data);
    });

i'm able to display requested route inside angular elements, but only on route change, on initial load there is no default route loaded

Without this code to force route load im also able to load component using routerLink directive on click

What is the motivation / use case for changing the behavior?

When we want to create more complex angular elements application and add url navigation inside small part of bigger web application.

Environment

Angular version: 6


 

[dougludlow]

Noticing the same thing with Angular Elements. The route is not loaded initially, but it loads fine with a routerLink.

The workaround mentioned above works great! Thanks @zolekm!

[fazil1987]

@zolekm I am just a starter in Angular and trying to understand this issue, so could you explain the problem with very simple example that helps people like me understand the issue.

Thanks in advance.

[Liero]

Me too in latest angular 8 version.

However, in my case I just had to call router.initialNavigation() which also calls setUpLocationChangeListener().

export class AppModule {
  constructor(
    private injector: Injector,
    private router: Router) {

    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('megadoc-exlab-ui', appElement);
  }

  public ngDoBootstrap(): void {

   /*  this.location.subscribe((data)=>{
      console.log("Data subscribe", data);
      this.router.navigateByUrl(data.url);
    });

    //using this router outlet is loaded normaly on init
    this.router.navigateByUrl(this.location.path(true)); */
    
    this.router.initialNavigation();
  }
}