IE9 TypeError 'apply'

[dricogit]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.1
node: 7.9.0
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

Repro steps.

ng build --aot --prod
tested on a real webserver

The log given by the failure.

In console of ie9 :
TypeError: Object doesn't support property or method 'apply'

Desired functionality.

Works on ie9

Mention any other details that might be useful.

I tested with polyfills.ts ( core-js/es6 + classlist ).
Also tested with shim.min.js, Typed Array, Blob, FormData from https://angular.io/docs/ts/latest/guide/browser-support.html

[sumitarora]

@dricogit It's only issue in IE9? Is it working in other browsers?

[dricogit]

Works on ie10, ie11, firefox and chrome

[filipesilva]

There's some other ie9 issues (#4772) but it doesn't seem to be what you're experiencing, since you get it on a real web server.

[SteveDrakey]

I am also getting this but, if I start with a very simple app created from Angular CLI it works fine, but as soon as I introduce routeing it stops working with this error.

[SteveDrakey]

@filipesilva I have done a little more investigation 👍

repro

Create App
ng new ie9test --routing

Edit Polyfills for IE9

Add two Components
ng g c Test1
ng g c Test2

Add them to the routeing fix up imports etc.

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'test1',
        component: Test1Component
      },
      {
        path: 'test2',
        component: Test2Component
      }
    ]
  }
];

This will not work in IE9, you will see a big long list of ###### in the URL and the TypeError: Object doesn't support property or method 'apply' in the IE Console

To fix, edit app-routing.module and change the code as

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
    ],
  exports: [RouterModule]
})

Of course, it could be a different issue 😄

[jianqiao0313]

My app also not work in IE9.
Versions are similar to @dricogit .
When I choose a file,IE9 report an error that SCRIPT438: 对象不支持“apply”属性或方法 vendor.bundle.js, 行19446 字符13
SCRIPT438: Object doesn't support property or method 'apply' vendor.bundle.js, Line 19446 Char13

My app code:

//upload-cert.component.ts
//choose file function
 selectedFileOnChanged(event:any) {`
    this.formErrors.certFormError = '';
    this.certName = event.target.value;
    this.certFile = event.target.files[0];

    if(this.certFile.size > 1024*1024*8){
      this.formErrors.certFormError = '文件大小上传大于8Mb。'
    }
    else if(this.certFile.type != "application/x-x509-ca-cert" && this.certFile.type != "application/x-pkcs12"){
      this.formErrors.certFormError = '必须上传.cer或.pfx后缀的证书';
    }
  }

//upload-cert.component.html
 <input type="file" (change)="selectedFileOnChanged($event)" id="upload_input"/>

//index.html   I also import some JS from https://angular.io/guide/browser-support
<script src="assets/js/shim.min.js"></script>
  <script src="assets/js/classList.min.js"></script>
  <script src="assets/js/Blob.js"></script>
  <script src="assets/js/formdata.js"></script>
  <script src="assets/js/Intl.min.js"></script>
  <script src="assets/js/typedarray.js"></script>
  <script src="assets/js/core.min.js"></script>
  <script src="assets/js/es6-shim.min.js"></script>
  <script src="assets/js/shims_for_IE.js"></script>
  <script src="assets/js/system-polyfills.js"></script>

//polyfills.ts
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
 import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
 import 'intl/locale-data/jsonp/en';

//app.module.ts   I use HASH route
//angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

//bootstrap
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

//fido
import { AppComponent } from './app.component';
import { LeftMenuComponent } from './common/left-menu/left-menu.component';
import { RightTabComponent } from './common/right-tab/right-tab.component';
import { NavTabComponent } from './common/nav-tab/nav-tab.component';
import { TabContactService } from './common/service/tab-contact.service';
import { ModalService } from "./common/modal/modal.service";
import { Test1Module } from './test1/test1.module';
import { Test2Module } from './test2/test2.module';
import { Test3Module } from './test3/test3.module';
import { WelcomePageModule } from './welcome-page/welcome-page.module';

//routes
import { appRoutes } from './app.routes';

//modal-component
import { ModalComponent } from "./common/modal/modal.component";

//3rd-module
import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
  declarations: [
    AppComponent,
    LeftMenuComponent,
    RightTabComponent,
    NavTabComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpModule,
    Test1Module,
    Test2Module,
    Test3Module,
    WelcomePageModule,
    FileUploadModule,
    NgbModule.forRoot(),
    RouterModule.forRoot(appRoutes , { useHash : true })

  ],
  providers: [ TabContactService, ModalService ],
  entryComponents: [ ModalComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

So Why not work in IE9 ?

[tamdao]

I have tried to uncomment all POLYFILLS (Angular 4), but I got the same issue on IE11. Here are error logs:

• The error on console log: Unable to get property 'apply' of undefined or null reference
• The error on catch: object doesn't support property or method 'json'

The code throw the error:

post(body: any, url: string = this.url): Promise<any> {
    let headers = new Headers({
      'Content-Type': 'application/json'
    });

    return this._http
      .post(url, JSON.stringify(body), { headers: headers })
      .toPromise()
      .then(res => res.json())
      .catch((err) => this.handleError(err));
  }

[tamdao]

any solution?

[mafredri]

@tamdao

From the code samples posted here I see they are at least missing a WeakMap polyfill (import 'core-js/es6/weak-map';). Also, I've found that web-animations-js breaks IE9. Also make sure you have the TypedArray/Blob/FormData polyfills. For TypedArray, I recommend import 'core-js/es6/typed';.