Ivy Problem | E/Capacitor: Unable to open asset URL: http://localhost/...

[ksyro98]

I'm creating an ionic capacitor app and I am having some issues in the Android version.

Description

Specifically at first I was having the following error when building the app (ionic build):

Error: ./node_modules/@angular-devkit/build-angular/src/webpack/es5-jit-polyfills.js
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: HostResourceLoader: loader(/home/kon/Documents/Programming/Ionic/SenseCity/src/app/consultations/consultation-comment-card/consultation-comment-card.component.scss) returned a Promise
    at AdapterResourceLoader.load (/home/kon/Documents/Programming/Ionic/SenseCity/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:114:23)
    at ComponentDecoratorHandler.analyze (/home/kon/Documents/Programming/Ionic/SenseCity/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:218:63)
    at TraitCompiler.analyzeTrait (/home/kon/Documents/Programming/Ionic/SenseCity/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:345:40)
    at analyze (/home/kon/Documents/Programming/Ionic/SenseCity/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:296:58)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async Promise.all (index 0)
    at async Promise.all (index 44)
 @ multi ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js zone.js/dist/zone-legacy ./node_modules/@angular-devkit/build-angular/src/webpack/jit-polyfills.js ./node_modules/@angular-devkit/build-angular/src/webpack/es5-jit-polyfills.js ./src/polyfills.ts polyfills-es5[3]

After some research I concluded that this was a problem with Angular Ivy, so I added "enableIvy": false in the angularCompilerOptions of tsconfig.json file and I was able to build the code with no errors.

Following that I called:

ionic cap copy
ionic cap sync
ionic cap open android

and after succesfully opening Android Studio I ran the app on my phone (the app compiled and installed with no errors).

However when I ran the app it would show the splash screen and then freeze in a white screen. On the android studio Run tab and on the Log tab the following error occurred:

D/Capacitor: Handling local request: http://localhost/consultation-comment-card/consultation-comment-card.component.scss
E/Capacitor: Unable to open asset URL: http://localhost/consultation-comment-card/consultation-comment-card.component.scss
E/Capacitor: Unable to open asset URL: http://localhost/consultation-comment-card/consultation-comment-card.component.scss
E/Capacitor: Unable to open asset URL: http://localhost/consultation-comment-card/consultation-comment-card.component.scss

Since it's very similar to the error before I'm pretty sure that they are related. Maybe disabling ivy on the tsconfig.json file is not disabling it on the android generated code. I'm not sure however if this is a bug, how to reprduce it or what I can do to fix the issue or work around it.
Any help would be really appreciated!

Capacitor Version

The output of the npx cap doctor command is:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.6
  @capacitor/core: 2.4.6
  @capacitor/android: 2.4.6
  @capacitor/electron: 2.4.6
  @capacitor/ios: 2.4.6

Installed Dependencies:

  @capacitor/ios not installed
  @capacitor/cli 2.4.5
  @capacitor/android 2.4.5
  @capacitor/core 2.4.5
  @capacitor/electron not installed

[success] Android looking great! 👌

[ksyro98]

I managed to solve the problem (it was a bug in my code).
I'm presenting the solution here in case someone else faces the same problem in the future.

Specifically in one of my HTML files the following line was added by mistake:
<link rel="stylesheet" href="../consultation-comment-card/consultation-comment-card.component.scss">

This was for some reason causing the build to fail when Angular Ivy was used.
The solution was simply to remove this line.