Angular组件库中Inputmask与PrimeNG Calendar集成外部项目报错求助

版本环境 #

• Angular 15
• Primeng 15
• Inputmask 5.0.8

操作流程 #

我在组件中引入PrimeNG Calendar和Inputmask，尝试给输入框添加掩码控制，代码如下：

import Inputmask from 'inputmask';
import { Calendar } from 'primeng/calendar';

export class DatepickerComponent {
  // 其他变量...
  
  public maskDateFormat: string = '99/99/9999';  // 示例格式
  @ViewChild(Calendar, { static: false }) calendar!: Calendar;

  getHTMLInput(): HTMLInputElement {
    return this.calendar.el.nativeElement.querySelector('input');
  }

  ngAfterViewInit(): void {
     // 其他无关逻辑...
     
     const input: any = this.getHTMLInput();
     input.setAttribute("data-inputmask", `'mask':'${this.maskDateFormat}'`)
     Inputmask().mask(input);
  }
    
}

这段代码在Storybook开发测试时完全正常，掩码能正常生效且无报错。

问题现象 #

将组件发布到外部项目使用时，出现以下错误：

core.mjs:8400 ERROR TypeError: inputmask__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at DatepickerComponent.ngAfterViewInit (myLibrary-components.mjs:2629:9)
    at callHook (core.mjs:2434:22)
    at callHooks (core.mjs:2403:17)
    at executeInitAndCheckHooks (core.mjs:2354:9)
    at refreshView (core.mjs:10397:21)
    at refreshComponent (core.mjs:11385:13)
    at refreshChildComponents (core.mjs:10116:9)
    at refreshView (core.mjs:10376:13)
    at refreshEmbeddedViews (core.mjs:11339:17)
    at refreshView (core.mjs:10350:9)

错误指向Inputmask().mask(input);语句，说明外部项目中无法正确创建Inputmask实例。

已尝试的方案 #

• 在外部项目中重新编写相同逻辑的组件，能正常运行，但需求是组件必须封装在库中
• 在组件库中创建指令实现相同功能，依然出现相同报错（Storybook正常，外部项目报错）

解决建议 #

1. 调整Inputmask导入方式
   尝试切换导入写法，规避打包导致的导入异常：

   // 方式1：命名空间导入
   import * as Inputmask from 'inputmask';
   // 方式2：指定具体打包文件
   import Inputmask from 'inputmask/dist/inputmask';
   

   部分库的打包结构会导致默认导入失效，明确导入路径或使用命名空间可解决该问题。

2. 配置peerDependencies
   在组件库的package.json中，将Inputmask声明为peerDependencies，避免库打包时重复引入导致冲突：

   "peerDependencies": {
     "inputmask": "^5.0.0"
   }
   

   同时要求外部项目手动安装Inputmask依赖。

3. 修改组件库打包配置
   如果使用Angular CLI打包库，检查angular.json的build配置：

   "architect": {
     "build": {
       "options": {
         "preserveSymlinks": true
       }
     }
   }
   

   开启preserveSymlinks可避免符号链接导致的模块解析问题。

4. 改用Angular封装的Inputmask库
   考虑使用ngx-inputmask这类专为Angular适配的Inputmask包装库，这类库已兼容Angular模块系统和打包机制，能减少跨库兼容问题。

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