将SomeOtherModule的CounterComponent作为AppModule路由路径时遇TS错误

我来帮你解决这个TypeScript错误，问题出在Angular模块的组件声明规则和路由配置的细节上，一步步来修正：

错误根源分析 #

1. 重复声明组件：你在AppModule的declarations数组里声明了CounterComponent，但这个组件已经属于SomeOtherModule的declarations集合了——Angular的核心规则是一个组件只能归属于一个NgModule的declarations，重复声明会导致TypeScript识别混乱。
2. 组件导入缺失：路由配置里引用CounterComponent时，AppModule没有正确导入这个组件类，也会触发“未找到”的错误。

步骤1：移除AppModule中重复的组件声明 #

打开你的AppModule代码，把declarations数组里的CounterComponent删掉，修改后的声明部分应该是这样：

declarations: [
  AppComponent,
  HomeComponent
],

步骤2：在AppModule中正确导入CounterComponent #

在AppModule的顶部，添加对CounterComponent的正确导入（注意路径要匹配你的项目文件结构，比如如果组件在src/app/counter/目录下，导入路径应为./counter/counter.component）：

import { CounterComponent } from './counter/counter.component';
import { SomeOtherModule } from './some-other/some-other.module';
// 其他必要的导入（比如BrowserModule、RouterModule等）

步骤3：确认SomeOtherModule的配置有效性 #

你的SomeOtherModule已经正确配置了：

• 在declarations里声明了CounterComponent
• 在exports里导出了该组件（让导入它的模块能访问到）
• 导入了CommonModule（支持ngIf、ngFor等指令）
  这个模块的配置是没问题的，不需要修改。

最终修正后的AppModule代码示例 #

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { SomeOtherModule } from './some-other/some-other.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    SomeOtherModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样修改后，TypeScript找不到CounterComponent的错误就会被解决，你也能正常通过/counter路径访问该组件了。

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