Angularによるコンポーネントの読み込みが2回行われないようにするにはどうすればよいですか？

Question

My Angularアプリはコンポーネントを2回ロードしています。当初、私は私のコンポーネントのテンプレートで<router-outlet></router-outlet>を持っていたし、それがうまく働いていたが、それでも私にこれらのエラーを与えていた。

core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent' 
core.umd.js:3262 ORIGINAL STACKTRACE: 
core.umd.js:3263 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent' 
zone.js:355 Unhandled Promise rejection: Cannot find primary outlet to load 'AppComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'AppComponent'(…) Error: Cannot find primary outlet to load 'AppComponent' 
zone.js:357 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent' 

これらのエラーを解決するために、私は私のテンプレートに<router-outlet></router-outlet>を追加しました。しかし今、私のアプリはコンポーネントを2回ロードしています。

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
moduleId: module.id 
    selector:'body', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 

export class AppComponent { 
    title = 'Doctor Application'; 
} 

APP-routing.module.ts

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './app.component'; 

const routes: Routes = [ 
    { path: '', component: AppComponent }, 
]; 

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

export class AppRoutingModule {} 

app.component.html

<h1>{{title}}</h1> 
<router-outlet></router-outlet> 

Answer 1

AppComponentはルーティングの一部であってはなりません。これはブートストラップに使用されます。それがエラーの原因です。ルーティングにAppComponentを追加しようとしていますが、最上位のコンポーネントであるため、<router-outlet>はありません。