I have recently set up a tabs Ionic 8 project to try out the new features. I have added Capacitor to the project and want to test out Live Reload with Android. While building and running the app on Android without Live Reload works, doing so with Live Reload enabled gives me either one of two results. This is with an Android emulator and hardware device. I get a “Webpage not available” WebView displayed with various errors like net::ERR_EMPTY_RESPONSE, net::ERR_CONNECTION_RESET, or net::ERR_SOCKET_NOT_CONNECTED:
I get a similar error page when I try to open the same private IP and port in a web browser on the same host machine:
I have tried clearing out my node_modules, www, and android folders and rebuilt multiple times. Here is the output of ionic info:
Ionic:
Ionic CLI : 7.2.0 (/Users/user/.nvm/versions/node/v20.12.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.0.1
@angular-devkit/build-angular : 17.3.6
@angular-devkit/schematics : 17.3.6
@angular/cli : 17.3.6
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : 6.0.0
@capacitor/core : 6.0.0
@capacitor/ios : 6.0.0
Utility:
cordova-res : 0.15.4
native-run : 2.0.1
System:
NodeJS : v20.12.2 (/Users/user/.nvm/versions/node/v20.12.2/bin/node)
npm : 10.5.0
OS : macOS Unknown
capacitor.config.js:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.app.name',
appName: 'AppName',
webDir: 'www/browser'
};
export default config;
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {
"@ionic/angular-toolkit:page": {
"styleext": "scss",
"standalone": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "www",
"index": "src/index.html",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": [],
"browser": "src/main.ts"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"schematicCollections": ["@ionic/angular-toolkit"],
"analytics": false
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
},
"@angular-eslint/schematics:application": {
"setParserOptionsProject": true
},
"@angular-eslint/schematics:library": {
"setParserOptionsProject": true
}
}
}
Warning message in output of ionic build:
Output location: /Users/user/AppName/www
Application bundle generation complete. [7.563 seconds]
▲ [WARNING] The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]
node_modules/@stencil/core/internal/client/index.js:2749:2:
2749 │ `./${bundleId}.entry.js${BUILD24.hotModuleReplacement && hmrVe...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] 20 rules skipped due to selector errors:
:host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
.ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
:host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
.ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir
A bit more info is that I have switched to ESBuild for Angular as recommended by the Ionic VSCode extension. I believe ESBuild changes the webapp build directory from www to www/browser, so I wonder if that’s related. Maybe the Live Reload feature is not properly finding the index.html in the new location. If there is any more info I can provide, please let me know.