Angular 17无法通过选择器调用组件问题求助

我有两个非独立Angular组件分属不同模块，ModThree模块包含RxtriggerComponent（选择器app-rxtrigger），其HTML仅含一个无绑定事件的button。在ModOne模块的compone.component.html中调用该选择器时，触发以下错误：

NG8001: 'app-rxtrigger' is not a known element:

1. If 'app-rxtrigger' is an Angular component, then verify that it is part of this module.
2. If 'app-rxtrigger' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
   src/app/modone/compone/compone.component.html:3:4

已尝试添加CUSTOM_ELEMENTS_SCHEMA但无效，使用的Angular版本为17。

相关代码示例 #

modThree.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RxtriggerComponent } from './rxtrigger/rxtrigger.component';

@NgModule({
  declarations: [
    RxtriggerComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[
    RxtriggerComponent
  ]
})
export class ModthreeModule { }

rxtrigger.component.html #

<button>Click</button>

rxtrigger.component.ts #

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

@Component({
  selector: 'app-rxtrigger',
  templateUrl: './rxtrigger.component.html',
  styleUrl: './rxtrigger.component.scss'
})
export class RxtriggerComponent { }

compone.component.html #

<div>
    <p>compone works!</p>
    <app-rxtrigger/>
</div>

modone.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponeComponent } from './compone/compone.component';
import { ModthreeModule } from '../modthree/modthree.module';

@NgModule({
  declarations: [
    ComponeComponent
  ],
  imports: [
    CommonModule,
    ModthreeModule
  ]
})
export class ModoneModule { }

main.ts #

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

问题排查与解决步骤 #

1. 校验模块导入路径
   确认ModthreeModule的导入路径拼写完全正确，注意文件名大小写（比如modThree.module.ts和类名ModthreeModule的匹配），路径错误会导致模块未被正确加载。

2. 确认AppModule的模块依赖
   如果ModOneModule是AppModule的子模块，检查AppModule中是否正确导入了ModOneModule；若ModOneModule作为独立模块启动，确保其自身的imports数组已正确包含ModthreeModule。

3. 清理缓存并重新构建
   Angular 17的缓存可能导致模块变更未生效，执行以下命令清理后重新启动项目：

   ng clean
   ng build
   ng serve
   

4. 验证组件导出配置
   虽然代码中ModthreeModule已将RxtriggerComponent加入exports数组，但可重新确认配置无误，确保组件能被其他模块访问。

5. 检查选择器拼写
   确认compone.component.html中的<app-rxtrigger/>与RxtriggerComponent的selector属性完全一致，无大小写或字符拼写错误。

内容的提问来源于stack exchange，提问作者riki