Angular >=12版本中ng2-pdf-viewer组件报错问题求助

错误信息 #

错误提示：

• 如果'pdf-viewer'是Angular组件且包含'src'输入属性，请确认它已加入当前模块。
• 如果'pdf-viewer'是Web组件，请在该组件的@NgModule.schemas中添加'CUSTOM_ELEMENTS_SCHEMA'以屏蔽此提示。
• 若要允许任意属性，请在该组件的@NgModule.schemas中添加'NO_ERRORS_SCHEMA'。

模块导入代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BillingClaimsRoutingModule } from './billing-claims-routing.module';
import { BillingClaimsComponent } from './billing-claims.component';
import { FormsModule } from '@angular/forms';
import { ApplicationServiceService } from '../service/application-service.service';
import { ClaimService } from '../service/claim.service';
import { DownLoadService } from '../service/download.service';
import { PipesModule } from '../pipe/pipe-module';
import { AttachFileModule } from '../shared/attach-file/attach-file.module';
import { DatePipe } from '@angular/common';

import {PdfViewerModule} from "ng2-pdf-viewer";

@NgModule({
  declarations: [BillingClaimsComponent],
  imports: [
    CommonModule,
    BillingClaimsRoutingModule,
    FormsModule,
    PipesModule,
    AttachFileModule,
    PdfViewerModule
  ],
  providers: [ApplicationServiceService, ClaimService, DownLoadService, DatePipe],
  exports: [BillingClaimsComponent]
})
export class BillingClaimsModule { }

package.json 依赖版本 #

{
  "private": true,
  "dependencies": {
    "@angular/animations": "15.2.0",
    "@angular/common": "15.2.0",
    "@angular/compiler": "15.2.0",
    "@angular/core": "15.2.0",
    "@angular/forms": "15.2.0",
    "@angular/platform-browser": "15.2.0",
    "@angular/platform-browser-dynamic": "15.2.0",
    "@angular/router": "15.2.0",
    "ng-recaptcha": "^11.0.0",
    "ng2-pdf-viewer": "^10.0.0",
    "pdfjs-dist": "^4.0.379",
    "ngx-csv": "^0.3.2",
    "rxjs": "7.5.0",
    "tslib": "2.3.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.0",
    "@angular/cli": "15.2.0",
    "@angular/compiler-cli": "15.2.0",
    "@types/jasmine": "4.0.0",
    "jasmine-core": "4.1.0",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.0.0",
    "karma-jasmine-html-reporter": "1.7.0",
    "typescript": "4.8.4"
  }
}

路由与模块结构 #

app.module.ts 路由配置 #

{
    path: 'billing-claims/:uuid',
    loadChildren: () => import("./claims/claims.module").then(m => m.ClaimsModule),
},

claims.module.ts #

import { ClaimsRoutingModule } from './claims-routing.module';
import { BillingClaimsModule } from '../billing-claims/billing-claims.module';

@NgModule({
  declarations: [
    ClaimsComponent
  ],
  imports: [
    CommonModule,
    ClaimsRoutingModule,
    BillingClaimsModule
  ]
})
export class ClaimsModule 

claims.component.html #

<app-billing-claims></app-billing-claims>

已按示例配置但仍报错，以下是针对性解决方案：

解决方案 #

1. 修复版本兼容性问题
   ng2-pdf-viewer@10.0.0 与 Angular 15 版本不匹配，v10 对应 Angular 14，Angular 15 需要使用 v11+ 版本。执行升级命令：

   npm install ng2-pdf-viewer@^11.0.0 --save
   

   同时调整 pdfjs-dist 版本至与 ng2-pdf-viewer v11 兼容的版本（推荐 ^3.0.0），避免版本冲突。

2. 校验组件模板标签
   检查 BillingClaimsComponent 的模板文件，确认 <pdf-viewer> 标签拼写正确，src 属性绑定符合 Angular 语法，例如：

   <pdf-viewer [src]="pdfFileUrl" [render-text]="true"></pdf-viewer>
   

   确保标签无大小写错误、属性绑定格式正确。

3. 调整模块导入层级
   尝试在 ClaimsModule 中直接导入 PdfViewerModule，跳过模块间接导入的层级问题：

   import { PdfViewerModule } from "ng2-pdf-viewer";
   
   @NgModule({
     declarations: [ClaimsComponent],
     imports: [
       CommonModule,
       ClaimsRoutingModule,
       BillingClaimsModule,
       PdfViewerModule
     ]
   })
   export class ClaimsModule {}
   

4. 清理缓存并重建项目
   执行以下命令清理缓存、重装依赖并重新构建，排除缓存导致的加载异常：

   rm -rf node_modules package-lock.json
   npm install
   ng build --clean
   

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