app.routes 无法识别我在 Angular 中的组件

Question

我是 Angular 新手，在学习完教程后，我决定进行一些尝试。今天，我遇到了这个问题：

TS2305: Module '"./components/required-input/required-input.component"' has no exported member 'RequiredInputComponent'. src/app/app.routes.ts:5:9

我创建了一个新组件并将其放入我的 app.routes.ts 中（斜体字给我带来了问题）：

import { Routes } from '@angular/router';
import { RoundNumberComponent } from './components/round-number/round-number.component';
import { GuardPageComponent } from './components/guard-page/guard-page.component';
import { guardPageGuard } from './guards/guard-page.guard';
import { RequiredInputComponent } from './components/required-input/required-input.component';

export const routes: Routes = [
  { path: 'round-number', component: RoundNumberComponent },
  { path: 'guard-page', component: GuardPageComponent, canActivate: [guardPageGuard] },
  *{ path: 'required-input', component: RequiredInputComponent }*
];

我不明白为什么它会给我这个错误。我发现之前的组件没有什么区别，而且它们工作得很好。

这是给我带来问题的组件的 .ts：

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

import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'app-required-input',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
  ],
  templateUrl: './required-input.component.html',
  styleUrl: './required-input.component.css'
})
export class RequiredInputComponent {

}

如何解决？

一开始我尝试通过 localhost:4200/componentName 进入组件，但是没有成功，几分钟后就出现了错误。我尝试删除该组件并再次生成它，启动一个新服务器，关闭并打开 VS Code，但没有任何效果。

Answer 1

指定样式表的属性应该是styleUrls而不是styleUrl。这个拼写错误会导致 Angular 编译器失败，从而导致您提到的错误。

styleUrls: ['./required-input.component.css']

确保您已将属性名称更正为 styleUrls，并且错误应该得到解决。