Angular 无法检测到路由数组

Question

我正在尝试在我的 Angular 项目中使用路由，该项目包含 2 个组件：联系人和关于。我按照有关如何执行此操作的文档和 youtube 视频进行操作，但我无法理解我遇到的这个错误。我不明白为什么即使我已经在 app.module.ts 中导入了 routingComponents 也找不到。我读了一些有类似问题的问题，但我看到的解决方案对我不起作用。有人可以解释一下吗？下面是我的代码，带有错误图像

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './second/second.component';

const routes: Routes = [
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
]; 

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

app.module.ts

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

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, routingComponents],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<h1>Routing & Nagivation</h1>

<nav>
  <a routerLink="/contact">Contact</a>
  <a routerLink="/about">About</a>
</nav>
<!-- Router View goes here -->
<router-outlet></router-outlet>

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portfolio2</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Answer 1

问题出在app-routing.module.ts。您缺少 const:

改变这个：

export routingComponents = [AboutComponent, ContactComponent]

为此：

export const routingComponents = [AboutComponent, ContactComponent]

Angular 无法检测到路由数组

Angular Routes Array Can't Be Detected

angular

components

url-routing

angular11