在Angular工作区引入并使用Angular Material时出现inject()错误

场景描述 #

基于Angular工作区搭建项目，包含Project1、Project2及SharedLib共享库。在Project1和Project2中引入SharedLib后，在SharedLib内创建了包含Material Button组件的自定义组件，相关代码如下：

SharedLib的NgModule配置 #

@NgModule({
  declarations: [
    HelloComponentComponent
  ],
  imports: [
     CommonModule,
     MatButtonModule
  ],
  exports: [
    HelloComponentComponent
  ]
})
export class SamplesharedlibraryModule { }

HelloComponent模板代码 #

<button mat-button color="primary">Primary</button>

触发的错误 #

错误: NG0203: inject() 必须从注入上下文调用，比如构造函数、工厂函数、字段初始化器，或者使用 EnvironmentInjector#runInContext 的函数。

解决方法 #

1. 统一依赖版本 #

确保项目根目录、SharedLib、Project1和Project2的package.json中，Angular核心包（@angular/core、@angular/common等）与Angular Material包（@angular/material、@angular/cdk等）的版本完全一致。版本不匹配会直接导致注入上下文冲突。

2. 优化Material模块导出方式 #

如果SharedLib内多个组件需要使用Material组件，建议创建独立的Material共享模块，统一管理导入和导出：

// shared-material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
  exports: [MatButtonModule]
})
export class SharedMaterialModule { }

随后在SamplesharedlibraryModule中导入SharedMaterialModule，替代直接导入MatButtonModule。

3. 调整共享库构建配置 #

在angular.json中，将SharedLib的构建配置里preserveSymlinks设为true，避免符号链接引发的模块解析异常：

"projects": {
  "SharedLib": {
    "architect": {
      "build": {
        "options": {
          "preserveSymlinks": true,
          // 其他构建配置...
        }
      }
    }
  }
}

4. 清理缓存并重建项目 #

• 删除所有项目的node_modules文件夹和package-lock.json/yarn.lock文件
• 重新执行npm install或yarn install
• 清理Angular缓存：ng cache clean
• 先构建共享库：ng build SharedLib
• 再启动目标项目：ng serve Project1

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