question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

angular-cli generated application don't work on IE10

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
jonashaocommented, Nov 28, 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 webpack-dev-server@2.7.1 --dev
cp -R ./node_modules/webpack-dev-server ./node_modules/@angular/cli/node_modules/
ng serve
5reactions
clydincommented, Dec 4, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I support Internet Explorer in an Angular 8 application?
According to this issue reply. You need to follow the following steps. Create a new tsconfig tsconfig.es5.json next to tsconfig.json with ...
Read more >
How To Fix Your Angular App When It's Not Working in IE11
While Internet Explorer 11 has been deprecated for a while now, ... There can be numerous reasons why your Angular application is not...
Read more >
Angular and Internet Explorer - InDepth.Dev
First use Angular CLI to generate and serve a starter application: ... To get Internet Explorer working we need to do the following...
Read more >
Angular and Internet Explorer - Medium
You installed the Angular CLI and used it to generate your new application. But, when you try to view it in Internet Explorer...
Read more >
Browser support - Angular
The suggested polyfills are the ones that run full Angular applications. ... If you are not using the CLI to create your projects,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found