0

我是Angular4的新手。

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

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

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

这就是应用程序的外观。

索引.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 { }

应用程序.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!';

}

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

4

2 回答 2

3

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

于 2017-11-30T10:28:42.073 回答
0

  1. 从 index.html移动<router-outlet> </router-outlet>到 app.component.html

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

于 2017-11-30T18:22:44.760 回答