Angular 2 Uncaught(承诺):错误:无法匹配任何路线.URL段:'aboutme'错误:无法匹配任何路由.网址段:aboutme

问题描述

我有一个简单的应用程序，但出现以下错误:

I have a simple app, but I got the following error:

错误错误:未捕获(承诺):错误:无法匹配任何路由.URL段:'aboutme'错误:无法匹配任何路由.网址段:aboutme

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'aboutme' Error: Cannot match any routes. URL Segment: aboutme

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 { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './components/header/header.component';
import { DevAngularjsComponent } from './components/dev-angularjs/dev-angularjs.component';
import { AboutmeComponent } from './components/aboutme/aboutme.component';

import { AppRoutingModule} from './app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DevAngularjsComponent,
    AboutmeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot(),
    AppRoutingModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loadedFeature='abotme';

  onNavigate(feature: string) {
    this.loadedFeature = feature;
  }
}

app.component.html

<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

IDE将在header.component.html文件中针对routerLink此处不允许使用routerLing属性"显示警告.是什么原因造成的?

The IDE show a warning for routerLink "Attribute routerLing not allowed here" in the header.component.html file. What is the cause of it?

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">LK's page</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/aboutme">About Me</a></li>
        <li routerLinkActive="active"><a routerLink="/dev-angularjs">Angular.JS ~ 2017</a></li>
      </ul>
    </div>
  </div>
</nav>

aboutme.component.ts

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

@Component({
  selector: 'app-aboutme',
  templateUrl: './aboutme.component.html',
  styleUrls: ['./aboutme.component.css']
})
export class AboutmeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {AboutmeComponent} from "../components/aboutme/aboutme.component";
import {DevAngularjsComponent} from "../components/dev-angularjs/dev-angularjs.component";
import {RouterModule, Routes} from "@angular/router";

const appRouting: Routes = [
  { path: '', redirectTo: './component/aboutme', pathMatch: 'full'},
  { path: 'component/aboutme', component: AboutmeComponent},
  { path: 'component/dev-angularjs', component: DevAngularjsComponent}
];

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

推荐答案

您的路径应定义为 aboutme ，

Your path should be defined as just aboutme,

const appRouting: Routes = [
  { path: '', redirectTo: 'aboutme', pathMatch: 'full'},
  { path: 'aboutme', component: AboutmeComponent},
  { path: 'component/dev-angularjs', component: DevAngularjsComponent}
];

这篇关于Angular 2 Uncaught(承诺):错误:无法匹配任何路线.URL段:'aboutme'错误:无法匹配任何路由.网址段:aboutme的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！