Angular Element not resolving routes(?) in another angular project, instead only "<router-outlet></router-outlet>" is shown on Website

Question

following starting point:

We have a few angular frontend micro-services, and now we want to bring them together in one app. We are trying the Angular-Elements approach and we have exported one of the microservices which yielded a huge JS-file.

The problem

When we included the angular element in the "bring it together"-project, simply the "router-outlet" tag is in the dom, but no html is rendered.

Code

The Custom Element:

app.module.ts:

        import {NgModule, Injector} from '@angular/core';

    import {AppRoutingModule} from './app-routing.module';
    import {AppComponent} from './app.component';

    import {PhoneModule} from "./features/phone/phone.module";
    import {createCustomElement} from '@angular/elements';
    import {Router} from '@angular/router';

    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        AppRoutingModule,
        PhoneModule,
      ],
      entryComponents: [AppComponent],
    })
    export class AppModule {

      constructor(private injector: Injector, private router: Router) {
        this.router = router;
      }

      ngOnInit() {
        this.router.initialNavigation();
      }

      ngDoBootstrap() {
        const customElement = createCustomElement(AppComponent, {injector: this.injector});
        customElements.define('phone-contracts', customElement);
      }
    }

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PhoneListComponent } from './features/phone/phone-list/phone-list.component';
import {PhoneContractDetailsComponent} from "./features/phone/phone-contract-details/phone-contract-details.component";

const routes: Routes = [
    { path: '', redirectTo: 'phone-list', pathMatch: 'full' },
    { path: '', component: PhoneListComponent,},
    { path: 'phone-list/:id', component: PhoneContractDetailsComponent },
    { path: '**', redirectTo: '/phone-list', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The bring-it-together-project: These are from the component which is supposed to handle this specific micro-service

phone-contracts.component.html:

<p>
  phone-contracts works!
</p>

<phone-contracts>
  <app-phone-list>
  </app-phone-list>
</phone-contracts>

app.module.ts:

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { FooComponent } from './foo/foo.component';
import { HttpClientModule } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import { AppRoutingModule } from './app-routing.module';
import { AppService } from './app.service';
import { PhoneContractsComponent } from './phone-contracts/phone-contracts.component';
import { DeviceListComponent } from './device-list/device-list.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    FooComponent,
    PhoneContractsComponent,
    DeviceListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [CookieService,AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

stuff that might matter?

• We are using this as our "builder": "@angular-devkit/build-angular:browser",

• We think that the issue is that the custom element cant resolve the routing and therefore just shows nothing, could this be true?

Lorelle

I'm also having kind of similar issue. Routing is not happening in my custom element. Very simple element. There are only two components in single custom element. Do you have any idea how to enable route in custom element? – Maleficence

I couldn't imagine how these could shape together. Where do you put the <router-outlet>? I guess it is inside the AppComponent itself and because it is a custom component then you have the problem. Would you mind to create an example in stackblitz with the that reproduce the issue. – Treasurer

I'd wager custom elements wasn't designed to work well with routing. Same as @trungk18 I'm having difficulty wrapping my head around it. – Pomp

@Lorelle did the solution given from Maximillion Bartango work for you? – Sobranje

@trungk18 I am also facing same issue did any one find the solution? that would be great – Is

Answer 1

This is what your Routes list should look like:

const routes: Routes = [
    { 
        path: 'phone-list',
        component: PhoneListComponent
    },
    { 
        path: 'phone-list/:id',
        component: PhoneContractDetailsComponent 
    },
    { 
        path: '**', 
        redirectTo: 'phone-list', 
        pathMatch: 'full'
    }
];

In addition to that, you haven't actually specified where your router-outlet element is present.. if it's displaying it as html then chances are you haven't closed it's parent tag and/or it's not being used on an Angular component.

Dissected