CODEWITHSUNDEEP
ioscordovaangular
Honigkucheneinhorn
Honigkucheneinhorn

Reputation: 11

Angular 2 app not loading with Cordova on iOS

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!

Upvotes: 1

Views: 1812

Answers (3)

Jinz...
Jinz...

Reputation: 101

The solution is very simple, just use 

<base href="./">

in index.html file. It will work

Upvotes: 3

Mavlarn
Mavlarn

Reputation: 3883

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.

Upvotes: 0

Ben
Ben

Reputation: 11

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.

Upvotes: 0

Related Questions