Angular 5中ngx-imageviewer无法使用，AOT/JIT构建均报错求助

我之前也碰到过类似的ngx-imageviewer兼容性问题，下面针对你遇到的两个错误分别给出解决方案：

一、AOT构建报错：Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' #

这个错误本质是库版本和你的Angular版本不兼容，尤其是Angular启用Ivy编译器后，很多旧库没做适配导致AOT编译失败。你可以按以下步骤排查：

• 版本匹配检查：先确认你当前的Angular版本，然后去ngx-imageviewer的仓库查看它支持的Angular版本范围。比如如果用的是Angular 12+，可能需要找库的最新版本；如果库已经停更，考虑降级Angular到兼容的版本（不推荐，除非迫不得已）。
• 临时禁用Ivy：如果暂时找不到兼容版本，可以在tsconfig.json中禁用Ivy来绕过这个问题（注意这只是临时方案，长期还是建议用兼容Ivy的库）：

  {
    "angularCompilerOptions": {
      "enableIvy": false
    }
  }
  

• 手动修复库代码：如果库已经开源且没人维护，你可以fork项目，修改模块的装饰器写法，确保符合AOT编译的静态分析要求——比如避免在NgModule装饰器里调用动态函数，把依赖声明改成静态数组形式。

二、JIT运行时报错：Error: StaticInjectorError[DomSanitize...] #

这个错误是因为DomSanitizer服务没有被正确注入，DomSanitizer是Angular的内置服务，依赖BrowserModule提供。你可以这么解决：

• 确认导入必要模块：在你的根模块（AppModule）或者使用ImageViewerModule的子模块中，确保导入了BrowserModule（根模块）或者BrowserAnimationsModule（如果ngx-imageviewer用到了动画）：

  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      ImageViewerModule // 你的图片查看器模块
    ]
  })
  export class AppModule { }
  

• 手动提供DomSanitizer：如果库本身没有正确声明依赖，你可以在模块中手动提供这个服务：

  import { DomSanitizer } from '@angular/platform-browser';
  
  @NgModule({
    providers: [DomSanitizer]
  })
  export class YourModule { }
  

• 安全处理图片URL：另外，确保你传入图片查看器的URL是经过DomSanitizer处理的安全链接，比如在组件中：

  import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
  
  constructor(private sanitizer: DomSanitizer) {}
  
  getSafeImageUrl(url: string): SafeUrl {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }
  

  然后在模板中使用[src]="getSafeImageUrl(yourImageUrl)"。

额外排查步骤 #

如果以上方法都不管用，试试这些通用修复手段：

• 清理依赖缓存：删除node_modules和package-lock.json，然后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查angular-cli版本：确保@angular/cli的版本和你的Angular核心版本一致，避免版本不匹配导致的编译问题。
• 考虑替代库：如果ngx-imageviewer维护不及时，可以试试其他活跃的图片查看器库，比如ngx-photo-editor，或者自己基于Canvas实现简单的缩放、平移功能。

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