Angular 16 migration: TypeError: Cannot read properties of undefined (reading 'getElementById')

[MarcoGlauser]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Migrating from angular 15.2.9 to 16.0.0 we encounter the stack trace below when running the universal server (dev & prod build).
spa dev mode works as expected without any noticeable issues.
Following the stack trace it's this piece of code that is encountering an issue:

function retrieveTransferredState(doc,appId){const script=doc.getElementById(appId+"-state");

The error occurs whether we provide client hydration or not.
We use TransferState throughout the application to send data from ssr to the client.

EnvironmentService, that seems to be the root of this error, injects TransferState in the constructor.

I don't quite know how to drill down on this issue, since this seems to be happening very early in app lifecycle. Any Idea on how to create a reproduction would be highly appreciated.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

TypeError: Cannot read properties of undefined (reading 'getElementById')
    at retrieveTransferredState (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2325653)
    at Object.initTransferState [as factory] (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2324438)
    at R3Injector.hydrate (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2320111)
    at R3Injector.get (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2318370)
    at injectInjectorOnly (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2186545)
    at Object.ɵɵinject (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2186715)
    at Object.EnvironmentService_Factory [as factory] (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:27288)
    at R3Injector.hydrate (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2320111)
    at R3Injector.get (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2318370)
    at injectInjectorOnly (/home/marco/FollowAlice/referral/frontend/dist/referral/server/main.js:1:2186545)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.0.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-luxon-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker, youtube-player

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@nguniversal/builders           16.0.0
@nguniversal/express-engine     16.0.0
@schematics/angular             16.0.0
typescript                      4.9.5

Anything else?

No response

[pkozlowski-opensource]

cc @alan-agius4

[alan-agius4]

The line mentioned is failing https://github.com/angular/angular/blob/2419c486ad8a3129d27ade6852e33d1435512da1/packages/core/src/transfer_state.ts#LL75C50-L75C61, this is because getDocument can return undefined (might make sense to change this to a throw.)

angular/packages/core/src/render3/interfaces/document.ts

Lines 44 to 56 in 2419c48

	export function getDocument(): Document {
	if (DOCUMENT !== undefined) {
	return DOCUMENT;
	} else if (typeof document !== 'undefined') {
	return document;
	}
	// No "document" can be found. This should only happen if we are running ivy outside Angular and
	// the current platform is not a browser. Since this is not a supported scenario at the moment
	// this should not happen in Angular apps.
	// Once we support running ivy outside of Angular we will need to publish `setDocument()` as a
	// public API. Meanwhile we just return `undefined` and let the application fail.
	return undefined!;
	}

The question however is why in your case the document is not being set on the server, which happens when using the ServerModule.

angular/packages/platform-server/src/server.ts

Lines 68 to 80 in 2419c48

	function _document(injector: Injector) {
	const config: PlatformConfig|null = injector.get(INITIAL_CONFIG, null);
	let document: Document;
	if (config && config.document) {
	document = typeof config.document === 'string' ? parseDocument(config.document, config.url) :
	config.document;
	} else {
	document = getDOM().createHtmlDocument();
	}
	// Tell ivy about the global document
	ɵsetDocument(document);
	return document;
	}

I would start by looking at how the application is bootstrapped on the server and verify that ServerModule is being imported.

[MarcoGlauser]

Thank you for the hints! I managed to triage the error.
The root cause is our Custom ErrorHandler that injects the EnvironmentService. We pass version + environment information through TransferState to the ErrorHandler to be able to annotate our error reports client side.

I've created a minimal reproduction here:
https://github.com/MarcoGlauser/16-migration-repro
Specifically this commit to see where the issue happens:
MarcoGlauser/16-migration-repro@4225768

I managed to fix the issue for us by marking DOCUMENT as dependency to the provider in question:

deps: [DOCUMENT]

However, this was not required with previous versions of Angular.

[alan-agius4]

Digging some more, the problem here is that TransferState has an implicate dependency on DOCUMENT. Which is not defined in https://github.com/angular/angular/blob/2419c486ad8a3129d27ade6852e33d1435512da1/packages/core/src/transfer_state.ts#LL75C50-L75C61. The main reason for this is that the DOCUMENT token is defined in @angular/common, and hence why getDocument is being used here.

Let me have a chat with @AndrewKushnir later today about this.