Angular app not working on iOS/OS X

Versions

Angular

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
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

iOS

iOS version: 9.3.5 Safari: 601.1? --> User agent: Mozilla/5.0 (iPad; CPU OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1 Chrome: 62.0.3202.70

OS X

Chrome: 60.0.3112.113 Mac OS: 10.12.6 Safari: 10.1.2 (12603.3.8)

Windows

Chrome: 62.0.3202.94 Firefox Quantum: 58.0b4

Repro steps

• ng new repro-app --dir=.
• ng serve --host 0.0.0.0 -o
• Add some static text to src/index.html (I wrote “This gets served but not the Angular app.”)
• Connect locally (Windows 10 with Firefox Quantum) --> app works
• Connect via iPad 2 with iOS 9.3.5 and latest Safari/Chrome available for that version --> App doesn’t work

Observed behavior

On Windows 10 with Firefox Quantum, the app displays correctly. However, when accessing the app via iOS, no matter which browser, it does not show the application, instead it only shows the text written above. Hooking this up with the remote console of Safari, the error varies from version to version of the angular(-cli) packages.

iOS Safari:

iOS Chrome does not show it either but I cannot see the logs there.

OS X Safari:

OS X Chrome works.

Additional information

I have included the project, but I removed the node_modules and the .git folder.

Please note that this isn’t specific to the default angular app. None of them work. I used the default one to show that it happens even with that. With another angular project with the same versions, I’ve tried enabling all polyfills but that doesn’t help, unless I did it wrong!

[clydin]

The Unexpected keyword 'const'. error is due to the live-reload client code from webpack-dev-server and is only present within the application when running ng serve. The --no-live-reload option should also allow Safari 9 to function and not need the extra http server; although without updates from code changes. Builds (ng build) of an application will not suffer from this problem.

Note, however, that any scripts defined in .angular-cli.json that contain ES2015+ features will cause similar problems. This is most likely rare at this point but could shift moving forward.

@devoto13 Thanks for the added details. Those were the two concerns I was hoping to get some additional information on via the tests. And thank you @brentco for the assistance.

[devoto13]

The error in Safari 10 with prod target is caused by UglifyJS + Safari 10 bug. To workaround it one need to pass safari10: true to mangle in UglifyJSPlugin. See more details here and docs. If CLI is willing to accept such PR I can prepare it. This is fixed in Safari 11.

The error with SockJS in Safari 10 is problem in webpack-dev-server + eval-source-map. The workaround is to disable source maps. Relevant issue. This issue is also fixed in Safari 11.