在Ionic应用中导入ng2-pdf-viewer后自动编译页面无法加载

以下是针对你的问题的具体解决方案，按步骤尝试：

1. 检查组件重复声明问题 #

你的ShopMenuPageModule中同时导入了SharedModule并声明了PdfComponent，如果SharedModule内部已经声明并导出了PdfComponent，会导致重复组件声明，这是Angular热重载时常见的报错诱因。

• 打开SharedModule，确认是否包含PdfComponent的声明与导出
• 如果SharedModule已经处理了PdfComponent，移除ShopMenuPageModule的declarations数组中的PdfComponent

修正后的ShopMenuPageModule声明部分：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    QRCodeModule,
    SharedModule,
    PdfViewerModule
  ],
  declarations: [
    ShopMenuPage
    // 移除PdfComponent
  ]
})
export class ShopMenuPageModule {}

2. 给PDF组件添加销毁逻辑 #

热重载时如果PDF实例没有被正确销毁，会残留内存占用导致页面加载失败。在PdfComponent中实现OnDestroy钩子：

import { Component, OnDestroy, ViewChild } from '@angular/core';
import { PdfViewerComponent } from 'ng2-pdf-viewer';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.scss'],
})
export class PdfComponent implements OnDestroy {
  @ViewChild('pdfViewer') pdfViewer?: PdfViewerComponent;

  ngOnDestroy() {
    // 主动销毁PDF实例
    this.pdfViewer?.pdfViewer?.destroy();
  }
}

3. 修正模板中的PDF组件属性 #

确保模板中的scrollX属性使用正确的绑定语法，同时调整高度计算避免布局冲突：

<pdf-viewer
  [scrollX]="true" 
  #content
  *ngIf="pdfStatus"
  [src]="pdfSrc"
  [render-text]="true"
  [show-all]="true"
  [original-size]="false"
  style="display: block; width: 100%; height: calc(100vh - 56px);"
>
</pdf-viewer>

4. 清除依赖缓存并重新安装 #

依赖缓存损坏也可能导致热重载异常：

• 执行命令清除缓存：

  npm cache clean --force
  

• 删除node_modules和package-lock.json：

  # Windows
  rmdir /s /q node_modules && del package-lock.json
  
  # macOS/Linux
  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

5. 尝试禁用热重载缓存启动服务 #

启动Ionic时添加--no-cache参数，强制跳过热重载缓存：

ionic serve --no-cache

6. 检查版本兼容性 #

确认ng2-pdf-viewer与你的Angular/Ionic版本匹配：

• 查看ng2-pdf-viewer的peerDependencies配置（在其package.json中）
• 如果版本不兼容，升级或降级ng2-pdf-viewer到适配的版本

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