例外：错误：未捕获（承诺）：错误：无法匹配任何路由：''”

Question

我正在学习 Angular 2。 所以我想渲染多个 html 页面来制作单页应用程序。 所以我做到了。 但我遇到了路由问题。 它向我显示这样的错误

 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''
platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''BrowserDomAdapter.logError @ platform-browser.umd.js:1900BrowserDomAdapter.logGroup @ platform-browser.umd.js:1910ExceptionHandler.call @ core.umd.js:4329(anonymous function) @ core.umd.js:9813schedulerFn @ core.umd.js:6699SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:6687NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9249NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9121ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:1900 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:1900ExceptionHandler.call @ core.umd.js:4331(anonymous function) @ core.umd.js:9813schedulerFn @ core.umd.js:6699SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:6687NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9249NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9121ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:1900 Error: Uncaught (in promise): Error: Cannot match any routes: ''
    at resolvePromise (zone.js:538)
    at zone.js:515
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (core.umd.js:9100)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (core.umd.js:9091)
    at ZoneDelegate.invokeTask (zone.js:355)BrowserDomAdapter.logError @ platform-browser.umd.js:1900ExceptionHandler.call @ core.umd.js:4332(anonymous function) @ core.umd.js:9813schedulerFn @ core.umd.js:6699SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:6687NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9249NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9121ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Cannot match any routes: '' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: ''(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: ''(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

main.ts 文件是

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';


bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
]);

而我的 app.routes.ts 是

import { provideRouter, RouterConfig }  from '@angular/router';
import { AboutComponent } from './about/about.component';

  export const routes: RouterConfig = [
{
  path : 'about',
  component : AboutComponent
}
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

我的 app.component.ts 文件是

import { Component }       from '@angular/core';
import { AboutComponent } from './about/about.component';
import { ROUTER_DIRECTIVES }  from '@angular/router';



@Component({
  selector: 'my-app',
  template: `
    <h1> this is our app.component.ts</h1>
    <h2>{{title}}</h2>

    <a [routerLink]="['/about']">ABOUT ADSELINT</a>
    <router-outlet></router-outlet>

      `,
  directives: [ROUTER_DIRECTIVES]

})
export class AppComponent {
  title = 'app.component';
}

我的 about.component.ts 是

import { Component } from '@angular/core';



@Component({
  selector: 'my-about',
  templateUrl : 'app/about/about.html'

})
export class AboutComponent {
  abt = 'ABOUT ';
}

和 about.html 包含

<h1>hello</h1>

它显示了正确的输出，但是在仅加载本地主机（即 app.component.ts）时，它显示了上述错误。

Answer 1

问题是这样的

当您加载您的应用程序 URL 是 localhost:3000 时，因此您需要提供一个默认路径为 path:'' 的路径，因此您没有提供此路径，此错误是来了。

解决方案 将以下路径添加到 app.routes.ts 文件

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import { AboutComponent } from './about/about.component';
import {AppComponent} from './app.component';

export const routes: RouterConfig = [
  {
    path: '',
    redirectTo: '/about',
    pathMatch: 'full'
  },
{
  path : 'about',
  component : AboutComponent
}
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

你的问题就解决了