角度-未捕获的错误：无法匹配任何“家”路线

Question

我知道这个问题已经在这个网站上被问过多次，但是答案仍然彼此不一致，而且没有一个答案能解决我的问题-我想我可以在这里提出我的问题。

错误报告：

Error: Cannot match any routes. URL Segment: 'home' 

routes.ts：

import { Routes } from '@angular/router';

import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';

export const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'menu',  component: MenuComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { routes } from './routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes, { enableTracing : true })
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

摘录自header.component.html：

<a mat-button routerLink="/home"><span class="fa fa-home fa-lg"></span> Home</a>

<a mat-button routerLink="/menu"><span class="fa fa-list fa-lg"></span> Menu</a>

这是我从在线练习（Coursera）复制的示例代码，并且这些代码在讲师的计算机上工作得很好。我不知道为什么。谁能帮我吗？

Answer 1

尝试编辑route.ts：

import { Routes } from '@angular/router';

import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';

export const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'menu',  component: MenuComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

Answer 2

您缺少简单的更改。像这样的更改

 { path: '', redirectTo: '/home', pathMatch: 'full' }

 to
  { path: '', redirectTo: 'home', pathMatch: 'full' }

还要确保您的index.html文件指向这样的 bass href 属性

<base href="/">

让我们尝试一次，让您知道。

更新：

我为您创建了Slackblitz工作示例。让我们尝试一下这一次路由的最佳方法。

路由：-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent  } from './home/home.component';
import { ErrorComponent } from './error/error.component';
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '**',
    component: ErrorComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent  } from './home/home.component';
import { ErrorComponent } from './error/error.component';

import { AppRoutingModule } from './app.routing';
@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent, HomeComponent,LoginComponent, ErrorComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

https://stackblitz.com/edit/angular-ce7ti3

输出：-

希望它能解决您的问题并为您提供帮助。

谢谢， Muthukumar