When utilizing custom ngDoBootstrap and createCustomElement in Angular, the router fails to recognize the URL being used

Question

When utilizing custom ngDoBootstrap and createCustomElement in Angular, the router fails to recognize the URL being used

WHEN I implement a custom ngDoBootstrap function instead of the default bootstrap: [AppComponent] like shown below:

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  exports: [ AppComponent ],
  entryComponents: [ AppComponent ],
  // bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  public ngDoBootstrap(): any {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);
  }
}

THEN The application routing experiences issues.

It fails to respond to changes in the URL and only functions correctly when clicking on <a [routerLink]='...'>. Additionally, the initial route / is not loaded as expected.

This issue seems to stem from the custom bootstrap mechanism, as uncommenting the bootstrap: [AppComponent] resolves the problem.

You can access the full code here: stackblitz sample (requires downloading and running locally due to the TypeScript version used by stackblitz)

Any suggestions on how to ensure proper routing with a custom app module bootstrapping?

angular typescript angular8 angular-router custom-element

Answer 1

Answer №1

After following a helpful tutorial, I was able to successfully implement the functionality I needed in my Angular application. The tutorial can be found here.

I discovered that angular elements may not fully support internal application routing, as mentioned in this SO post and this Github issue.

To address this limitation, I had to manually guide the router to navigate to internal routes when there are changes in the location.

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
   customElements.define('my-app', appElement);

    /**Include the code snippet below in your implementation**/
   //initiate router with starting path
    this.router.navigateByUrl(this.location.path(true));

    //on every route change, instruct the router to move to the specified route
    this.location.subscribe(data => {
      this.router.navigateByUrl(data.url);
    });

}

You can view a functional example on stackblitz here

Answer 2

After following a helpful tutorial, I was able to successfully implement the functionality I needed in my Angular application. The tutorial can be found here.

I discovered that angular elements may not fully support internal application routing, as mentioned in this SO post and this Github issue.

To address this limitation, I had to manually guide the router to navigate to internal routes when there are changes in the location.

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
   customElements.define('my-app', appElement);

    /**Include the code snippet below in your implementation**/
   //initiate router with starting path
    this.router.navigateByUrl(this.location.path(true));

    //on every route change, instruct the router to move to the specified route
    this.location.subscribe(data => {
      this.router.navigateByUrl(data.url);
    });

}

You can view a functional example on stackblitz here

Answer 3

Answer №2

When using a custom element, the router.initialNavigation method needed to be manually invoked:

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);


  public ngDoBootstrap(): void {
    // To address an issue where initial route was not being loaded: https://github.com/angular/angular/issues/23740
    this.router.initialNavigation();
  }
}

Answer 4

When using a custom element, the router.initialNavigation method needed to be manually invoked:

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);


  public ngDoBootstrap(): void {
    // To address an issue where initial route was not being loaded: https://github.com/angular/angular/issues/23740
    this.router.initialNavigation();
  }
}

When utilizing custom ngDoBootstrap and createCustomElement in Angular, the router fails to recognize the URL being used

Answer №1

Answer №2

Similar questions

Build a Node.js application using TypeScript and all necessary dependencies

When the imagepath in an Angular application is not updated, it will revert to null

Custom Typescript type that runs concurrently with the base type is disregarded

Determining the type of index to use for an interface

Best practices for maintaining editable ag-grid cells

Leveraging Window Object in Custom Hooks with NextJS

What is the best way to assign three different dates in my protractor test?

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

Integrating additional JavaScript into an Ionic 2 project

What causes certain webpack / Babel ES6 imports without a specified extension to resolve as "undefined"?

The use of throwError(error) has been phased out, however, no replacement has been introduced for the Error(HttpErrorResponse)

What is the rationale behind permitting surplus properties in Typescript interfaces even though all properties are declared as optional?

Using TypeScript's Non-Null Assertion Operators in combination with square brackets []

Identifying patterns within a string using JavaScript and TypeScript

Automatically insert a hyphen (-) between each set of 10 digits in a phone number as it is being typed into the text

Encountering a compilation error due to a Typescript assignment

How to deliver various static files in NestJS using different paths and prefixes?

Error: JSON parsing error - Unexpected token at the start of the JSON data when using JSON.parse() function

Loading custom components dynamically in Angular with SVG: a how-to guide

Tips on verifying the binding of a mat-checkbox in Angular