Angular-cli: Angular app not working on iOS/OS X

[brentco]

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 development server (webpack-dev-server) requires iOS 10+ (or Safari 10+) due to its use of const/let in its live-reload client code.

As to the safari 10.1 issue, as a test, can you try ng serve with the --prod --sourcemap options and also with the --no-sourcemap option (no --prod)?

[brentco]

Ah thanks for the information. I have checked the different combinations of ng serve and these are my results (for the OS X safari):

prod? | source-map? | client error
------------ | ------------- | ---------------
Yes | Yes |
Yes | No | Same as above
Yes | Not defined | Same as above
Not defined | Yes | Angular CLI says source-map is unknown (probably without prod) but the error becomes about SockJS again.

I have tried building the app using ng build --prod and then hosting it with http-server using http-server ./dist and then the angular app works on OS X but then weirdly enough, it works on Safari AND Chrome on iOS(9).

[UbermenschDeveloper]

Hi @clydin!
So, what should one do to make the app work for Safari <10?

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

[UbermenschDeveloper]

@brentco 's solution worked as a charm.
Thnx.

I have tried building the app using ng build --prod and then hosting it with http-server using http-server ./dist and then the angular app works on OS X but then weirdly enough, it works on Safari AND Chrome on iOS(9).

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

[clydin]

The production build issues have been corrected as of CLI 1.5.5/1.6.0.
Unfortunately, the ES2015 limitation of the live-reload client is due to webpack-dev-server. If this is important to a project, opening an issue there could be an option. Otherwise, if using Safari, 11+ is required to fully use the live reload capabilites.

[angular-automatic-lock-bot[bot]]

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