Question

我是Angular4的新手。

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

例外：未捕获（承诺）：错误：无法找到主要插座加载＆＃39; AppComponent＆＃39;

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

这就是app的样子。

的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路由 - EXCEPTION：未捕获（承诺）：错误：无法找到要加载的主要插座＆＃39; AppComponent＆＃39;

2 个答案: