angular-cli generated application don't work on IE10

Created on 22 Nov 2017  路  14Comments  路  Source: angular/angular-cli

Versions

Angular CLI: 1.5.2
Node: 8.9.1
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

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/weak-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 for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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';

Repro steps

  • Step 1: Generate application with angular-cli
    > ng new myapp
    > ng serve

Observed behavior

Give this error on IE10
SCRIPT1002: Syntax error 
vendor.bundle.js, line 462 character 1

Desired behavior

Should work with IE10.

Mention any other details that might be useful (optional)

This application works well with Firefox, Chrome and IE11

investigation 2 (required) bufix
Source
picture paulozagaloneves
👍6

Most helpful comment

When solving a compatibility problem in Safari, this issue seems to be fixed as well.

Solution comes from this stackoverflow post Default Angular-CLI Project Fails in Safari - culprit strict mode?

It seems an issue in webpack-dev-server (used under the hood by @angular/cli) which uses ES6 features and is not being transpiled.
A temporary workaround is to use an older version for webpack-dev-server by installing it and copying it manually to the local @angular/cli directory:

yarn add [email protected] --dev
cp -R ./node_modules/webpack-dev-server ./node_modules/@angular/cli/node_modules/
ng serve
picture jonashao on 28 Nov 2017
😄3 👍3 ❤1 🎉1

All 14 comments

@paulozagaloneves can you provide your pollyfills.ts file?

deebloo picture deebloo on 22 Nov 2017
👍1

I have a same problem on IE11

screen-ie11-console

polyfills.ts

/***************************************************************************************************
 * 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/weak-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`.

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

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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
 */

import 'reflect-metadata';

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

/**
 * rxjs
 */
import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/operator/timeInterval';
import 'rxjs/add/operator/toPromise';

package.json dependencies

 "dependencies"   : {
    "@angular/animations"              : "^5.0.0",
    "@angular/common"                  : "^5.0.0",
    "@angular/compiler"                : "^5.0.0",
    "@angular/core"                    : "^5.0.0",
    "@angular/forms"                   : "^5.0.0",
    "@angular/http"                    : "^5.0.0",
    "@angular/platform-browser"        : "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server"         : "^5.0.0",
    "@angular/router"                  : "^5.0.0",
    "@ngrx/effects"                    : "^4.1.0",
    "@ngrx/store"                      : "^4.1.0",
    "@ngrx/store-devtools"             : "^4.0.0",
    "core-js"                          : "^2.4.1",
    "jquery"                           : "3.2.1",
    "material-design-icons"            : "^3.0.1",
    "materialize-css"                  : "^0.100.2",
    "ngrx-store-localstorage"          : "^0.2.4",
    "rxjs"                             : "^5.5.2",
    "zone.js"                          : "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli"                    : "1.5.0",
    "@angular/compiler-cli"           : "^5.0.0",
    "@angular/language-service"       : "^5.0.0",
    "@types/jasmine"                  : "~2.5.53",
    "@types/jasminewd2"               : "~2.0.2",
    "@types/node"                     : "~6.0.60",
    "codelyzer"                       : "~3.2.0",
    "http-server"                     : "^0.10.0",
    "jasmine-core"                    : "~2.6.2",
    "jasmine-spec-reporter"           : "~4.1.0",
    "karma"                           : "~1.7.0",
    "karma-chrome-launcher"           : "~2.1.1",
    "karma-cli"                       : "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine"                   : "~1.1.0",
    "karma-jasmine-html-reporter"     : "^0.2.2",
    "ngrx-store-freeze"               : "^0.2.0",
    "protractor"                      : "~5.1.2",
    "ts-node"                         : "~3.2.0",
    "tslint"                          : "~5.7.0",
    "typescript"                      : "~2.4.2"
  },
Svarozic picture Svarozic on 22 Nov 2017

I got the same problem on IE10, but it works fine in IE11.

Version

Angular CLI: 1.5.3
Node: 9.0.0
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.3
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

image

polyfills.ts:

/** 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/weak-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 for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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';

however when installed classlist.js, web-animations-js and intl, it got this warning:

warning " > [email protected]" has incorrect peer dependency "@angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0".

image

jonashao picture jonashao on 23 Nov 2017
👍2

My 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/weak-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 for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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';
paulozagaloneves picture paulozagaloneves on 24 Nov 2017

Facing same issue in IE10.

tarasbobak picture tarasbobak on 24 Nov 2017

When solving a compatibility problem in Safari, this issue seems to be fixed as well.

Solution comes from this stackoverflow post Default Angular-CLI Project Fails in Safari - culprit strict mode?

It seems an issue in webpack-dev-server (used under the hood by @angular/cli) which uses ES6 features and is not being transpiled.
A temporary workaround is to use an older version for webpack-dev-server by installing it and copying it manually to the local @angular/cli directory:

yarn add [email protected] --dev
cp -R ./node_modules/webpack-dev-server ./node_modules/@angular/cli/node_modules/
ng serve
jonashao picture jonashao on 28 Nov 2017
😄3 👍3 ❤1 🎉1

@paulozagaloneves Have you tried adding web-animations-js ?

yogeshgadge picture yogeshgadge on 30 Nov 2017

This seems to be an issue in IE9, IE10 and Safari. It essentially means that none of these browsers will be able to run CLI 1.5+ projects. Are there any plans to fix this soon? I'd hate to have to rollback to CLI 1.4 and Angular 4.4 because of this issue.

mattytommo picture mattytommo on 4 Dec 2017

The error is due to the development server's live reload client code (from webpack-dev-server) which requires basic ES2015 support. This will not affect builds (production or otherwise) of the application as the live reload code is not present. Live reload functionality can be disabled, if desired, via the --no-live-reload option. Due to a defect in safari 10, enabling source maps on ng serve (the default) results in a similar error. This does not affect Safari 11.

clydin picture clydin on 4 Dec 2017
👍3 👎2

@clydin when you do production build everything is passing but when you serve it with NGINX for example it has the same issue but builded

Stradivario picture Stradivario on 19 Feb 2018

@Stradivario This issue pertains to the live-reload development server functionality and not deployment of production builds

clydin picture clydin on 19 Feb 2018

Hi there. I have the same issue but on a different row.

I am working on the newest Angular 6 version. I uncomment and reinstall all dependencies connected with the polyfills.ts file. Everything was working fine at the beginning. Even after I install Angular Flex Layout.
I have this issue only for IE 11. Everything works fine on Edge.

This is the issue that I have.
image

Thank you!

AlexKirilov picture AlexKirilov on 11 Jun 2018

I'm also having this issue when including old .js code and running UpgradeModule -- everything works except for the .js code is not transpiled to es5 for ie11 -- IE throws syntax error as it attempts to parse "class Foo".... interestingly enough the TypeScript (.ts) files do get transpiled...

as a quick fix i tried renaming all .js to .ts (via a simple unix command) but I could not get my tsconfig.json to respect
"alwaysStrict: false"
and
"strictPropertyInitialization": false

under compilerOptions...
(modified both tsconfig.json and tsconfig.app.json)

Therefore the only hope was to manually convert .js to .ts and add a ton of :any types all over....BLEH

Any ideas?

Latest angular-cli...

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.4

benjaminmatthews picture benjaminmatthews on 2 Jul 2018

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

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

NCC1701M picture NCC1701M  路  3Comments
jbeckton picture jbeckton  路  3Comments
ericel picture ericel  路  3Comments
naveedahmed1 picture naveedahmed1  路  3Comments
delasteve picture delasteve  路  3Comments