升级Angular 16后修复ngx-simple-modal模块兼容问题求助

问题详情 #

升级Angular 16后，原项目依赖的ngx-simple-modal模块出现以下错误：

'SimpleModalModule' does not appear to be an NgModule class.
simple-modal.module.d.ts(5, 54): This likely means that the library which declares SimpleModalModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

fork该仓库并解决ReflectiveInjector deprecated问题后，项目可构建，但使用自定义模态组件时出现类型错误：

Argument of type 'typeof ModalSigninComponent' is not assignable to parameter of type 'Type<SimpleModalComponent<null, null>>'.
Type 'ModalSigninComponent' is not assignable to type 'SimpleModalComponent<null, null>'.
Types have separate declarations of a private property 'observer'.

仓库已停更（最后提交2021年12月），需手动修复兼容性问题。

修复步骤 #

1. 修正父类属性访问权限 #

在fork的库中找到src/lib/simple-modal.component.ts，将私有属性observer改为protected：

// 原代码
private observer: Observer<any>;

// 修改后
protected observer: Observer<any>;

TypeScript不允许子类与父类存在同名私有属性，改为protected后子类可直接继承使用该属性，无需重复声明。

2. 移除子类中的重复声明 #

在你的自定义模态组件（如ModalSigninComponent）中，删除自行声明的private observer属性。

3. 确保泛型继承正确 #

若组件需要传递输入参数或返回结果，继承SimpleModalComponent时指定对应泛型类型：

// 示例：根据实际业务替换Input/Result类型
export class ModalSigninComponent extends SimpleModalComponent<SigninInput, SigninResult> {
  // 组件逻辑代码
}

4. 启用Ivy兼容性配置 #

修改库的tsconfig.lib.json，添加Ivy相关编译配置：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "compilationMode": "partial"
  }
}

5. 重新构建并替换依赖 #

在fork的库目录执行构建命令：

npm run build

将构建后的dist目录产物替换主项目中原有的ngx-simple-modal依赖（可通过本地文件依赖或私有npm包引入）。

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