Description
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
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