Ionic 5 - Angular and Server Side Redendering (SSR). Error: Cannot redefine property: contructor

I'm trying to add SSR to a web aplication made in ionic 5 with angular with no luck...

I have installed @nguniversal/express-engine and @ionic/angular-server and all the server files are created even command npm run dev:ssr is compiling succesfully.

The problem arrives when I navigate in the browser to localhost:4200, first I got an error with "window", later on with "localStorage", then with "self" and so on, so I've been fixing errors until this one came up:

TypeError: Cannot redefine property: constructor
at Function.defineProperty (<anonymous>)
at /home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:37:96
at xa (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:37:199)
at Window.<anonymous> (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:47:501)
at Object.QdDj (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:48:4)
at __webpack_require__ (/home/josecash/www/emae-app/dist/app/server/main.js:26:30)
at __webpack_require__.t (/home/josecash/www/emae-app/dist/app/server/main.js:83:33)
at ZoneDelegate.crGB.ZoneDelegate.invoke (/home/josecash/www/emae-app/dist/app/server/main.js:82926:30)
at Object.onInvoke (/home/josecash/www/emae-app/dist/app/server/main.js:116929:33)
at ZoneDelegate.crGB.ZoneDelegate.invoke (/home/josecash/www/emae-app/dist/app/server/main.js:82925:36)

I just don't know what happend.

My server.ts looks like this:

import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {join} from 'path';
import {AppServerModule} from './src/main.server';
import {APP_BASE_HREF} from '@angular/common';
import {existsSync} from 'fs';

// ADDED TO FIX LOCALSTORAGE
import 'localstorage-polyfill';

enableProdMode();

export function app(): express.Express {
    const server = express();
    const distFolder = join(process.cwd(), 'dist/app/browser');
    const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
    
    // ADDED TO FIX LOCALSTORAGE
    global['localStorage'] = localStorage;
   
    // ADDED TO FIX WINDOW PROBLEMS
    const domino = require('domino');
    const win = domino.createWindow(indexHtml);
    global['window'] = win;
    global['self'] = win.self;
    global['document'] = win.document;
    global['navigator'] = win.navigator;

    // FIX FOR WIN.MATCHMEDIA.
    win.matchMedia = (query => ({
        matches: query.indexOf('(min-width: 1025px)') !== -1,
    }));
    // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
    server.engine('html', ngExpressEngine({
        bootstrap: AppServerModule,
    }));

    server.set('view engine', 'html');
    server.set('views', distFolder);

    // Example Express Rest API endpoints
    // server.get('/api/**', (req, res) => { });
    // Serve static files from /browser
    server.get('*.*', express.static(distFolder, {
        maxAge: '1y'
    }));

    // All regular routes use the Universal engine
    server.get('*', (req, res) => {
        res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}]});
    });

    return server;
}

function run(): void {
    const port = process.env.PORT || 4000;

    // Start up the Node server
    const server = app();
    server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
    });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
    run();
}

export * from './src/main.server';

And the project info is:

Ionic:

   Ionic CLI                     : 6.12.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1100.2
   @angular-devkit/schematics    : 11.0.2
   @angular/cli                  : 11.0.2
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.19.0 (/usr/bin/node)
   npm    : 6.14.9
   OS     : Linux 5.4

Any help will be highly appreciated. Thanks in advance.

Recommended topics

Hot tags