J'essaye d'intégrer ng2-pdf-viewer
dans mon application angular 6 avec webpack.
J'ai suivi les instructions pour ajouter le module ici;
Donc, le l'entrée est ajoutée à mon package .json, qui se présente comme suit;
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")
Je peux confirmer que le dossier ng2-pdf-viewer a été ajouté à mon dossier node_modules.
J'ai ensuite ajouté à mon app.module.ts
;
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer>
Puis dans mon appuyez sur. component.html
J'ai ce qui suit;
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() { } }
et mon press.component.html
;
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 { }
Cependant, lorsque j'exécute npm run webpack-production
, j'obtiens l'erreur suivante:
{ "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" ] } }
Quelqu'un peut-il m'aider à expliquer pourquoi cela se produit et comment puis-je résoudre ce problème?
3 Réponses :
Cette erreur est due au fait qu'Angular ne parvient pas à trouver PdfViewerModule. Il semble que vous ayez un sous-module et que la déclaration PdfViewerModule y manque. Avez-vous un sous-module appelé quelque chose comme «press.module.js»?
Pour quiconque tombe dans cette situation, le problème est que l'exemple PdfViewer utilise AppComponent pour montrer la démo de pdfViewer, mais nous devons insérer la balise pdf-viewer dans un module de page.
Donc, au lieu d'importer PdfViewerModule sur le fichier app.module.ts, il vous suffit de le faire dans le fichier module de votre page (your-page.module.ts).
J'ai eu des erreurs comme tant de gens. Après de nombreuses tentatives, j'ai également ajouté des fournisseurs de tableaux: [PdfViewerComponent] c'est ma solution avec angular 9 en détail:
dans app.module.ts
ajouté
importer {PdfViewerModule, PdfViewerComponent} depuis 'ng2-pdf-viewer';
imports:[PdfViewerModule
fournisseurs: [PdfViewerComponent]
Mais si vous voulez à la place des fournisseurs: [PdfViewerComponent] dans app.module.ts mettez ceci directement dans YourComponent à l'intérieur de @Component ({selector: 'bla', templateUrl: 'bla', styleUrls: ['bla' ], fournisseurs: [PdfViewerComponent]})