Angular-cli: New angular-cli app not working on iphone 4s

Created on 26 Sep 2017 · 5Comments · Source: angular/angular-cli

[x] bug report

Versions.

@angular/cli: 1.4.0
node: 6.10.3
os: darwin x64
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.0
@angular/compiler-cli: 4.4.3
typescript: 2.2.2

macOS El Capitan
Safari 9.1.1 (11601.6.17)
Apple iphone 4s Version 8.4

Repro steps.

npm install -g angular-cli

ng new dummy

cd dummy

update angular-cli.json to host ng server to different host

"defaults": {
"serve": {
"host": "YOUR_NET_MASK"
}
}

Follow this steps to debug your iphone safari on mac safari - https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

ng serve

Switch to safari on both mac and iphone and navigate to your net mask which is added to angular-cli.json.

The log given by the failure.

Error in safari console
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (polyfills.js.map, line 0)
[Error] TypeError: pre,template,textarea,script,style is not iterable!
exports (polyfills.bundle.js:857:84)
(anonymous function) (polyfills.bundle.js:394)
Set (polyfills.bundle.js:2256)
../../../compiler/@angular/compiler.es5.js (vendor.bundle.js:27931)
__webpack_require__ (inline.bundle.js:55)
../../../platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js (vendor.bundle.js:68017:96)
__webpack_require__ (inline.bundle.js:55)
../../../../../src/main.ts (main.bundle.js:144:112)
__webpack_require__ (inline.bundle.js:55)
(anonymous function) (main.bundle.js:187)
__webpack_require__ (inline.bundle.js:55)
webpackJsonpCallback (inline.bundle.js:26)
global code (main.bundle.js:1)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (InnerSubscriber.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app.component.js.map, line 0)
[Error] [WDS] Disconnected!
error
close (vendor.bundle.js:12091)
onclose (vendor.bundle.js:12305)
dispatchEvent (vendor.bundle.js:6698)
(anonymous function) (vendor.bundle.js:7536)
(anonymous function)
invokeTask (polyfills.bundle.js:2968)
runTask (polyfills.bundle.js:2735)
invokeTask (polyfills.bundle.js:3042)
invoke (polyfills.bundle.js:3031)
timer (polyfills.bundle.js:4439)

Desired functionality.

The app should be visible on iphone and mac safari but it's not working on the smaller device which is iphone 4s. It's working fine on iphone 5 and above.

Source

psk11

Most helpful comment

Take a look at polyfills.ts file. In my case uncommenting the following solved the problem:

import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

3amprogrammer on 23 Oct 2017

👍6

All 5 comments

Different browsers might need different polyfills. Please have a look at https://angular.io/guide/browser-support for the supported browsers. From that error message it seems your browser doesn't support iterables perhaps. Also have a look at src/polyfills.ts for instructions on how to use polyfills there.

filipesilva on 27 Sep 2017

Take a look at polyfills.ts file. In my case uncommenting the following solved the problem:

import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

3amprogrammer on 23 Oct 2017

👍6

@3amprogrammer Thanks it's working for me

psk11 on 30 Oct 2017

I am getting the following error on Safari only on using google drive upload

[object Object]
runTask (polyfills.bundle.js:11161)
invokeTask (polyfills.bundle.js:111464)
invoke (polyfills.bundle.js:111453)
timer (polyfills.bundle.js:13005)

I have uncommented the imports in polyfills.ts already
Also added:
import 'intl';
import 'intl/locale-data/jsonp/en';

Kindly help me out here.