引入Angular Material触发NG0203错误：inject()需在注入上下文调用

针对你遇到的导入MatToolbarModule后全页面出现inject() must be called from an injection [...]错误，结合Angular 15的环境，给你几个排查和解决步骤：

• 确认Angular Material版本与Angular版本匹配
  Angular 15必须搭配@angular/material 15.x系列版本，版本不兼容是这类错误的常见诱因。执行npm list @angular/material查看当前版本，如果不是15.x，先卸载重装：

  npm uninstall @angular/material
  npm install @angular/material@15
  

• 检查模块导入的位置是否正确
  确保MatToolbarModule是在NgModule的imports数组中导入，绝对不能在组件类、服务的顶层作用域或者非注入上下文的地方调用inject相关逻辑。正确的导入示例：

  import { NgModule } from '@angular/core';
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { CommonModule } from '@angular/common';
  import { HomeComponent } from './home.component';
  
  @NgModule({
    declarations: [HomeComponent],
    imports: [
      CommonModule,
      MatToolbarModule // 必须放在这里
    ]
  })
  export class HomeModule { }
  

• 排查是否存在提前初始化的代码
  避免在模块/组件类的顶层作用域直接调用inject()方法，或者实例化需要依赖注入的类。比如下面的写法是错误的：

  // 错误：顶层作用域调用inject，会触发NG0203
  const userService = inject(UserService);
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent { }
  

  正确的做法是通过构造函数注入依赖，或者在ngOnInit等生命周期钩子中处理需要注入的逻辑。

• 清理缓存并重建项目
  缓存问题也可能导致这类奇怪的错误，执行以下步骤：

  1. 运行ng cache clean清除Angular缓存
  2. 删除项目根目录的node_modules文件夹和package-lock.json文件
  3. 重新安装依赖：npm install
  4. 重启JetBrains Rider，再用ng serve --open启动项目

• 确认Ivy编译器已启用
  Angular 15默认启用Ivy，但可以检查tsconfig.json中的配置确保无误：

  "angularCompilerOptions": {
    "enableIvy": true
  }
  

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