Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

Question

我更改了我的路由，以便我的主页是应用程序组件，现在我收到此错误：

Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

关于这可能是什么有什么想法吗？

我的路线：

import {Routes} from "@angular/router";
import {PatientComponent} from "./patient/patient.component";
import {AppComponent} from "./app.component";



export const routes: Routes = [
  {path: '', component: AppComponent},
  {path: 'patient/:id', component: PatientComponent},

];

我的应用组件：

import {Component, OnInit} from '@angular/core';
import {AfdelingService} from './afdeling.service';
import {PatientService} from './patient.service';
import 'rxjs/Rx';
import {Router} from "@angular/router";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AfdelingService, PatientService]
})
export class AppComponent implements OnInit {
  errorMessage: string;
  afdeling = [];

  constructor(private afdelingService: AfdelingService, private router: Router) {
  }

  ngOnInit() {
    this.getData()
  }

  goToAfdeling(afdeling) {
    console.log(afdeling.afdelingsNaam);
    this.router.navigate(["/afdelingen", afdeling.afdelingsNaam]);
  }

  getData() {
    this.afdelingService.getAfdelingen()
      .subscribe(
        data => {
          this.afdeling = data;
          console.log(this.afdeling);
        }, error => this.errorMessage = <any> error);


  }
}

Answer 1

AppComponent 应该不是路由组件。相反，它应该只是您应用程序的入口点。这意味着，模板至少应在其中的某些部分包含 router outlet，应用程序组件的 css 选择器应在您的 index.html 文件中，而 AppComponent 应为在你 AppModule 的 bootstrap 列表中声明。

有关详细信息，请参阅

Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

routes

angular2-routing

angular