我正在尝试将ng2-pdf-viewer与webpack集成到我的angular 6应用程序中。
我已按照说明在此处添加模块；
因此，该条目将添加到我的包.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")
任何人都可以帮助解释为什么会发生这种情况以及如何解决此问题吗？
答案 0 :(得分：2)
此错误是由于Angular无法找到PdfViewerModule。似乎您有一个子模块，并且那里缺少PdfViewerModule声明。 您是否有一个名为“ press.module.js”之类的子模块？
答案 1 :(得分：0)
对于遇到这种情况的任何人，问题在于PdfViewer示例使用AppComponent展示pdfViewer演示，但我们必须将pdf-viewer标记插入页面模块内。
因此，不必在app.module.ts文件上导入PdfViewerModule，只需在页面的模块文件（your-page.module.ts）中进行操作即可。
答案 2 :(得分：0)
我和很多人一样都犯了错误。经过多次尝试，我还添加了数组提供程序：[PdfViewerComponent]这是我对角度9的详细解决方案：
已在app.module.ts中添加
import { PdfViewerModule, PdfViewerComponent } from 'ng2-pdf-viewer';
imports:[PdfViewerModule]
providers:[PdfViewerComponent ]
但是，如果您要使用providers：app.module.ts中的[PdfViewerComponent]，请将其直接放在@Component({ selector:'bla', templateUrl:'bla', styleUrls:['bla'] , providers: [PdfViewerComponent ] })内的YourComponent中