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

Question

我是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!';

}

这里缺少什么配置才能使路由生效？

Answer 1

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

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
3 2017-11-30 10:28:42

解决方案2
0 2017-11-30 18:22:44

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

问题描述

2 个解决方案

解决方案1 3 2017-11-30 10:28:42

解决方案2 0 2017-11-30 18:22:44

解决方案1
3 2017-11-30 10:28:42

解决方案2
0 2017-11-30 18:22:44