angular-cli: @angular-devkit/build-angular:server with optimization: true fails in 16.1.4. 16.1.1 works well

Command

run

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.1.1

Description

Exception appears on run main.js with node 16 after build with optimization using @angular-devkit/build-angular @16.1.4 with @angular-devkit/build-angular @16.1.1 works well

Minimal Reproduction

1 buid the project: ng build --configuration=production && ng run app:server:production Works correctly 2 Run the main.js present exception node dist/app/server/main.js

TypeError: Right-hand side of 'instanceof' is not an object
    at insertElement (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:490276)
    at insertHTMLElement (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:489998)
    at before_head_mode (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:527950)
    at HTMLParser.htmlparser.insertToken (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:489022)
    at emitSimpleTag (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:494203)
    at data_state (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:494241)
    at scanChars (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:485784)
    at Object.parse (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:483851)
    at Object.exports2.createDocument (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:721803)
    at Object.exports2.createWindow (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:722306)

The problem disappears if in angular.json optimization is set to false --> Not a real fix or if downgrade to “@angular-devkit/build-angular”: “^16.1.1”,

Final configuration: `Angular CLI: 16.1.4 Node: 16.20.0 Package Manager: npm 8.19.4 OS: darwin x64

Angular: 16.1.4 … animations, cdk, cli, common, compiler, compiler-cli, core … forms, language-service, localize, material … platform-browser, platform-browser-dynamic, platform-server … router

Package Version

@angular-devkit/architect 0.1601.4 @angular-devkit/build-angular 16.1.4 @angular-devkit/core 16.1.4 @angular-devkit/schematics 16.1.4 @nguniversal/builders 16.1.1 @nguniversal/express-engine 16.1.1 @schematics/angular 16.1.4 rxjs 7.8.1 typescript 5.1.6`

Exception or Error

TypeError: Right-hand side of 'instanceof' is not an object
    at insertElement (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:490276)
    at insertHTMLElement (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:489998)
    at before_head_mode (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:527950)
    at HTMLParser.htmlparser.insertToken (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:489022)
    at emitSimpleTag (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:494203)
    at data_state (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:494241)
    at scanChars (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:485784)
    at Object.parse (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:483851)
    at Object.exports2.createDocument (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:721803)
    at Object.exports2.createWindow (/Users/juanmaldonado/dev/ekilu-web-16/dist/app/server/main.js:1:722306)

Your Environment

`Angular CLI: 16.1.4
Node: 16.20.0
Package Manager: npm 8.19.4
OS: darwin x64

Angular: 16.1.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.4
@angular-devkit/build-angular   16.1.4
@angular-devkit/core            16.1.4
@angular-devkit/schematics      16.1.4
@nguniversal/builders           16.1.1
@nguniversal/express-engine     16.1.1
@schematics/angular             16.1.4
rxjs                            7.8.1
typescript                      5.1.6`

Anything else relevant?

No response

About this issue

Original URL
State: open
Created a year ago
Reactions: 4
Comments: 35 (5 by maintainers)

Links to this issue

Angular SSR error - Right-hand side of 'instanceof' is not an object - Stack Overflow

Most upvoted comments

@Wycza, thanks I managed to replicate it.

alan-agius4 on Aug 10, 2023

My resolution was to rewrite any components that were using non angular safe methods of using document or window etc.

IE: use Document from angular/core, or if you’re looking to get an element use ViewChild and a setter, etc.

I’ve ripped out libs that don’t do this or if they are user-only contexts, wrapped the loading of the module in a platform check.

Routhinator on Jul 27, 2023

As a workaround for anyone stuck with this, I dropped in ssr-window instead of domino and things seem to be working now. It’s an alternative to downgrading devkit for now.

Example:

import { getWindow, getDocument } from 'ssr-window';
;(global as any).window = getWindow()
;(global as any).document = getDocument()
;(global as any).navigator = {
  language: 'en',
}

I’m a little concerned about this as a long-term workaround as the ssr-window project has been idle longer than domino, but I note that domino itself has also been lacking updates for 2 years now.

Ultimately I should probably get on with doing platform checks to gate loading anything dependent on window/document/navigator and remove the need for this.

Routhinator on Jul 15, 2023

could this be released as a standalone Angular-domino package?

I guess this answers the question: https://github.com/angular/angular/blob/ec2d6e7b9c2b386247d1320ee89f8e3ac5e5a0dd/package.json#L118C5-L118C96

Tried that with Angular 16.2 and seems to be working fine! "domino": "https://github.com/angular/domino.git#9e7881d2ac1e5977cefbc557f935931ec23f6658",

dchicurel on Nov 15, 2023

For anyone that runs into this issue but still needs to use Domino, Angular has a forked Domino repository which works with v17s SSR: https://github.com/angular/domino It’s not on NPM though, so you will have to install it through git.

geferon on Nov 15, 2023

@ahmadallw Im facing the same issue with @angular-devkit/build-angular v16.2.1, but as mentioned in this thread, downgrading to @angular-devkit/build-angular 16.1.1 solves the problem.

D-Biela on Sep 11, 2023