Ionic-framework: Ionic 4 importing BrowserAnimationsModule causes IE not responding

[Gorshtak]

Bug Report

Ionic version: 5.2.3*
Ionic/Angular 4.6.0

Current behavior:
After importing BrowserAnimationsModule on fresh started ionic project using template _tabs_, i tried to open the Application on IE11 and it caused IE11 to freeze.
Windows reported that IE11 is not responding, therefore the console was also not responding.

Expected behavior:
I also did steps to reproduce using _blank_ starting template,
and even though i imported BrowserAnimationsModule it didn't crash on IE11,
Why is the crashing happening when using _tabs_ starting template and not _blank_?

Steps to reproduce:

1. Create new ionic project using tabs as starting template (using ''ionic start'' in terminal)
2. In package.json, section "dependencies" add "@angular/animations": "7.2.2"
3. Run npm i
4. In app.module.ts, section "imports" add BrowserAnimationsModule after BrowserModule
   BrowserAnimationsModule should be imported from @angular/platform-browser/animations

Related code:

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json:

{
  "name": "tabs",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/animations": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.6.6",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (D:\work\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.1
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. Are you able to reproduce this in a standalone Angular application (without Ionic installed)?

[Gorshtak]

No, angular starts normally on IE11 with BrowserAnimationsModule added to app.module.ts.
Also, they have dependencies needed by BrowserAnimationsModule,
in other words "@angular/animations" is added to package.json by default.
Ionic doesn't this package by default.

[manucorporat]

Can you further debug the issue and share the errors you are getting?

[liamdebeasi]

Also here's a repo I made to reproduce the issue: https://github.com/liamdebeasi/ionic-ie-browser-module

Unfortunately IE becomes unresponsive almost immediately, so I can't access any developer tools.

[BorntraegerMarc]

Can you further debug the issue and share the errors you are getting?

Hi @manucorporat I'm working on the same team as @Gorshtak

after some debugging we noticed that also on a _blank_ starter project IE11 is hard crashing (after importing BrowserAnimationsModule).

We are not getting any errors or at least we can not see them. As the whole browser freezes (and doesn't allow us opening dev tools) debugging is really difficult.

How would you suggest to proceed to debug this issue?

[BorntraegerMarc]

Even importing NoopAnimationsModule is causing IE11 to crash: imports: [BrowserModule, NoopAnimationsModule, IonicModule.forRoot(), AppRoutingModule],

EDIT: I can confirm that the order of importing NoopAnimationsModule does not matter. Always same behavior

EDIT2: If you start a fresh angular project and only import IonicModule.forRoot() then the bug is reproducible on IE11

[BorntraegerMarc]

any update on this?

[Scombr0]

I'm having the same issue, did you find any way to solve it @BorntraegerMarc, @Gorshtak?

[BorntraegerMarc]

I'm having the same issue, did you find any way to solve it @BorntraegerMarc, @Gorshtak?

Not yet. We didn't really have time to research yet though.

[liamdebeasi]

Thanks for the issue. I am going to close this as we recently released Ionic Framework v5 which dropped support for IE11 and older versions of Edge. Moving forward, Ionic Framework v4 will only receive critical security patches.

[BorntraegerMarc]

Ionic v5 drops support for IE11? Is there a blogpost or something similar, explaining this rationale?

[liamdebeasi]

We do not have a blog post discussing dropping support for IE11, but our documentation was updated to reflect this change: https://ionicframework.com/docs/intro/browser-support.

IE11 usage is relatively small and did not support many of the modern Web APIs that most browsers support in today. This required us to bundle lots of polyfills with Ionic apps on IE11 which resulted in slow apps with a less than optimal user experience. Dropping support for IE11 and older versions of Edge allows us to take advantage of newer Web APIs in order to provide a better application experience.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.