导入Angular Material时遇'MatFormFieldModule非NgModule类'错误求助

问题详情 #

导入MatFormFieldModule时触发以下错误：

'MatFormFieldModule' does not appear to be an NgModule class.(-996002)
form-field-module.d.ts(10, 3): 这可能意味着声明MatFormFieldModule的库(@angular/material/form-field)与Angular Ivy不兼容。请检查是否有该库的新版本，如有请更新。也可咨询库作者确认其是否兼容Ivy。

当前依赖版本：

@angular-devkit/architect       0.1202.18
@angular-devkit/build-angular   12.2.18
@angular-devkit/core            12.2.18
@angular-devkit/schematics      12.2.9
@angular/cdk                    12.2.13
@angular/cli                    12.2.9
@angular/material               12.2.13
@schematics/angular             12.2.9
rxjs                            6.6.7
typescript                      4.3.5

已尝试的方案：

• 添加"postinstall": "ngcc"脚本
• 删除node_modules、清理缓存后重新安装
• 更换不同版本的Angular CLI和Angular Material

排查与解决方案 #

1. 修复模块代码语法错误 #

你的shared.module.ts代码中，exports数组内MatFormFieldModule与HttpClientModule之间缺少逗号，这会导致TypeScript解析异常，间接引发NgModule识别错误。修改后代码如下：

import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule,
    MatFormFieldModule
  ],
  exports: [
    MatFormFieldModule, // 补充缺失的逗号
    HttpClientModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SharedModule {}

2. 统一Angular生态依赖版本 #

当前依赖版本存在多处不一致：

• @angular-devkit系列部分为12.2.18，部分为12.2.9
• @angular/cli与devkit版本不匹配
• @angular/material、cdk版本与CLI存在小版本差异

Angular核心依赖版本需保持一致，建议统一升级到12.x最新稳定版（12.2.18）：

1. 修改package.json，将所有@angular/*、@angular-devkit/*、@schematics/angular版本统一为12.2.18：

{
  "dependencies": {
    "@angular/cdk": "12.2.18",
    "@angular/material": "12.2.18",
    // 其他@angular类依赖同步改为12.2.18
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.1202.18",
    "@angular-devkit/build-angular": "12.2.18",
    "@angular-devkit/core": "12.2.18",
    "@angular-devkit/schematics": "0.1202.18",
    "@angular/cli": "12.2.18",
    "@schematics/angular": "12.2.18"
  }
}

2. 执行命令重装依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

3. 确保ngcc正确执行 #

Angular 12默认启用Ivy，部分库需通过ngcc编译兼容。在package.json中完善postinstall脚本：

{
  "scripts": {
    "postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points"
  }
}

手动执行npm run postinstall触发编译。

4. 验证TypeScript配置 #

确保tsconfig.json中Ivy配置启用：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

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