title: Why is <app-root> rendering another <app-root> within it, which contains my routed component?
body: <p>I have a lazy-loaded, multi-module Angular 7.2.2 application that seems to be creating a copy of the main <code>AppComponent</code>'s template within itself, then rendering the routed component within that.</p>
  
  <p>Here is my attempt at a complete but concise preamble (I can't reproduce this in a plunkr). Please do ask for any details I have missed.</p>
  
  <h1>The Preamble</h1>
  
  <p>I have an <code>index.html</code> file that contains ordinary HTML, and an <code>&lt;app-root&gt;</code> element within its <code>&lt;body&gt;</code>. This is the only place in the project that <code>app-root</code> tag appears. This file is referenced in <code>angular.json</code>'s <code>projects.app.architect.build.options.index</code> property.</p>
  
  <p>The main <code>AppComponent</code> is declared as</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    template: `
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;message-banner [show]="showMessage" [message]="message"&gt;&lt;/message-banner&gt;
    `,
    providers: [AuthenticationService, AuthenticationGuard, MessagingService]
  })
  </code></pre>
  
  <p>The rest of the logic in <code>AppComponent</code> simply mediates the <code>show</code> and <code>message</code> content for app-wide notifications. I have no router-outlet hooking and no direct DOM manipulation.</p>
  
  <p>My <code>main.ts</code> bootstraps the application as usual</p>
  
  <pre><code>import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  import { environment } from './environments/environment';
  
  import { hmrBootstrap } from './hmr';
  
  if (environment.production) {
    enableProdMode();
  }
  
  const bootstrap = () =&gt; platformBrowserDynamic().bootstrapModule(AppModule);
  
  if (environment.hmr &amp;&amp; module['hot']) {
    hmrBootstrap(module, bootstrap);
  }
  else {
    bootstrap().catch(err =&gt; console.log(err));
  }
  </code></pre>
  
  <p>From the following <code>AppModule</code></p>
  
  <pre><code>@NgModule({
    imports: [
      appRoutes,
      BrowserAnimationsModule,
      BrowserModule,
      CommonModule,
      FormsModule,
      HttpClientModule,
      HttpClientXsrfModule,
      ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
      SharedGenericModule
    ],
    declarations: [
      AppComponent,
      MessageBannerComponent
    ],
    providers: [
      { provide: APP_BASE_HREF, useValue: '/' },
      appRoutingProviders,
      ChoosePasswordGuard,
      LoadingBarService,
      Title,
      UserService
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    bootstrap: [AppComponent]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>Using these <code>app.routes</code> (small excerpt)</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      redirectTo: 'shop',
      pathMatch: 'full'
    },
    {
      path: '',
      component: AppComponent,
      children: [
        {
          path: 'shop',
          data: { key: 'shop' },
          loadChildren: "./modules/shop.module#ShopModule",
          pathMatch: 'full'
        },
        {
          path: 'car/:id',
          data: { key: 'car' },
          loadChildren: "./modules/car.module#CarModule",
          pathMatch: 'full'
        },
        {
          // This one has child routes, which I will add if needed
          path: 'workOrder',
          data: { key: 'workOrder' },
          loadChildren: "./modules/workOrder.module#WorkOrderModule",
        }
        // And many more
      ]
    }
  ]
  
  export const appRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {
    enableTracing: false,
    onSameUrlNavigation: 'reload'
  });
  </code></pre>
  
  <h1>The Problem</h1>
  
  <p>Once the application has stabilized, the resulting DOM looks like this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;app-root ng-version="7.2.2"&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
      &lt;app-root&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;default-routed-component _nghost-c0&gt;...&lt;/default-routed-component&gt;
        &lt;message-banner ng-reflect-show="true" ng-reflect-message="[object Object]"&gt;...&lt;/message-banner&gt;
      &lt;/app-root&gt;
  
      &lt;message-banner ng-reflect-show="true" ng-reflect-message="[object Object]"&gt;...&lt;/message-banner&gt;
  
    &lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Note that the inner <code>&lt;app-root&gt;</code> is not decorated with an <code>ng-version</code>.</p>
  
  <p>Also, I can only programmatically communicate with the inner <code>&lt;message-banner&gt;</code>, the outer one seems disconnected. But messages generated before the first route is loaded (before the application stabilizes) are sent to <em>both</em> instances of the message banner.</p>
  
  <h1>Questions</h1>
  
  <p>Why is my app instantiating two <code>&lt;app-root&gt;</code>s with two <code>&lt;router-outlets&gt;</code>, but only using one of them. How can I prevent it from doing so?</p>
  
  <p>I need to retain one app-wide <code>&lt;message-banner&gt;</code>, but I obviously want <strong>exactly one</strong>. Were it not for the duplication of that component, it might simply be an mysterious inconvenience - the app works perfectly well in all respects otherwise.</p>