Using ionic 4 and ng2-pdf-viewer getting “ERROR Error: Uncaught (in promise): Error: Template parse errors”

Ionic Framework ionic-v3
1

I’ve imported ng2-pdf-viewer and set it up as per the example, but I get the “ERROR Error: Uncaught (in promise): Error: Template parse errors:” error.

I’ve tried moving the import to the home.ts, but that didn’t work either. I really need to figure this out.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, PdfViewerModule],
  providers: [
    StatusBar,
    SplashScreen,
    PdfViewerModule,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  providers: [ ]
})
export class HomePage {

  public pdf;
  constructor() {
    this.pdf = 'http://www.axmag.com/download/pdfurl-guide.pdf';
  }

}

home.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      NG2-PDF-VIEWER
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>

full error

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'src' since it isn't a known property of 'pdf-viewer'.
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. ("

<ion-content>
  <pdf-viewer [ERROR ->]src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>
"): ng:///HomePageModule/HomePage.html@9:14
'pdf-viewer' is not a known element:
1. If 'pdf-viewer' is an Angular component, 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. ("

<ion-content>
  [ERROR ->]<pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>
"): ng:///HomePageModule/HomePage.html@9:2
Error: Template parse errors:
Can't bind to 'src' since it isn't a known property of 'pdf-viewer'.
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. ("

<ion-content>
  <pdf-viewer [ERROR ->]src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>
"): ng:///HomePageModule/HomePage.html@9:14
'pdf-viewer' is not a known element:
1. If 'pdf-viewer' is an Angular component, 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. ("

<ion-content>
  [ERROR ->]<pdf-viewer src="{{pdf}}" original-size="true" show-all="true"></pdf-viewer>
</ion-content>
"): ng:///HomePageModule/HomePage.html@9:2
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

There’s not that much to it, I’m not sure how I’m screwing it up.

1 Like
2

Hey man, so the error you are getting means the element’s schema is unknown to Angular. Feels like you are using PDF viewer inside lazily loaded Home page. I suggest you add you PDFViewer import into Home pages module.ts file.

Basically make sure you import PDFViewerModule into every page that is lazy loaded (not part of app.module) - into their respective module file.

2 Likes
3

You were correct, I actually had to add the import into the home.module.ts and it worked.

Thank you!