Angular가 Component를 두 번로드하는 것을 방지하려면 어떻게합니까?

Question

내 각뿔 앱이 구성 요소를 두 번로드하고 있습니다. 처음에, 나는 내 구성 요소의 템플릿 <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>을 추가했다. 하지만 이제 내 앱에서 내 구성 요소를 두 번로드하고 있습니다.

는

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'; 
} 

앱 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

을 app.component.ts AppComponent은 라우팅의 일부가 아니어야합니다. 그것은 부트 스트랩에 사용됩니다. 그것이 바로 오류입니다. 라우팅에 AppComponent을 추가하려고하지만 최상위 구성 요소이기 때문에 <router-outlet>이 없습니다.