Angular带@Input组件跨模块使用出现NG8001/NG8002错误求助

核心问题 #

1. Angular模块隔离机制：Angular模块默认是隔离的，MyOtherModule无法直接访问AppModule中声明的组件——哪怕AppModule导出了该组件，也因为AppModule已经导入MyOtherModule，反向导入会触发循环依赖，导致模块无法正常加载。
2. 冗余的输入配置：ApiErrorMessageComponent同时使用了@Input()装饰器和@Component的inputs数组，属于重复配置，虽不直接报错，但不符合Angular最佳实践。

解决方案（推荐使用共享模块） #

步骤1：创建共享模块 #

将通用组件ApiErrorMessageComponent迁移到独立的SharedModule，统一管理可复用组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiErrorMessageComponent } from './api-error-message.component';

@NgModule({
  declarations: [ApiErrorMessageComponent], // 声明组件
  imports: [CommonModule],
  exports: [ApiErrorMessageComponent] // 导出组件，供其他模块使用
})
export class SharedModule { }

步骤2：修改AppModule #

移除ApiErrorMessageComponent的声明和导出，改为导入SharedModule：

@NgModule({
  declarations: [
    AppComponent
    // 移除ApiErrorMessageComponent的声明
  ],
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    SharedModule, // 导入共享模块
    MyOtherModule
  ]
  // 移除exports中的ApiErrorMessageComponent
})
export class AppModule { }

步骤3：修改MyOtherModule #

导入SharedModule，即可使用其中导出的ApiErrorMessageComponent：

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MyOtherRoutingModule,
    SharedModule // 新增导入共享模块
  ]
})
export class MyOtherModule { }

步骤4：修复组件的冗余配置 #

移除@Component中的inputs数组，保留@Input()装饰器（更直观、灵活）：

@Component({
  selector: 'app-api-error-message',
  templateUrl: './api-error-message.component.html',
  styleUrls: ['./api-error-message.component.scss']
  // 移除inputs: ['ErrorMessages']
})

export class ApiErrorMessageComponent implements OnInit {

  @Input() ErrorMessages: ErrorMessage[];

  constructor(private router: Router, private _location: Location) { }

  ngOnInit(): void {
  }
}

为什么这样做？ #

• 共享模块是Angular官方推荐的组件复用方案，能有效避免模块间的耦合和循环依赖，同时统一管理通用组件、指令、管道。
• 移除重复的输入配置，保持代码风格一致，@Input()装饰器支持设置输入别名、必填校验等高级功能，比inputs数组更实用。

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