1
votes

ng2-pdf-viewer avec Angular 6 'pdf-viewer' n'est pas un objet connu

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;

ng2-pdf-viewer instructions

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?


0 commentaires

3 Réponses :


3
votes

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»?


0 commentaires

1
votes

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).


0 commentaires

0
votes

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]})


0 commentaires