I have created a component to preview docx and pdf files natively in my project(angular 6).To preview pdf, I have used ng2-pdf-viewer and to preview docx, docx file is converted to html in the backend and send to angular. Preview for docx and pdf is working fine on local machine, but does not work on the server. The error in the console is shown below. In the error it mentions component 't'. I don't think there such component. It might be another bug.
html file:
<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 file:
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");
}
}