ReferenceError: HTMLAnchorElement is not defined Angular 7 Universal

Question

I am working on an angular 7 application with serverside rendering and trying to download pdf files using filesaver plugin. I am able to download the file on port but when I am building the app, it is throwing me this error:

ReferenceError: HTMLAnchorElement is not defined at /node_modules/file-saver/dist/FileSaver.min.js

I tried making it work by adding global['HTMLAnchorElement']=null in the server.ts file but it's not working that way. I also tried degrading the file-saver plugin version but still getting the same bug.

I've been looking for a solution from the past 24 hours and unable to find a possible explanation on how to fix it.

package.json

"dependencies": {
    "@agm/core": "1.0.0-beta.5",
    "@angular/animations": "7.2.12",
    "@angular/cdk": "7.3.7",
    "@angular/common": "7.2.12",
    "@angular/compiler": "7.2.12",
    "@angular/core": "7.2.12",
    "@angular/flex-layout": "7.0.0-beta.23",
    "@angular/forms": "7.2.12",
    "@angular/http": "7.2.12",
    "@angular/material": "7.3.7",
    "@angular/platform-browser": "7.2.12",
    "@angular/platform-browser-dynamic": "7.2.12",
    "@angular/platform-server": "7.2.12",
    "@angular/pwa": "^0.12.4",
    "@angular/router": "7.2.12",
    "@angular/service-worker": "7.2.12",
    "@fortawesome/angular-fontawesome": "^0.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@gorniv/ngx-universal": "^1.1.5",
    "@nebular/eva-icons": "^4.5.0",
    "@nebular/theme": "^4.5.0",
    "@nguniversal/express-engine": "7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "7.1.1",
    "@ngx-meta/core": "^7.0.10",
    "@ngx-share/button": "^7.1.4",
    "@ngx-share/buttons": "^7.1.4",
    "@ngx-share/core": "^7.1.4",
    "@types/file-saver": "^2.0.1",
    "@types/stripe-checkout": "^1.0.3",
    "angular-calendar": "^0.23.3",
    "angular-image-slider": "0.0.8",
    "angular-sortablejs": "^2.7.0",
    "angular-tree-component": "6.1.0",
    "angularfire2": "^5.2.3",
    "browser-sync": "^2.26.3",
    "core-js": "2.4.1",
    "express": "4.16.4",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "2.0.8",
    "helmet": "^3.21.2",
    "increase-memory-limit": "^1.0.7",
    "intl": "^1.2.4",
    "jquery": "3.2.1",
    "leaflet": "^1.6.0",
    "libphonenumber-js": "^1.7.27",
    "moment": "^2.24.0",
    "ngx-filesaver": "^2.2.1",
    "ngx-universal-cookies": "^8.0.1",
    "node-pre-gyp": "^0.14.0",
    "perfect-scrollbar": "^1.3.0",
    "quill": "^1.3.7",
    "regexp-replace-loader": "^1.0.1",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "screenfull": "^3.3.3",
    "sortablejs": "^1.10.1",
    "tether": "^1.4.7",
    "ts-loader": "^3.5.0",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-node-externals": "^1.7.2",
    "zone.js": "^0.8.29"
  }

It would be very nice if someone can help me out solving this out. Thanks in advance.

Answer 1

I tried a lot using file-saver plugin for downloading but unable to make it work with angular ssr. So instead of using file-saver, I used window.URL.createObjectURL property. Like this:

const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(response);
a.href = url;
a.download = 'file.pdf';
a.click();
window.URL.revokeObjectURL(url);