Angular 14独立组件报错：缺失@NgModule注解问题求助

我正尝试从SCAM（单组件模块）切换到Angular独立组件架构，创建了标注standalone: true的ExpansionTableComponent，并按照官方指南将其导入到SMVHistoryComponentModule的imports数组中。项目可以正常构建和运行，但VSCode持续弹出以下错误提示：

class ExpansionTableComponent
Appears in the NgModule.imports of SMVHistoryComponentModule, but could not be resolved to an NgModule class.
Is it missing an @NgModule annotation?(-996002)

使用环境版本 #

Angular CLI: 14.2.10
Node: 14.20.0
Package Manager: npm 6.14.17 
OS: linux x64

@angular-devkit/architect          0.1402.10
@angular-devkit/build-angular      14.2.10
@angular-devkit/core               14.2.10
@angular-devkit/schematics         14.2.10
@angular/cdk                       14.2.7
@angular/cli                       14.2.10
@angular/google-maps               14.2.7
@angular/material                  14.2.7
@angular/material-moment-adapter   14.2.7
@schematics/angular                14.2.10
rxjs                               6.6.3
typescript                         4.6.4

相关代码 #

ExpansionTableComponent #

@Component({
  selector: 'app-expansion-table',
  templateUrl: './expansion-table.component.html',
  styleUrls: ['./expansion-table.component.scss'],
  standalone: true,
  imports: [CommonModule, MatExpansionModule, MatTableModule]
})
export class ExpansionTableComponent implements OnChanges {
  @Input() tableData: ExpansionTableData[];

  ngOnChanges(changes: SimpleChanges): void {
    console.log(this.tableData);
  }
}

SMVHistoryComponentModule #

@Component({
  selector: 'app-smv-history',
  templateUrl: './smv-history.component.html',
  styleUrls: ['./smv-history.component.scss'],
  providers: [SMVHistoryService]
})
export class SMVHistoryComponent {}

@NgModule({
  declarations: [SMVHistoryComponent],
  exports: [SMVHistoryComponent],
  imports: [
    CommonModule,
    MatCardModule,
    MatTableModule,
    MatIconModule,
    MatButtonModule,
    MomentModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatDatepickerModule,
    MatPaginatorModule,
    MatDialogModule,
    ProcessResultDialogComponentModule,
    TranslateModule.forChild(),
    ExpansionTableComponent
  ]
})
export class SMVHistoryComponentModule {}

解决方案 #

这个问题是VSCode的Angular Language Service与Angular 14独立组件特性的兼容bug导致的，可按以下步骤逐一尝试解决：

• 更新Angular Language Service扩展：打开VSCode扩展市场，找到Angular Language Service，更新到适配Angular 14的最新版本。
• 重启TypeScript服务：按下Ctrl+Shift+P打开命令面板，输入TypeScript: Restart TS Server并执行，强制刷新语言服务缓存。
• 检查编译配置：确认tsconfig.json中angularCompilerOptions的enableIvy设为true（Angular 14默认已开启），同时确保strictTemplates配置正确。
• 临时兼容方案（不推荐）：如果以上方法无效，可以给独立组件包裹一个空NgModule，然后导入该模块替代直接导入组件：

// 新增ExpansionTableModule
@NgModule({
  imports: [ExpansionTableComponent],
  exports: [ExpansionTableComponent]
})
export class ExpansionTableModule {}

然后修改SMVHistoryComponentModule的imports数组，将ExpansionTableComponent替换为ExpansionTableModule。

内容的提问来源于stack exchange，提问作者Hans Völzer