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

animations

Is this a regression?

Yes

Description

Hey folks,

I've tried to update my application to the new version 15 and it suddenly stopped working on my iPhone.
After debugging for a while I figured out that the issue was caused by the animations used.

I've created a minimal reproduction example on StackBlitz, but unfortunately the issue can not be seen in the preview editor of StackBlitz. It seems that the editor influences the execution of the app. To create a local reproduction example you can simply create a new project via ng new and add an animation to the app.component.ts.

animations: [
  trigger('example', [
    state('void', style({ opacity: 1 })),

    transition(':enter', [
      style({
        opacity: 0,
      }),
      animate('750ms 100ms ease-out'),
    ]),

    transition(':leave', [
      animate('250ms ease-in', style({
        opacity: 0,
      })),
    ]),
  ]),
],

The content of the animation doesn't really matter, the issue occurs with every animation I tried

The issue is really confusing.
As soon as I open the DevTools (via Remote-Debugging) while the application boots the issue no longer occurs.
But if I open the DevTools after the app crashed, I can see the error, which I added in "Please provide the exception or error you saw".

This is the code from main.js:352:

[...]
dependencies: [
  _angular_common__WEBPACK_IMPORTED_MODULE_1__.NgSwitch,
  _angular_common__WEBPACK_IMPORTED_MODULE_1__.NgSwitchCase,
  _angular_common__WEBPACK_IMPORTED_MODULE_1__.NgSwitchDefault
],
styles: [...]

So far I was only able to reproduce the error on my iPhone 7 (Safari), currently running iOS 15.7.1.
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.3 Mobile/15E148 Safari/604.1

In Safari on MacOS or iPadOS it works without any issues.
Server-Side-Rendering with Universal is also uneffected.

I don't know if that helps but in my main application the error which initially crashed my app was this (also main.js):
ReferenceError: Can't find variable: _c3

const _c3 = ['*']
[...]
class ImageComponent {
  [...]
  static #_2 = this.ɵcmp = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_6__['ɵɵdefineComponent']({
    type: ImageComponent,
    [...]
    ngContentSelectors: _c3,
    decls: 7,
    [...]
  })
[...]

Let me know if I can assist with more information or debugging regarding this issue!

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-n7ay9w?file=package.json,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

[Error] ReferenceError: Can't find variable: _angular_common__WEBPACK_IMPORTED_MODULE_1__
	(anonyme Funktion) (main.js:352)
	(anonyme Funktion) (main.js:62)
	__webpack_require__ (runtime.js:23)
	(anonyme Funktion) (main.js:383:92)
	__webpack_require__ (runtime.js:23)
	(anonyme Funktion) (main.js:417:93)
	__webpack_require__ (runtime.js:23)
	(anonyme Funktion) (runtime.js:57)
	(anonyme Funktion) (main.js:428)
	webpackJsonpCallback (runtime.js:145)
	webpackJsonpCallback
	Modulcode (main.js:2)
	evaluate
	moduleEvaluation
	(anonyme Funktion)
	promiseReactionJob

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

Angular CLI: 15.0.0
Node: 16.18.1
Package Manager: npm 8.19.2
OS: darwin x64

Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

No response