Angular apps not working in Safari v15 due to `ReferenceError`

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

Don’t known / other

Is this a regression?

No

Description

When we open angular.io website in safari browser in mac then it giving blank page and if we do refresh that page than also it’s giving blank page and when we open inspect element from developer open in safari browser and do refresh that page then it open perfectly so it’s an issue I have provided screenshot.

• This when I open angular.io link in Safari browser in Mac.

• This when I open inspect element of safari browser and still website is not working.

• And at last this after opening Inspect element I refresh the page then website is working properly.

Please provide a link to a minimal reproduction of the bug

https://angular.io

Please provide the exception or error you saw

No response

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

No response

Anything else?

No response

[devversion]

Hi all, I’ve tracked down the root cause. It’s a very subtle bug that got fixed in Safari v16. And yes, the bug doesn’t reproduce when the devtools are opened. Here is how I tracked it down:

1. Initially loaded the page with devtools closed, saw an error message like in https://github.com/angular/angular-cli/issues/24355. The stack did not point to anything useful- especially since source maps can hide issues.
2. Disabled source maps, closed dev-tools and re-freshed. Now the error looked like this:
   • The error did not point to something useful either. Not even close to something with $o. Safari stack trace was incorrect.
3. Rebuilt angular.io with optimization: false. Fortunately the issue was reproducable even with unoptimized build (making debugging easier):
   • 
4. Now that the culprit JS code was finally visible- more investigation was possible.
   • The variable accessed is clearly in scope. See notification_component_c0.
   • There is some weird syntax for the static fields generated by the Angular compiler. e.g. notice static #_ = this.ecmp = X
5. I initially thought the private identifier static fields are the problem, so I tried to understand where these are coming from:
   • Looked through Angular CLI’s compilation pipeline and looked for Babel plugins.
   • There is a Babel plugin generating these for older browsers not supporting static {} blocks.
   • Surprisingly Angular compiler does not generate static {} blocks- but static fields.
   • Turned out TypeScript converts static fields to static blocks if useDefineForClassFields = false (which is the case in Angular v15 w/ target: 2022)
   • I’ve tried to isolate the problem and create a minimal reproduction, but couldn’t reproduce. Since the issue was already very hard to track down (given devtools cannot being opened)- I’ve still assumed something odd could go on in Safari…
   • Looked through WebKit bug tracker and commits but couldn’t find anything- except for private identifier methods fix in the parser— could have been related.
   • Ultimately I concluded that static private identifier fields are not the issue.
6. I’ve tried to “tamper” the main bundle and modify parts to see what the issue could be, slowly removing parts of the code snippet in (3).
   • Tracked it down to “still” happen when there is code like (0, x).method() in the static field initializer. In other scenarios, the error quickly was gone- almost seeming like it’s non-deterministic.
   • My assumption was that it’s a scope tracking issue in the WebKit JS parsing.
   • Looked through Webkit commits and found a fix (in the reasonable time frame of Safari v15.6 -> v16)
   • Issue description seems very similar/matching: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
   • https://bugs.webkit.org/show_bug.cgi?id=236843
   • TypeScript will generate such expressions to ensure correct this context when it invokes methods. e.g. for animations
   • 

TL;DR: Angular emits valid JavaScript that is subject to a bug in Safari that got fixed in Safari v16. The issue does not reproduce when devtools are opened- and the Safari bug is related to scope tracking in the WebKit JS parsing. https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2. All Angular applications could be affected, but hard to notice/narrow down

We will look into downleveling static fields for Safari <16 so that Angular apps remain compatible with that browser, if selected via browserslist (or the default one).

[kbrilla]

Same hapenning on iOS 15.4. Don’t know about devtools though. But we had similar issue and It was connected to app being PWA - the issue that it did work when dev tools were open.