angular - Angular 6 'pdf-viewer' 的 ng2-pdf-viewer 不是已知对象

Question

我正在尝试使用 webpack 将 ng2-pdf-viewer 集成到我的 angular 6 应用程序中。

我已按照说明在此处添加模块；

ng2-pdf-viewer instructions

这样，入口就添加到了我的包.json中，如下；

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

我可以确认 ng2-pdf-viewer 文件夹已添加到我的 node_modules 文件夹中。

然后我添加到我的 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 { }

然后在我的 press.component.html 中有以下内容；

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

和我的press.component.html;

            <pdf-viewer [src]="pdfSrc"
                    [render-text]="true"
                    style="display: block;"></pdf-viewer>

但是，当我运行 npm run webpack-production 时，出现以下错误；

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

任何人都可以帮助解释为什么会发生这种情况以及我该如何解决这个问题？

Answer 1

此错误是由于 Angular 无法找到 PdfViewerModule。看起来您有一个子模块，并且那里缺少 PdfViewerModule 声明。您是否有名为“press.module.js”之类的子模块？