Angular-cli: 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 (https://github.com/angular/angular-cli/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 thatSCRIPT438: 对象不支持“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"/>



md5-9002965721143b7ee8ce8b079bcdfea8




//index.html   I also import some JS from https://angular.io/guide/browser-support


md5-05e796c264ad1f23cbd94bf61156cbba


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



md5-9002965721143b7ee8ce8b079bcdfea8




//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';



md5-9002965721143b7ee8ce8b079bcdfea8




//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';.

[tamdao]

@mafredri does not work. :D

[tamdao]

any solution?

[kravda]

get the same problem "@angular/cli": "1.4.4"
In console of ie9 :
TypeError: Object doesn't support property or method 'apply'
polyfills:
import 'core-js/es6/symbol';
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/date';
import 'core-js/es6/regexp';
import 'core-js/es6/object';
import 'core-js/es6/set';
import 'core-js/es6/weak-set';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/array';
import 'core-js/es6/string';
import 'core-js/es6/typed'

[chikakow]

import 'core-js/es6/symbol';
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/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/typed';
import 'core-js/es6/array';
import 'core-js/es6/object';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'intl';

Having the same problem on IE9. We are trying to use Angular for our major e-commerce site and have lots of customers who are still on IE9. Anyone found the solution for this?

[daehongKo]

keyword: Korean, resolved, zone.js, 0.8.4

저의 경우 IE9에서 subscribe를 호출할 때마다 TypeError: 'apply'가 발생 했습니다.

해당 문제를 zone.js 버전을 변경하여 해결을 했습니다.

result

// old package.json
 "dependencies": {
  ...
  "zone.js": "0.8.12"
  ...
 }

// change package.json
 "dependencies": {
  ...
  "zone.js": "^0.8.4"
  ...
 }

이렇게 변경하고난 후 부터 정상 작동하였습니다.

[anysite]

Subscribe here.
By this comment I suspect maybe this issue would be found in PathLocationStrategy

[steveblue]

I am not a user of the CLI and this issue still happens for me in IE9. This error may be from the @angular source.

[steveblue]

@anysite @tamdao @dricogit @SteveDrakey I just updated to 5.2.3 and the issue is gone now when using {useHash: true} in IE9. No TypeError, Routing works. Can you verify?

[idasbiste]

I've faced this issue as well.
Using ng serve I tried to dig around the unminified JS files and noticed the references of the apply function were being used in the console object. IE9 doesn't expose the console object unless the developer tools are open. I've added this polyfill - https://github.com/paulmillr/console-polyfill - and it seems to have solved the problem.
Still, this might have only masked the actual problem/bug but might be of help for others.

[steveblue]

console-polyfill does not solve the problem for our build

[blackrek]

have same problem.
solutions with fix version of zone.js or/and use console-polyfill did not help.
but if add (and in advance install package web-animations-js)
import 'web-animations-js';
have new error:
SCRIPT5007: Object expected in main-client
any ideas?

[steveblue]

You have to omit web-animations-js from IE9 completely @blackrek

[yus-h]

@steveblue any chance you can post your polyfills.ts?
I also have the same issue. I've updated to 5.2.3, omitted web-animations-js, set the zone.js version to 0.8.4, have set the routing to {useHash:true}, added console-polyfill, yet I'm still seeing the error "object doesnt support property or method apply" on IE9

[steveblue]

Are you also injecting BrowserAnimationsModule @bog3yman? Here is an issue for that https://github.com/angular/angular/issues/21083

[yus-h]

I was initially injecting BrowserAnimationsModule, but I've commented out/removed all references to that and component animation after seeing your issue.

Unfortunately I'm still getting the same error though even after that.

[steveblue]

You are probably missing a polyfill then. The necessary polyfill are listed in ^ issue @bog3yman

[MohammedHelly]

I also have the same problem,
The following code works fine for IE11, but IE9 raise Access is denied and SCRIPT438: Object doesn't support property or method 'apply'
addCase() {
let headers = new HttpHeaders();

headers.append('Content-Type', 'application/json');
headers.append('cache-control', 'no-cache');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
headers.append('Access-Control-Allow-Origin', '*');
this.http.post(this.url,this.tempJSON,{headers: headers})
.subscribe(
    (val) => {
        console.log("POST call successful value returned in body",  val);
    },
    response => {
        console.log("POST call in error", response);
    },
    () => {
        console.log("The POST observable is now completed.");
});

}

[steveblue]

I've verified Angular 6.0.0 works in IE9 with the exception of Animations (which doesn't have a polyfill for IE9). If you are still facing an issue, its probably a polyfill that is missing for your particular use case.

I found a good formula for diagnosing IE9 issues. TraceKit will print stack traces in IE9.

You need TraceKit to be injected in the or bundled appropriately with Webpack as a dependency.

 <script src="/node_modules/tracekit/tracekit.js"></script>

You can hook into the Angular ErrorHandler in your app.module.ts:

declare let TraceKit: any;

TraceKit.report.subscribe(function yourLogger(errorReport) {
  console.log(errorReport.message);

  errorReport.stack.forEach(function (err) {

    if (err.func) {
      console.log(err.func);
    }
    if (err.context) {
      console.log(err.context.join())
    }
    console.log('ERROR ' + err.url + ' [' + err.line + ']');

  })
  //console.dir(JSON.stringify(errorReport, null, 4));
  //send via ajax to server, or use console.error in development
  //to get you started see: https://gist.github.com/4491219
});

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
    constructor() { }
    handleError(error) {
        // your custom error handling logic
        if (navigator.userAgent.indexOf("MSIE 9.0;") === -1) {
            console.error(error);
        } else {
            TraceKit.report(error);
        }

    }
}

Then inject this new Class as a provider:

providers: [{
                    provide: ErrorHandler,
                    useClass: CustomErrorHandler
                }

Using TraceKit I was able to easily find the problem behind Object doesn't support property or method 'apply' and then patch IE9 with the appropriate polyfill.

[hudzenko]

Hey Guys,

Just fixed this stuff for myself and want to update you with my experience as it can be very helpful..

To make Angular 6.0.0 run for IE9:

• In /src/polyfills.ts you should uncomment (and install):
  import 'core-js/es6/reflect'; import 'web-animations-js'; // Runnpm install --save web-animations-js.
  Note uncommenting // import 'web-animations-js'; caused for me strange errors, but it is unneeded if you are not using angular animations
• Set useHash to true for your route:
  imports: [RouterModule.forRoot(routes, {useHash: true})],
• Also due to console is undefined in IE9 by default (application was broken untill you opened dev tools to enable console) and thanks too @idasbiste comment here:
  Install https://github.com/paulmillr/console-polyfill and import import 'console-polyfill'; to polyfills.ts

[mgechev]

@hudzenko that's a fantastic description, thanks for sharing! Closing the issue here. In case the steps that @hudzenko shared do not work for you please open a new issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}