Angular库集成Angular Material后在外部项目运行报错问题

看起来你遇到了Angular库依赖外部UI组件库（比如Angular Material）时的常见问题——依赖管理不当和模块配置不规范导致的运行时错误。下面我会一步步帮你排查和解决：

一、核心问题分析 #

你的库直接在内部导入了MatSnackBarModule并打包，但Angular库的设计原则是：外部依赖（如Angular Material、@angular/common）应该声明为peerDependencies，而非直接打包进库。如果库打包时包含了这些依赖，会和消费应用中的同依赖版本冲突，或者导致提供者重复注册，最终引发报错。

另外，你的CommonService使用了providedIn: 'root'，但在库中使用根级注入时，需要确保消费应用的依赖环境和库的peer依赖版本匹配。

二、分步解决方案 #

1. 修复库的package.json依赖配置 #

打开库项目的package.json，把以下依赖从dependencies移到peerDependencies中（如果没有peerDependencies字段就新建）：

"peerDependencies": {
  "@angular/common": "^你的Angular版本",
  "@angular/core": "^你的Angular版本",
  "@angular/material": "^对应Angular版本的Material版本",
  "@angular/cdk": "^对应Angular版本的CDK版本"
}

注意：Angular Material和CDK的版本必须和你的Angular主版本一致（比如Angular 16对应Material 16），否则会出现版本不兼容问题。

这样做的目的是告诉消费应用："你需要自己安装这些依赖，我（库）会直接使用你已安装的版本"，避免重复打包和版本冲突。

2. 调整库模块的配置 #

虽然你已经在库模块中导入了MatSnackBarModule，但为了让消费应用能正确识别库的依赖，建议给库模块添加forRoot方法（如果需要提供单例服务的话），同时确保导出所有必要的模块：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { VcmsLibraryComponent } from './components/vcms-library/vcms-library.component';
import { HttpClientModule } from '@angular/common/http';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { CommonService } from './services/common.service';

@NgModule({
  declarations: [
    VcmsLibraryComponent,
    ImportFileDialogComponent,
  ],
  imports: [
    HttpClientModule,
    MatSnackBarModule
  ],
  exports: [
    VcmsLibraryComponent
  ]
})
export class VcmsLibraryModule {
  // 提供forRoot方法，确保服务在消费应用中是单例
  static forRoot(): ModuleWithProviders<VcmsLibraryModule> {
    return {
      ngModule: VcmsLibraryModule,
      providers: [CommonService]
    };
  }
}

为什么要加forRoot？因为如果你的库使用了providedIn: 'root'，在某些情况下可能会出现服务重复实例化的问题，forRoot是Angular库提供单例服务的标准做法。

3. 重新构建库 #

使用生产模式重新构建库，确保打包时排除peer依赖：

ng build vcms-library --prod

--prod模式会启用AOT编译和优化，同时自动排除peerDependencies中的依赖，只打包库自己的代码。

4. 调整消费应用的配置 #

在消费应用中：

• 首先确保已经安装了Angular Material（如果还没安装，执行ng add @angular/material）
• 在app.module.ts中使用forRoot导入库模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 必须导入，Material需要动画模块
import { VcmsLibraryModule } from 'vcms-library';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 关键：Material组件需要这个模块
    VcmsLibraryModule.forRoot() // 使用forRoot导入库
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：BrowserAnimationsModule是Angular Material的必需依赖，消费应用必须导入它，否则Material组件会报错。

三、常见报错排查 #

如果还是报错，可以检查以下几点：

• 确认消费应用中Angular、Material的版本和库的peerDependencies版本完全一致
• 检查库的dist目录下的package.json是否正确包含了peerDependencies
• 清理消费应用的node_modules和package-lock.json，重新执行npm install和npm install "file:./vcms-workspace/dist/vcms-library"

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