Angular封装awesome-notifications服务移至类库后出现构造函数未定义错误

问题 #

我给Angular应用开发了一个基于第三方包awesome-notifications封装的Notification Service，在原有应用里运行完全正常。但把这个服务迁移到Angular类库并从类库引用使用时，出现了导入错误：

ERROR TypeError: awesome_notifications__WEBPACK_IMPORTED_MODULE_0__ is not a constructor

错误指向服务代码中的import AWN from "awesome-notifications";这一行。因为是封装服务，必须实例化AWN来创建通知器，现在Angular无法注入这个服务，求解决办法。

附上服务代码：

import { Injectable } from '@angular/core';
import AWN from 'awesome-notifications';

export interface NotificationRequestModel {
  message:string;
  title?:string;
}

@Injectable({
 providedIn: 'root'
})
export class NotificationService {

 notifier = new AWN();

 constructor() {
 }

 success(req:NotificationRequestModel) {
   this.notifier.success(req.message, {
   labels: { success: req?.title },
  })
 } 
 // ...其他方法

可能的解决方案 #

1. 检查类库和主应用的依赖安装 #

• 确保Angular类库的package.json里已经装了awesome-notifications，同时主应用也要安装这个依赖（类库不会自动把依赖传递给主应用）
• 执行命令：

  # 类库目录下执行
  npm install awesome-notifications
  # 主应用目录下执行
  npm install awesome-notifications
  

2. 调整导入语句 #

部分第三方库在ES模块和CommonJS模块的导出逻辑上有差异，试试换种导入方式：

// 尝试整体导入
import * as AWN from 'awesome-notifications';
// 或者导入指定导出项
import { AWN } from 'awesome-notifications';

如果修改后能正常实例化，说明库的导出格式需要适配类库的编译环境。

3. 配置类库的tsconfig.lib.json #

确保类库的TypeScript配置能正确解析第三方模块：

• 在compilerOptions中添加：

  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
  

这两个选项能帮TypeScript正确处理默认导出的模块，避免导入时的类型错误。

4. 处理全局依赖（若库有要求） #

有些通知类库需要全局引入CSS或脚本才能正常工作，检查awesome-notifications的文档：

• 在主应用的angular.json里添加CSS引用：

  "styles": [
    "node_modules/awesome-notifications/dist/style.css",
    // 其他样式文件
  ]
  

• 如果需要全局脚本，也可以在scripts数组里添加对应的JS文件。

5. 延迟实例化AWN #

别在类属性初始化时直接实例化，改成在constructor里创建实例：

@Injectable({
 providedIn: 'root'
})
export class NotificationService {
  notifier: AWN;

  constructor() {
    // 延迟到构造函数里实例化
    this.notifier = new AWN();
  }
  // ...其他方法
}

这样能确保模块完全加载后再创建实例，避免因加载顺序导致的错误。

6. 检查类库的打包配置 #

如果用Angular CLI构建类库，确保ng-package.json里没有排除awesome-notifications，或者配置正确的allowedDependencies：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "allowedDependencies": ["awesome-notifications"]
}

这个配置会告诉ng-packagr允许把awesome-notifications作为依赖包含在类库的打包输出里。

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