Question

我刚刚建立了一个新的Angular项目，并在我的AppRouting模块中添加了两个组件路线。

尝试访问路由时出现以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'cr-calculator'
Error: Cannot match any routes. URL Segment: 'cr-calculator'
    at ApplyRedirects.noMatchError (router.js:4396)
    at CatchSubscriber.selector (router.js:4360)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

由于某些原因，路由器出口对我也不起作用，即使我的路由组件中有一些内容，它也显示为空白。

这是我的app-routing.module.ts：

import { CrCalculatorPageComponent } from './../pages/cr-calculator-page/cr-calculator-page.component';
import { HomePageComponent } from './../pages/home-page/home-page.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

export const routes: Routes = [
  {
    path: '',
    data: {
      linkName: 'Home',
      showInMenu: true,
      animation: 'HomePage'
    },
    component: HomePageComponent
  },
  {
    path: 'cr-calculator',
    data: {
      linkName: 'CR Calculator',
      showInMenu: true,
      animation: 'CrCalculator'
    },
    component: CrCalculatorPageComponent
  }
];

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

...这是我的app.module.ts：

import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomePageComponent } from './pages/home-page/home-page.component';
import { CrCalculatorPageComponent } from './pages/cr-calculator-page/cr-calculator-page.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavMenuComponent,
    HomePageComponent,
    CrCalculatorPageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我对代码进行了多次检查，但未找到任何内容。我也已经在这里签出了一些已回答的问题，但是没有任何帮助我解决问题的方法。

预先感谢，如果您需要更多代码来审查此问题，请告诉我。

//编辑

带有routerLink语句的HTML代码：

<ul class="navbar-nav mr-auto">
  <ng-container *ngFor="let link of links">
    <li class="nav-item" *ngIf="link.data.showInMenu" [routerLinkActive]="['active']">
      <a class="nav-link" [routerLink]="link.path">{{link.data.linkName}}</a>
    </li>
  </ng-container>
</ul>

“链接”基本上是来自app-routing.module.ts

的路由对象数组。

Answer 1

URL定义[routerLink]的方式类似于cr-calculator。这是一个相对URL，因为它不是以/开头。如果您不在顶级路线上，这些功能将不起作用。每当您在/中指定链接时，请在顶级路由前面添加一个nav。

Answer 2

我解决了这个问题。你们都不知道，因为当我创建项目时，我在命令行中添加了App Routing标记，它会自动生成一个AppRouting模块并将其导入我的app.module.ts中。因此，错误是我有两个AppRouting模块，并且已在自定义AppRouting中添加了路由，但在app.module.ts中将空白应用程序路由模块链接了。

角路由问题“无法匹配任何路由”

2 个答案: