Simple Angular 2 Cordova app not working on android emulator

Question

I'm developing on windows 10 using VS code, I have android studio setup with android emulator nexus 5 API 24

I used angular-cli to create a new angular 2 app:

 ng new angular2-cordova-test

In the project folder I used Cordova cli to create a new Cordova project:

 cordova create cordova com.example.cordova cordova
 cordova platform add android --save
 cordova build

From root directory I built the angular 2 app into the Cordova www directory

 ng build --prod --output-path=cordova/www/

When I run app from cordova directory into emulator:

 cordova emulate android

I got Loading... in the emulator, and app in not working

Android Emulator

I think this has something to do with ES6 and emulator webview

how can I fix this? thanks in advance

Answer 1

Actually, I asked this question rephrased here:

https://stackoverflow.com/questions/40470766/angular-2-and-cordova

which is closed for weired reasons!! so the answer there is in the comments

The problem was very trivial, the HTML formed by the angular 2 project contained:

<base href="/">

this is what caused the problem, just remove it

also in the way to solve the problem I learned how to:

• debug the app with chrome dev tools on emulator
• debug the app with chrome dev tools on my phone
• create signed APKs

it was a good experiment

update:

after getting into a situation of building angular + cordova + routing, Parth Ghiya's hint is a must

I changed the meta tag to <base href="."> and everything including routing worked just fine

Answer 2

Just use

if u remove the base href then your routes wont work in angular 2.

if u want to build, do

ng build --prod --base-href .

Answer 3

I used this to set the base: <base href="./">. This worked for me. But you can also use <base href="file:///android_asset/www/" /> for android.

Finally i have a fully helpful suggestion to use the Chrome remote debugger to debug your mobile app. The console it tells everything.