Menu
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.
732
Strict mode improves maintainability and helps you catch bugs ahead of time. Additionally, strict mode applications are easier to statically analyze and can help the ng update command refactor code more safely and precisely when you are updating to future versions of Angular.
Disable strict checks entirely by setting strictTemplates: false in the application's TypeScript configuration file, tsconfig. json. Disable certain type-checking operations individually, while maintaining strictness in other aspects, by setting a strictness flag to false.
To opt into the strict mode, you need to create a new Angular CLI app, specifying the --strict flag: The command above will generate a workspace with the following settings enabled on top of the defaults: Strict mode in TypeScript, as well as other strictness flags recommended by the TypeScript team.
Enabling Angular strict mode through the Angular CLI will enable TypeScript strict mode in your app also as enable some Angular strict checks. Angular Strict template checking is enabled via strictTemplates in tsconfig. json . It'll force the Angular compiler to check tons of things.
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
The ES6 features of the newer versions of the dev server cause this, but more specifically the live reloading feature.
If you pass the --no-live-reload flag you will be able to test on older devices without the need to downgrade anything.
For example: ng serve --no-live-reload
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
