angular - 未找到 t 的组件工厂。你把它添加到@NgModule.entryComponents 了吗?
问题描述
我已经创建了一个组件来在我的项目中本地预览 docx 和 pdf 文件(角度 6)。要预览 pdf,我使用了 ng2-pdf-viewer并预览 docx,docx 文件在后端转换为 html 并发送到 angular . docx 和 pdf 的预览在本地机器上工作正常,但在服务器上不起作用。控制台中的错误如下所示。在错误中它提到了组件“t”。我不认为有这样的组件。这可能是另一个错误。
.html 文件:
<loading-spinner *ngIf="loading"></loading-spinner>
<div *ngIf="!loading">
<!-- for pdf -->
<pdf-viewer *ngIf="isPdf" [src]="pdfSrc" style="display: block;" (after-load-complete)="afterLoading()"
(error)="onError()" (contextmenu)="onRightClick()" [zoom]="zoom">
</pdf-viewer>
<!-- for docx -->
<div class="container" *ngIf="isDocx">
<div [innerHTML]="html" class="doc" (contextmenu)="onRightClick()" (click)="onLeftClick()"></div>
</div>
</div>
<button class="btn btn-light zoomIn" (click)="zoomIn()"><i class="fa fa-search-plus" aria-hidden="true"></i></button>
<button class="btn btn-light zoomOut" (click)="zoomOut()"><i class="fa fa-search-minus" aria-hidden="true"></i></button>
ts文件:
import { Component, OnInit, Directive, ElementRef, Renderer2 } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { environment } from '../../../environments/environment';
import { PublicService } from '../public.service';
declare var jQuery: any;
@Component({
selector: 'app-file-preview',
templateUrl: './file-preview.component.html',
styleUrls: ['./file-preview.component.css']
})
@Directive({ selector: '[preventCutCopyPaste]' })
export class FilePreviewComponent implements OnInit {
fileName;
siteUrl = environment.resourcecUrl + "/";
doc;
loading = true;
isPdf = false;
isDocx = false;
html;
pdfSrc;
zoom = 1;
constructor(
private route: ActivatedRoute,
public publicService: PublicService,
el: ElementRef, renderer: Renderer2
) {
this.route.queryParams.subscribe(params => {
this.fileName = params['fileName'];
this.pdfSrc = this.siteUrl + "upload/project/" + this.fileName;
this.checkFileType();
});
//disable copy
var events = 'cut copy paste';
events.split(' ').forEach(e =>
renderer.listen(el.nativeElement, e, (event) => {
event.preventDefault();
})
);
}
ngOnInit() {
}
zoomIn() {
this.zoom += 0.1;
console.log(this.zoom);
}
zoomOut() {
this.zoom -= 0.1;
console.log(this.zoom);
}
checkFileType() {
const res = this.fileName.split('.');
const fileType = res[res.length - 1];
if (fileType == 'pdf') {
this.isPdf = true;
} else if (fileType == 'docx') {
this.isDocx = true;
this.publicService.docx2html(this.fileName).subscribe(
response => {
this.html = response;
// console.log(response);
this.loading = false;
})
} else {
this.onError();
}
}
onRightClick() {
return false;
}
onLeftClick() {
return false;
}
afterLoading() {
this.loading = false;
}
onError() {
alert("Cannot load file");
}
}
解决方案
推荐阅读
- mysql - 合并 3 个表的所有 MySQL 语句
- python - 参数曲线的长度(曲线微分的积分)
- sql - 列的 PostgreSQL 级联(不是外键)
- python - 在导入之前模拟一个类
- scikit-learn - 第一次使用 tfidf,在每个条目都有一个列表的 Pandas 系列中使用它
- c# - 使用 C# 使用 .NET Framework HttpWebRequest 自定义代理服务器标头
- mysql - mysql - how to save results from DESCRIBE table into table
- python - 如何点击一个div?
- string - 如何从一对输入字符串创建组合对(二元组)?
- html - 下载 angular 8 a txt