Question

我是新来的，正在尝试配置路由，但是出现此错误：

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

这是我的应用程序路由模块：

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

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

我的路线文件：

import{ Routes} from '@angular/router';
import { HomepageComponent } from '../homepage/homepage.component';
import { NewsComponent } from '../news/news.component';

export const myRoutes: Routes= [
    { path: 'homepage', component: HomepageComponent},
    { path: 'news', component: NewsComponent},
    { path: '', redirectTo: '/homepage', pathMatch: 'full' }
    ];

我的app.module.ts文件：

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 { FooterComponent } from './footer/footer.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HomepageComponent } from './homepage/homepage.component';
import { NewsComponent } from './news/news.component';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomepageComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，我的app.component.html文件：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

当我尝试进入首页视图时遇到相同的错误。

Answer 1

您可以尝试将路线放置在文件app-routing-module上吗？

在这里找到一点stackblitz：

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

import { NewsComponent } from './news/news.component';
import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
  { path: 'homepage', component: HomepageComponent},
  { path: 'news', component: NewsComponent},
  { path: '', redirectTo: '/homepage', pathMatch: 'full' }
];

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

无法匹配任何路线。网址段：

1 个答案: