angular-cli generated application don't work on IE10 #8596

paulozagaloneves · 2017-11-22T13:41:55Z

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

The text was updated successfully, but these errors were encountered:

deebloo · 2017-11-22T14:31:05Z

@paulozagaloneves can you provide your pollyfills.ts file?

Svarozic · 2017-11-22T14:46:49Z

I have a same problem on IE11

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"
  },

jonashao · 2017-11-23T02:39:19Z

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

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 " > codelyzer@3.2.2" has incorrect peer dependency "@angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0".

paulozagaloneves · 2017-11-24T14:26:19Z

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

tarasbobak · 2017-11-24T16:01:33Z

Facing same issue in IE10.

jonashao · 2017-11-28T07:03:04Z

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 webpack-dev-server@2.7.1 --dev
cp -R ./node_modules/webpack-dev-server ./node_modules/@angular/cli/node_modules/
ng serve

yogeshgadge · 2017-11-30T21:29:43Z

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

mattytommo · 2017-12-04T09:29:28Z

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.

clydin · 2017-12-04T18:23:36Z

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.

Stradivario · 2018-02-19T15:09:56Z

@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

clydin · 2018-02-19T15:57:24Z

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

AlexKirilov · 2018-06-11T14:34:30Z

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.

Thank you!

benjaminmatthews · 2018-07-02T19:18:26Z

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

angular-automatic-lock-bot · 2019-09-08T08:41:29Z

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

filipesilva assigned Brocco Nov 23, 2017

filipesilva added needs: investigation Requires some digging to determine if action is needed type: bug/fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Nov 23, 2017

CedN mentioned this issue Dec 12, 2017

vendor.bundle.js syntax error on IE10 Windows 7 #8844

Closed

clydin mentioned this issue Jan 18, 2018

fix(@angular/cli): remove ES2015 live-reload requirement #9270

Merged

Brocco closed this as completed in #9270 Jan 18, 2018

ray525 mentioned this issue Jan 26, 2018

[IE 10 compatibility ] leftstick/angular2-baidu-map#45

Closed

angular-automatic-lock-bot bot unassigned Brocco Sep 8, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular-cli generated application don't work on IE10 #8596

angular-cli generated application don't work on IE10 #8596

paulozagaloneves commented Nov 22, 2017 •

edited

deebloo commented Nov 22, 2017

Svarozic commented Nov 22, 2017

jonashao commented Nov 23, 2017

paulozagaloneves commented Nov 24, 2017 •

edited

tarasbobak commented Nov 24, 2017

jonashao commented Nov 28, 2017 •

edited

yogeshgadge commented Nov 30, 2017

mattytommo commented Dec 4, 2017

clydin commented Dec 4, 2017

Stradivario commented Feb 19, 2018

clydin commented Feb 19, 2018

AlexKirilov commented Jun 11, 2018 •

edited

benjaminmatthews commented Jul 2, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

angular-cli generated application don't work on IE10 #8596

angular-cli generated application don't work on IE10 #8596

Comments

paulozagaloneves commented Nov 22, 2017 • edited

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

deebloo commented Nov 22, 2017

Svarozic commented Nov 22, 2017

polyfills.ts

package.json dependencies

jonashao commented Nov 23, 2017

Version

polyfills.ts:

paulozagaloneves commented Nov 24, 2017 • edited

tarasbobak commented Nov 24, 2017

jonashao commented Nov 28, 2017 • edited

yogeshgadge commented Nov 30, 2017

mattytommo commented Dec 4, 2017

clydin commented Dec 4, 2017

Stradivario commented Feb 19, 2018

clydin commented Feb 19, 2018

AlexKirilov commented Jun 11, 2018 • edited

benjaminmatthews commented Jul 2, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

paulozagaloneves commented Nov 22, 2017 •

edited

paulozagaloneves commented Nov 24, 2017 •

edited

jonashao commented Nov 28, 2017 •

edited

AlexKirilov commented Jun 11, 2018 •

edited