Issue
I have an Angular application that I want to convert in Android application thanks to Capacitor. I installed Capacitor on my Angular Project (project with routing). Here is the versions I use :
"@angular-devkit/build-angular": "^14.0.4",
"@angular/cli": "~14.0.4",
"@angular/compiler-cli": "^14.0.0",
"@capacitor/cli": "^3.6.0",
"@capacitor/android": "^3.6.0",
"@capacitor/core": "^3.6.0"
In my Angular.json, I have this configuration :
"outputPath": "dist/our_thing",
"index": "src/index.html",
"main": "src/main.ts",
When I created capacitor.config.ts, I set webDir to 'src', the directory where I have index.html.
In my index.html, I have this :
<body>
XXXX
<app-root></app-root>
</body>
And in my app.component.html, I have this :
YYYY
<div class="center-class">
ZZZZ
<app-login></app-login>
</div>
My problem is that when I convert the application to Android with Capacitor, on my application, I only see "XXXX" and not "YYYY" or "ZZZ" I put in my app.component. Just like if he could not find app-root in index.html. Any ideas why ? Here is the result:
On my Angular app I see everything I shall see:
The way my project is:
Solution
webDir should be the directory where your code is built, src folder contains the code before building it.
Si according to your config, it should match the outputPath.
Answered By - jcesarmobile
Answer Checked By - David Goodson (JavaFixing Volunteer)