Prerendering Failed Error

I’m getting this error quite often in my app. The work around I’ve been using is to comment out the markup where ngx-uploader is used and the 2 lines in the component ts file for humanizeBytes, refresh the page, and then uncomment the HTML and humanizeBytes code. It will then work for a while before I have to go through the process again. This is on my dev environment. If I push to our test environment it never works. I’ve tried disabling HMR on my dev environment, but the issue still persists.

My environment is an Angular 4.1.2 app generated by Microsoft’s SPA templates (via CLI command dotnet new angular).

Error message:Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: Event is not defined at Object.<anonymous> (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:7036) at t (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:711) at Object.defineProperty.value (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:8917) at t (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:711) at Object.e.exports (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:9472) at t (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:711) at t.exports (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:1095) at C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:1104 at n (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:37) at Object.<anonymous> (C:\Projects\DEV\uploader\ClientApp\dist\main-server.js:9557:581) Current directory is: C:\Projects\DEV\uploader

Line 9557 from main-server.js: https://pastebin.com/6U2nwbQF

Component TS file:

import { Component, Input, ViewEncapsulation, Inject, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from 'ngx-uploader';
import { Observable } from 'rxjs/Rx';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'file-upload',
    templateUrl: '../shared/file-upload.component.html',
    styleUrls: ['../shared/file-upload.component.css' ]
})

export class FileUploadComponent {
    srForm: FormGroup;
    formData: any;
    files: UploadFile[];
    uploadInput: EventEmitter<UploadInput>;
    humanizeBytes: Function;
    dragOver: boolean; 
    submitSuccess: boolean = false;

 constructor(private _http: Http,
        private _router: Router,
        private _fb: FormBuilder) {

        this.files = []; // local uploading files array
        this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader
        this.humanizeBytes = humanizeBytes;

        //form init code removed     
    }

    onUploadOutput(output: UploadOutput): void {
        //console.log(output);
        if (output.type === 'allAddedToQueue') { // when all files added in queue
        } else if (output.type === 'addedToQueue') {
            this.files.push(output.file); // add file to array when added
        } else if (output.type === 'uploading') {
            // update current data in files array for uploading file
            const index = this.files.findIndex(file => file.id === output.file.id);
            this.files[index] = output.file;
        } else if (output.type === 'removed') {
            // remove file from array when removed
            this.files = this.files.filter((file: UploadFile) => file !== output.file);
        } else if (output.type === 'dragOver') { // drag over event
            this.dragOver = true;
        } else if (output.type === 'dragOut') { // drag out event
            this.dragOver = false;
        } else if (output.type === 'drop') { // on drop event
            this.dragOver = false;
        }
    }

    startUpload(requestGuid): void {  // manually start uploading
        console.log('in startupload');
        const event: UploadInput = {
            type: 'uploadAll',
            url: 'http://localhost:51159/api/FileUpload',
            method: 'POST',
            data: null,
            concurrency: 0, // set sequential uploading of files with concurrency 1
            headers: {
               }
        }
        this.uploadInput.emit(event);
    }

    cancelUpload(id: string): void {
        this.uploadInput.emit({ type: 'cancel', id: id });
    }
}

Markup used in component HTML:

<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
                            <h1>Drag & Drop</h1> 
                        </div>
                        <label class="upload-button">
                            <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
                            or choose file(s)
                        </label>

Using Angular 4.1.2, and ngx-uploader version 3.2.2 (previously using 3.2.1 and issue was happening there as well). I’m new to Angular2+, so a lot of what is going on is foreign to me. If you need more details I will try and provide.

[chrisvfabio]

I’m getting the same issue. I think it’s related to this: https://github.com/bleenco/ngx-uploader/blob/ecb99591de36721018d08f1a8478296d654cb34a/src/ngx-uploader/directives/ng-file-drop.directive.ts#L65

Changing Event to DragEvent fixed the issue in my tests

I’m using Angular 5.0.1 and Node 8.9.1

[retailify]

Thx! I’ve forked the repo.