ng2-pdf-viewer problem with Angular >=12 version

Question

Error

1. If 'pdf-viewer' is an Angular component and it has 'src' input, then verify that it is part of this module.
2. If 'pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

My module where I'm importing this

    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 { }

My template where I'm using it

pacakge.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"
      }

I'm taking a exmaple of this same package and with same code from this link

    `https://stackblitz.com/edit/ng2-pdf-viewer?file=src%2Fapp%2Fapp.module.ts`

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>

 

Answer 1

Since we are using the declaration component app-billing-claims of BillingClaimsModule inside the ClaimsModule.

Only the exports array of BillingClaimsModule is visible to the ClaimsModule, so that means it has access to only BillingClaimsComponent

Note: the imports (BillingClaimsModule) are not visible to ClaimsModule

To fix this. Kindly add the module for pdf viewer on the BillingClaimsModule exports array!

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

---

As per the details provided, the problem lies on BillingComponent but the module containing the component is not provided.

So follow these steps to solve your issue.

• Search your project as to where the component with the problem, has been added to the declarations array of which module!

• Then validate that module and ensure you are having PdfViewerModule in the imports array of that module

Note: When it comes to lazy loaded modules, the imports need to be imported separately and it will not inherit the imports from the parent/root module!