typescript - Default Angular-CLI Project Fails in Safari - culprit strict mode?

Question

I have installed the most-recent version of the angular-cli and created a brand new project (ng new my-app). This creates the always-stylish "Welcome to App" with the Angular logo and links to Tour of Heroes, the CLI Documentation, and the Angular blog. I can ng serve this and access it locally on my Windows machine using Chrome and Firefox.

Where this gets strange is when I try to access the same locally hosted app through Browserstack. When I hit it from a Mac running Safari 11, all works as expected.

However, when I try to access via a Mac device (iPad for example) running Safari 10+, the app will not load and I get the error message: "SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode". The error message is tied to a location in my vendor.bundle.js (in an eval).

From my reading, it appears that older versions of Safari don't play nice with consts when strict mode is enabled. But, I am hoping there is a work-around.

How are others handling this? I am not an angular-cli expert, so if there is an obvious solution, my apologies for not seeing it.

Any assistance would be greatly appreciated.

Answer 1

I have the same issue. It seems an issue in webpack-dev-server (used under the hood by @angular/cli) which uses ES6 features and is not being transpiled.

This is only a problem in older versions of Safari, but updating Safari is not a solution when you want to test on older Safari versions.

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/
./node_modules/.bin/ng serve