I'm trying ti integrate ng2-pdf-viewer in my angular 6 application with webpack.
I have followed the instructions for adding the module here;
So, the entry is added to my package .json, which is as follows;
{
"name": "myApp",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "concurrently \"webpack-dev-server --env=dev --open --hot --inline --port 8080\" \"dotnet run\" ",
"node-sass": "npm rebuild node-sass",
"webpack-dev": "webpack --env=dev",
"webpack-production": "webpack --env=prod",
"build-dev": "npm run webpack-dev",
"build-production": "npm run webpack-production",
"watch-webpack-dev": "webpack --env=dev --watch --color",
"watch-webpack-production": "npm run build-production --watch --color",
"publish-for-iis": "npm run build-production && dotnet publish -c Release",
"test": "karma start",
"test-ci": "karma start --single-run --browsers ChromeHeadless",
"lint": "tslint ./ClientApp"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.3",
"@angular-devkit/core": "^0.6.8",
"@angular/animations": "^6.0.7",
"@angular/common": "^6.0.7",
"@angular/compiler": "^6.0.7",
"@angular/compiler-cli": "^6.0.7",
"@angular/core": "^6.0.7",
"@angular/forms": "^6.0.7",
"@angular/http": "^6.0.7",
"@angular/platform-browser": "^6.0.7",
"@angular/platform-browser-dynamic": "^6.0.7",
"@angular/platform-server": "^6.0.7",
"@angular/router": "^6.0.7",
"@angular/upgrade": "^6.0.7",
"@ks89/angular-modal-gallery": "^6.2.0",
"angular2-useful-swiper": "5.0.1",
"bootstrap": "3.3.7",
"core-js": "2.5.7",
"font-awesome": "^4.7.0",
"hammerjs": "2.0.8",
"ie-shim": "0.1.0",
"mousetrap": "1.6.2",
"ng2-pdf-viewer": "^5.2.3",
"rxjs": "6.2.1",
"rxjs-compat": "6.2.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@ngtools/webpack": "^6.0.8",
"@types/jasmine": "^2.8.8",
"@types/node": "^10.5.2",
"@types/hammerjs": "^2.0.35",
"@types/mousetrap": "^1.6.0",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^5.2.0",
"clean-webpack-plugin": "^0.1.19",
"codelyzer": "^4.4.2",
"concurrently": "^3.6.0",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "3.1.0",
"jquery": "^3.3.1",
"json-loader": "^0.5.7",
"karma": "^2.0.4",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"loader-utils": "^1.1.0",
"node-sass": "^4.9.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^7.0.3",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"tslint": "^5.11.0",
"tslint-loader": "^3.6.0",
"typescript": "2.7.2",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^1.0.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
},
"-vs-binding": {
"AfterBuild": [
"node-sass",
"build-dev"
]
}
}
I can confirm that the ng2-pdf-viewer folder has been added to my node_modules folder.
I have then added to my app.module.ts;
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { AppComponent } from "./app.component";
import { AppRoutes } from "./app.routes";
import { CoreModule } from "./core/core.module";
import { HomeModule } from "./home/home.module";
import { PressModule } from "./press/press.module";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
PdfViewerModule,
AppRoutes,
CoreModule.forRoot(),
HomeModule,
PressModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Then in the my press.component.html i have the following;
import { Component } from "@angular/core";
@Component({
selector: "press-component",
templateUrl: "./press.component.html",
styleUrls: ["./press.component.scss"]
})
export class PressComponent {
pdfSrc: string = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
constructor() {
}
}
and my press.component.html;
<pdf-viewer [src]="pdfSrc"
[render-text]="true"
style="display: block;"></pdf-viewer>
However, when I run npm run webpack-production i get the following error;
ERROR in : 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. ("sm-12 text-center">
<pdf-viewer [ERROR ->][src]="pdfSrc"
[render-text]="true"
style="display:") : Can't bind to 'render-text' since it isn't a known property of 'pdf-viewer'.
1. If 'pdf-viewer' is an Angular component and it has 'render-text' 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. ("
<pdf-viewer [src]="pdfSrc"
[ERROR ->][render-text]="true"
style="display: block;"></pdf-viewer>
</div> ") : '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. (" class="col-sm-12 text-center">
[ERROR ->]<pdf-viewer [src]="pdfSrc"
[render-text]="true"
sty")
Can anyone help to explain why this is occurring and how I can fix this issue?