Angular 2 app not loading with Cordova on iOS

1
votes

I am facing serious problems while developing an Angular 2 app and building it for iOS with Cordova. It kind of works when building and running it for Android (still there are some problems with routes on startup), but I can not get it running on iOS.

The app is developed with Angular 2.0.0-rc.1 and angular-cli.

Whenever I build the app with xcode for iOS, the app is stucked on Angular 2 loading - i guess it is a problem with the bootstrapping process, but I am not sure.

In console, I can see that it fails to load the component css files, like this error shows:

[Error] EXCEPTION: Failed to load file:///var/mobile/Containers/Bundle/Application/F325C057-2287-463A-ABF6-DB68944C63D9/Dooda.app/www/app/notifications/notifications.component.css
logError
logGroup
call
(anonyme Funktion)
invoke (zone.js:323)
onInvoke
invoke (zone.js:322)
run (zone.js:216)
(anonyme Funktion) (zone.js:571)
invokeTask (zone.js:356)
onInvokeTask
invokeTask (zone.js:355)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
invoke (zone.js:426)

The path is correct, it just can not proceed to load the files. In my iindex.html, I can see that the Container is empty, thus the Angular 2 stuff is not loaded there.

I have set the base href in index as following:

<base href=".">

If you need further information or code, please ask.

Have anyone faced the same issue and can help me here? I am really clueless what to do now, I have no idea why the file loading fails here.

Any help would be highly appreciated! Thanks in advance!

3
ioscordovaangular
Does changing the base to <base href="/"> help? – null canvas
Hi AngJobs, unfortunately not - I already had it like that before, but no luck – Honigkucheneinhorn

3 Answers

3
votes

The solution is very simple, just use 

<base href="./">

in index.html file. It will work

0
votes

had the same problem with Cordova / Ionic on iOS. It was caused by an empty file.

I had a component without template markup, but only with SCSS for the :host-selector.

It seems like Safari doesn't recognize any empty files via XHR and encounters a 404-like error, which breaks the application. To fix that, I removed all empty files from my components. After that it did work for me on iOS-emulator and native iPhone 6.

0
votes

I am not sure whether it is related with base url for you problem.

In the normal, we will build and package the app with angular-cli into www dir. And after that, you should not see separate css files anymore. Because all css files will be packed in one file, based on your webpack setting.