Illegal invocation calling window.getComputedStyle

[leifmarcus]

I included the PrebotModule in an Angular 12 project and I found that the following line breaks, because the call to getComputedStyle is Illegal.

preboot/src/lib/api/event.replayer.ts

Line 146 in 022ce61

const gcs = this.getWindow().getComputedStyle;

The getComputedStyle object is set here:

preboot/src/lib/api/event.replayer.ts

Line 21 in 022ce61

getComputedStyle: window.getComputedStyle,

• I'm submitting a ...

• bug report
• feature request

• Which parts of preboot are affected by this issue?

• server side
• client side
• inline
• build process
• docs
• tests

• What is the current behavior?
  Currently it throws an error and breaks the swapping of the root application.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by

• What is the expected behavior?
  Should not fail when running in the browser. I would suggest to add .bind(window) to the declaration.

• Please tell us about your environment:

• Browser: [Chrome 92.0.4515.159]
• Language: [TypeScript 4.3 | ES6/7 | ES5 ]
• OS: [Mac OS X]

[kvirrik]

maybe this is caused by angular v.12.2.x. I have the same problem, after updating angular version

[jakubsobel]

I have the same problem, after updating from Angular 11.2.5 to 12.2.0.

[boban100janovski]

Solved it by using this hack.

Install this package "replace-in-file",
Then create a node script to execute before build.

`const replace = require('replace-in-file');
const options = {
files: './node_modules/preboot/fesm2015/preboot.js',
from: 'gcs(serverView).getPropertyValue('display') || 'block';',
to: 'serverView ? (gcs(serverView).getPropertyValue('display') || 'block') : 'block';'
};

try {
const results = replace.sync(options);
console.log('Replacement results:', results);
}
catch (error) {
console.error('Error occurred:', error);
}
`

Then add a new command to package.json
"fix_minify": "node ./node_scripts/fixMinify.js"

Use it before the build
"build:ssr": "npm run fix_minify && ng build --configuration production --localize && ng run URProject:server:production

I think the issue is caused because Angular 12 uses another minifier, that is "Terser", before it was Uglify i think.

[maxisam]

It is caused by 12.2.0. It was fine with 12.1.4.

[jsaguet-betclic]

I encountered the same issue when migrating to 12.2.5.

@CaerusKaru, @alan-agius4 have you seen this issue ?

For information:
No error is present with "@angular-devkit/build-angular": "12.2.0-next.0"
Error occurs starting from "@angular-devkit/build-angular": "12.2.0-next.2"

Tested with all other packages set to 12.2.5

[dragonflypl]

I have the same issue after migration to latest angular 12.2.x

[ns-rickvdmeij]

Can confirm downgrading back to 12.1.4 solves the issue for me now, waiting for an update

[boban100janovski]

Seems like "Preboot" is not maintained anymore

[lares83]

any news about this issue?

[CaerusKaru]

Does anyone have a minimal reproduction we can investigate? We're in the process of cleaning up the repo and bringing it up to date, but it's hard to say what the issue is here without a firm reproduction.

[jakubsobel]

Minimal reproduction: https://github.com/jakubsobel/angular12-preboot-issue
I've created a new angular app using ng new. Then ng add @nguniversal/express-engine and then followed https://github.com/angular/preboot#installation.
Running npm run build:ssr and then npm run serve:ssr is causing Illegal invocation:

[morghim]

any updates on this ?

[internalsystemerror]

Having the same issue here on 12.2.x.

[lares83]

@CaerusKaru any update about this issue?