ionic - 无法绑定到“src”，因为它不是“pdf-viewer”的已知属性

Question

目前使用带有 Angular 和 Firebase 的 PDF-Viewer，我不断收到运行时错误“无法绑定到 'src'，因为它不是 'pdf-viewer' 的已知属性”。

有谁知道这是为什么？这是我的依赖列表：

"dependencies": {
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"@ionic-native/core": "4.3.2",
"@ionic-native/file": "^4.4.2",
"@ionic-native/file-opener": "^4.4.2",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "2.0.1",
"@types/html2canvas": "^0.5.35",
"@types/jspdf": "^1.1.31",
"cordova-android": "6.3.0",
"cordova-pdf-generator": "^1.9.3",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-file": "^5.0.0",
"angularfire2": "^5.0.0-rc.4",
"cordova-browser": "5.0.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-file-opener2": "^2.0.19",
"cordova-plugin-file-transfer": "^1.7.0",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.3.0",
"cordova-plugin-whitelist": "^1.3.1",
"firebase": "^4.6.1",
"html2canvas": "^0.5.0-beta4",
"ionic-angular": "3.7.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"jspdf": "^1.3.5",
"ng2-pdf-viewer": "^3.0.2",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.0.1",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
  "cordova-plugin-device": {},
  "cordova-plugin-ionic-webview": {},
  "cordova-plugin-splashscreen": {},
  "cordova-plugin-whitelist": {},
  "ionic-plugin-keyboard": {},
  "cordova-plugin-statusbar": {},
  "cordova-plugin-file": {},
  "cordova-plugin-file-transfer": {},
  "cordova-pdf-generator": {},
  "cordova-plugin-file-opener2": {}
},
"platforms": [
  "browser",
  "android"
]
}

我尝试将依赖项回滚到早期状态，但这似乎只会导致更多问题。任何帮助将不胜感激。

我使用过 pdf 查看器的一个区域

<div id="pdfPreview">
        <pdf-viewer [src]="srcPdf"  [render-text]="true" [page]="1" [original-size]="false"
        style="display: block;"
        ></pdf-viewer>

    <!--<img 

   src="assets/img/45SeroAhRyuPNagS090v_
  DM2AjubpQ1SXM2UlmWa8_PeterWyrostekTicketApp
  eal123456.jpg" style="display:block;width:100%;height:auto;margin-
 left:auto;margin-right:auto;" />-->
</div>

我使用pdf查看器的另一个领域：

   <div>
    <pdf-viewer [src]="srcPdf"  [render-text]="true" [page]="1" [original-size]="false"
    style="display: block;"
    ></pdf-viewer>
    <!--<img src="data:image/jpeg;base64, img" style="display:block;width:100%;height:auto;margin-left:auto;margin-right:auto;" />-->
</div>

错误日志：

syntaxError@http://localhost:8107/build/vendor.js:94243:39
parse@http://localhost:8107/build/vendor.js:105481:30
_compileTemplate@http://localhost:8107/build/vendor.js:119675:44
forEach@[native code]
_compileComponents@http://localhost:8107/build/vendor.js:119594:26
http://localhost:8107/build/vendor.js:119481:37
compileModuleAsync@http://localhost:8107/build/vendor.js:119409:64
_bootstrapModuleWithZone@http://localhost:8107/build/vendor.js:4893:43
http://localhost:8107/build/main.js:3904:124
__webpack_require__@http://localhost:8107/build/vendor.js:55:34
webpackJsonpCallback@http://localhost:8107/build/vendor.js:26:42
global code@http://localhost:8107/build/main.js:1:13

如果我没看错，是不是 vendor.js 中有语法错误？我认为这是构建时自动生成的？

Answer 1

在这种情况下，如果您没有正确导入模块，则会出现此问题 PdfViewerModule 像这样的场景

-- app.module.ts --> move PdfViewerModule here if you're not sure.
---- sub1.module.ts --> move PdfViewerModule import here can work too.
------ sub1_1.module.ts --> Maybe you imported the module here & you use it somewhere else out the scope of this submodule.

无论如何这是一个如何导入 PdfViewerModule

的示例

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

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

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 2

发生这种情况的两个原因：

1. 您的组件未添加到模块中的声明中。（直接或通过导入其他模块）所以 Angular 无法弄清楚您的组件可以采用哪些输入。
2. 您的组件没有“src”输入参数。

在您的情况下，您似乎忘记在应用程序模块中导入模块。 https://github.com/VadimDez/ng2-pdf-viewer

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

@NgModule({
  imports: [BrowserModule, PdfViewerModule],