引入Angular Material模块后报JIT compiler unavailable错如何处理

开发者阿泽

2026-10-3

错误触发原因

非法的NgModule导入配置：Angular的@NgModule装饰器的imports数组仅允许传入Angular模块类，你将属于指令类的MatInput直接加入了imports数组，属于非法配置。Angular生产构建默认启用AOT编译，不会打包JIT编译器，当框架加载到非法导入项时会尝试调用JIT编译器处理，找不到编译器就抛出该报错。
缺失依赖模块：mat-form-field组件属于MatFormFieldModule，你仅导入了MatInputModule，缺少该依赖模块也会触发运行时异常。

解决方法

修正app.module.ts的导入配置，参考代码如下：

// 移除对MatInput的单独导入，只保留模块导入，补充MatFormFieldModule
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
// 若用到表单双向绑定/表单控制，额外导入对应表单模块
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 其余原有导入省略

@NgModule({
  declarations: [
    // 你的项目组件声明，保持原有内容即可
  ],
  imports: [
    BrowserModule,
    MatFormFieldModule, // 新增：提供mat-form-field组件能力
    MatInputModule,
    FormsModule, // 按需添加，用模板驱动表单就加这个
    ReactiveFormsModule, // 按需添加，用响应式表单就加这个
    // 其余原有模块导入保持不变
  ],
  providers: [],
  bootstrap: [/* 你的根组件，保持原有内容即可 */]
})
export class AppModule { }