Angular组件报错：'my-other-component'不是已知元素的原因排查

场景还原 #

现有两个Angular模块：

app.module.ts #

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    // ...其他组件
  ],
  imports: [
    BrowserModule,
    SharedModule,
    // ...其他模块
  ]
})
export class AppModule {}

shared.module.ts #

@NgModule({
  declarations: [
    myComponent,
    myOtherComponent,
    // ...其他组件
  ],
  imports: [
    OtherModule,
    // ...其他模块
  ],
  exports: [
    myComponent,
    myOtherComponent,
    // ...其他组件
  ]
})
export class SharedModule {}

在myComponent的模板中使用<my-other-component></my-other-component>后，出现两个问题：

1. VS Code编辑器提示错误：

'my-other-component' is not a known element:

1. If 'my-other-component' is an Angular component, then verify that it is part of this module.
2. If 'my-other-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
   但应用运行正常。

2. 尝试将MyOtherComponent添加到AppModule的declarations后，浏览器抛出错误：

compiler.js:2175 Uncaught Error: Type MyOtherComponent is part of the declarations of 2 modules: SharedModule and AppModule!

问题原因 #

1. VS Code编辑器报错的原因 #

myComponent和myOtherComponent同属SharedModule，Angular运行时能正确识别同模块内的组件引用，但VS Code的TypeScript语言服务存在缓存或模块解析延迟，导致未及时识别同模块内的组件关系，从而产生误报。

2. 添加到AppModule后报错的原因 #

Angular有严格的模块规则：一个组件只能被声明在一个NgModule的declarations数组中。MyOtherComponent已在SharedModule中完成声明，再将其加入AppModule的declarations，直接违反了该规则，因此编译时抛出错误。

解决建议 #

针对VS Code的误报：

• 重启VS Code的TypeScript服务：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行。
• 检查组件选择器拼写：确认myOtherComponent的@Component装饰器中selector属性值确实是my-other-component，避免大小写或拼写错误。
• 检查SharedModule代码语法：确保模块定义无语法错误（比如括号、逗号遗漏），语法错误可能导致语言服务无法正确解析模块结构。

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