构建Angular库引入@angular/material后在应用中使用报错求助

API 探路者

2026-8-14

Angular库集成@angular/material后应用端报错的解决办法

问题现象

构建的Angular库引入@angular/material后自身编译正常，但在宿主应用中使用时出现两类错误：

./src/app/app.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i8.MatInputModule to symbol
at .../Documents/git/dialogeditor/ngx-sample-app/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Error: node_modules/dialog/lib/dialog.module.d.ts:9:21 - error TS2307: Cannot find module '@angular/material/input' or its corresponding type declarations.
9 import * as i8 from "@angular/material/input";
~~~~~~~~~~~~~~~~~~~~~~~~~

解决步骤

调整库的依赖声明
打开库的package.json，将@angular/material、@angular/material/input从dependencies迁移到peerDependencies，示例配置：
```
"peerDependencies": {
  "@angular/common": "^16.0.0",
  "@angular/core": "^16.0.0",
  "@angular/material": "^16.0.0",
  "@angular/material/input": "^16.0.0"
}
```
让宿主应用统一管理这些依赖，避免版本冲突或重复安装导致的解析异常。

校验库的类型导出
检查库根目录的public-api.ts，确保相关模块/组件已正确导出，比如：

export * from './lib/dialog.module';
// 若库内封装了基于MatInput的组件，需同步导出对应组件
export * from './lib/components/custom-input/custom-input.component';

重新构建并同步库
执行库的生产构建命令：
```
ng build your-library-name --configuration production
```
本地测试场景下，重新执行npm link链接库，再在宿主应用中运行：
```
npm install
```
确认宿主应用的依赖安装
检查宿主应用的package.json，确保@angular/material和@angular/material/input已安装，未安装则执行：
```
npm install @angular/material @angular/material/input
```