title: Angular Element not resolving routes(?) in another angular project, instead only "<router-outlet></router-outlet>" is shown on Website
body: <p><strong>following starting point</strong>:</p>
  
  <p>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. </p>
  
  <p><strong>The problem</strong></p>
  
  <p>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.</p>
  
  <p><strong>Code</strong></p>
  
  <p><em>The Custom Element:</em></p>
  
  <p>app.module.ts:</p>
  
  <pre><code>        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);
        }
      }
  </code></pre>
  
  <p>app-routing.module.ts:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><em>The bring-it-together-project:</em>
  These are from the component which is supposed to handle this specific micro-service</p>
  
  <p>phone-contracts.component.html:</p>
  
  <pre><code>&lt;p&gt;
    phone-contracts works!
  &lt;/p&gt;
  
  &lt;phone-contracts&gt;
    &lt;app-phone-list&gt;
    &lt;/app-phone-list&gt;
  &lt;/phone-contracts&gt;
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>stuff that might matter?</strong></p>
  
  <ul>
  <li><p>We are using this as our "builder": "@angular-devkit/build-angular:browser",</p></li>
  <li><p>We think that the issue is that the custom element cant resolve the routing and therefore just shows nothing, could this be true?</p></li>
  </ul>