Angular17自定义库引入后触发NG0203错误求助

架构老林

2026-6-29

问题：Angular 17自定义库引入带MatRipple的组件触发NG0203错误

我创建了一个自定义Angular库，实现了一个使用MatRippleModule的简单CardComponent，代码如下：

库中代码

card.component.ts

import { Component } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';

@Component({
  selector: 'card',
  standalone: true,
  imports: [MatRippleModule],
  templateUrl: './card.component.html',
  styleUrl: './card.component.css'
})
export class CardComponent {}

card.component.html

<div matRipple>
    Click Me
</div>

public-api.ts

export * from './components/card/card.component';

宿主项目中使用

我已构建该库并安装到目标Angular项目中，在项目的ExampleComponent中引入使用：

example.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { CardComponent } from 'lib';

@Component({
    selector     : 'example',
    standalone   : true,
    templateUrl  : './example.component.html',
    imports      : [CardComponent],
    encapsulation: ViewEncapsulation.None,
})
export class ExampleComponent {}

example.component.html

<div class="flex flex-col flex-auto min-w-0">
    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">
        <card></card>
    </div>
</div>

这是Angular17的练手案例，此前在旧版本Angular中该流程可正常运行，但此次引入<card>组件后触发以下错误：

src_app_modules_admin_example_example_routes_ts.js:2 ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:3824:15)
    at Module.ɵɵinject (core.mjs:3837:60)
    at Object.MatCommonModule_Factory [as useFactory] (core.mjs:83:103)
    at Object.factory (core.mjs:5338:38)
    at core.mjs:5239:43
    at runInInjectorProfilerContext (core.mjs:3644:9)
    at R3Injector.hydrate (core.mjs:5238:17)
    at R3Injector.get (core.mjs:5106:33)
    at injectInjectorOnly (core.mjs:3831:40)
    at ɵɵinject (core.mjs:3837:60)

请问该问题是否与Angular17的配置有关？如何解决？

解决方案

这个错误确实和Angular 17的依赖配置、库构建逻辑有关，核心原因是自定义库与宿主项目的Angular核心/Material依赖版本不匹配，或库构建时未正确处理依赖注入上下文。MatRipple依赖的MatCommonModule工厂函数需要在统一的注入上下文执行，版本不一致或重复加载依赖会导致上下文冲突。

解决步骤如下：

1. 对齐库与宿主项目的依赖版本
检查库和宿主项目的package.json，确保@angular/core、@angular/material等核心依赖的版本号完全一致（比如都使用17.0.5），版本差异会直接导致注入上下文不兼容。
2. 调整库的tsconfig.lib.json配置
在库的tsconfig.lib.json中，添加Angular包的路径映射，避免构建时打包重复的Angular核心代码：
```
"compilerOptions": {
  // 其他原有配置...
  "paths": {
    "@angular/*": ["./node_modules/@angular/*"]
  }
}
```

3. 修正库的package.json依赖声明
将Angular、Material相关依赖移到peerDependencies中，让库复用宿主项目的依赖，避免重复加载：

"peerDependencies": {
  "@angular/core": "^17.0.0",
  "@angular/material": "^17.0.0"
},
"dependencies": {
  // 仅保留库自身独有的、不依赖宿主的第三方包
}

4. 重新构建并安装库
执行库的生产构建命令：
```
ng build your-library-name --configuration production
```
然后在宿主项目中重新安装库（本地开发可使用npm install ../path-to-your-library）。
5. 简化宿主项目的导入逻辑
由于CardComponent是独立组件且已自行导入MatRippleModule，宿主项目的ExampleComponent无需额外导入任何Material模块，避免重复注入。

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

Angular17自定义库引入后触发NG0203错误求助

库中代码 #

card.component.ts #

card.component.html #

public-api.ts #

宿主项目中使用 #

example.component.ts #

example.component.html #