Angular 4 路由 - 例外：未捕获（承诺）：错误：找不到加载“AppComponent”的主要出口答案

【问题标题】：Angular 4 routing - EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'Angular 4 路由 - 例外：未捕获（承诺）：错误：找不到加载“AppComponent”的主要出口
【发布时间】：2017-11-30 10:22:22
【问题描述】：

我是 Angular4 的新手。

当我尝试在 Angular4 中探索路由时，出现以下错误

异常：未捕获（承诺）：错误：找不到加载“AppComponent”的主要出口

我检查了要修复的链接数量，但没有任何用处。

这就是应用的样子。

index.html

<body>
  <app-root>Loading...</app-root>
  <router-outlet> </router-outlet>
</body>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {RouterModule, Routes  } from '@angular/router';

import { AppComponent } from './app.component';
import { CustomerComponent } from './component/customer/customer.component';
import {appRoutes} from './app.routes';

@NgModule({
 declarations: [
   AppComponent,
   CustomerComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes,{useHash:true})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.routes.ts

import {RouterModule, Routes } from '@angular/router';
import {AppComponent} from './app.component';
import {CustomerComponent} from './component/customer/customer.component';

export const appRoutes: Routes = [
 { path: '', component: AppComponent },
 { path: 'customer',      component: CustomerComponent },
 {
 path: 'heroes',
 component: AppComponent,
 data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: AppComponent }];

app.component.html

<h1> {{title}} </h1>
<a router-link="">Home</a>
<a router-link="customer">customer </a>

app.component.ts

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

}

这里缺少什么配置来实现路由？

【问题讨论】：

我认为router-outlet应该在app-root里面的主要组件中
另外 router-link 的用法应该类似于 [router-link]="['/link']" ，注意我将一个数组传递给 router-link
显示你的应用组件代码。 ?
@Muthukumar，已添加，请检查

标签： javascript jquery angular angular4-router

【解决方案1】：

请正确使用 routerlink 配置，如下所示。 <a [routerLink]="['/customer']">customer</a> 会生成链接 /customer/

【讨论】：

检查还是同样的问题

【解决方案2】：

将 <router-outlet> </router-outlet> 从 index.html 移动到 app.component.html
将 app.component.html 中的所有链接从 <a router-link="customer">customer </a> 更改为 <a routerLink="/customer">customer </a>

【讨论】：