Ionic-cli: [ionicv4 beta 2 and beta 3] Starter templates do not work

Created on 20 Aug 2018 · 11Comments · Source: ionic-team/ionic-cli

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (D:\work\cordova\projects\ionic4\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.3.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 3 other plugins)

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3 (D:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : d:\androidsdk

Describe the Bug
Simply trying to create and emulate a starter app template results in a white screen, the chrome debug console says:

index.html:9 The key "viewport-fit" is not recognized and ignored.
file:///runtime.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///polyfills.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///cordova.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///styles.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///main.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///assets/icon/favicon.png Failed to load resource: net::ERR_FILE_NOT_FOUND

Steps to Reproduce
Steps to reproduce the behavior:

ionic start --type=angular
follow instructions and select a tab or side menu template
ionic cordova platform add android
ionic cordova emulate android

Expected Behavior
Starter template creates a working app

Additional Context

This is not working in either beta2 or beta3

Forum post: https://forum.ionicframework.com/t/ionic-4-beta-basic-templates-wont-work/138647

Also, running ionic cordova plugin ls gives an error…

> cordova plugin ls
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.0.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
net.js:704
    throw new TypeError(
    ^

TypeError: Invalid data, chunk must be a string or buffer, not object
    at WriteStream.Socket.write (net.js:704:11)
    at process.<anonymous> (D:\work\cordova\projects\ionic4\node_modules\ionic\bin\ionic:9:63)
    at emitTwo (events.js:126:13)
    at process.emit (events.js:214:7)
    at emitPendingUnhandledRejections (internal/process/promises.js:108:22)
    at process._tickCallback (internal/process/next_tick.js:189:7)

triage

Source

ionitron-bot[bot]

Most helpful comment

Updating cordova-plugin-ionic-webview to the latest version fixed this for me:
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview

"Still" not quite a fix for me, however, updating the cordova and cordova-android and _then_ updating the ionic webview _has_ fixed it for me, so as the OP of the bug, I consider this actually closed, even though ionic closed it months back without adequate resolution

To be more succinct, here's what I did:

npm uninstall -g cordova
npm install -g cordova
ionic cordova platform remove android
ionic cordova platform add android
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview
ionic cordova emulate android

This now works (incidentally for the keen eyed, my "plugin ls" also works now too :) )

andmar8 on 14 Dec 2018

🎉3 ❤2 👍1

All 11 comments

@deniscesar @andmar8 This is odd... cordova-plugin-ionic-webview should use the local HTTP server on the device for Android as of 2.0.0. It looks like it's still using the file:// protocol on your devices/emulators. Is there any special configuration in config.xml? See https://github.com/ionic-team/cordova-plugin-ionic-webview#configuration

imhoffd on 8 Oct 2018

@dwieeb
No changes were made to the sidemenu of the ionic initiation model

Made steps
1 ionic start app-teste sidemenu --type=angular
2 ionic cordova run android

Follows the config.xml file

<?xml version='1.0' encoding='utf-8'?> <widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>MyApp</name> <description>An awesome Ionic/Cordova app.</description> <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <preference name="ScrollEnabled" value="false" /> <preference name="android-minSdkVersion" value="19" /> <preference name="BackupWebStorage" value="none" /> <preference name="SplashMaintainAspectRatio" value="true" /> <preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3000" /> <platform name="android"> <allow-intent href="market:*" /> <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" /> <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" /> <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" /> <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" /> <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" /> <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" /> <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" /> <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" /> <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" /> <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" /> <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" /> <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" /> <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" /> <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" /> <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" /> <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" /> <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" /> <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <icon height="57" src="resources/ios/icon/icon.png" width="57" /> <icon height="114" src="resources/ios/icon/[email protected]" width="114" /> <icon height="40" src="resources/ios/icon/icon-40.png" width="40" /> <icon height="80" src="resources/ios/icon/[email protected]" width="80" /> <icon height="120" src="resources/ios/icon/[email protected]" width="120" /> <icon height="50" src="resources/ios/icon/icon-50.png" width="50" /> <icon height="100" src="resources/ios/icon/[email protected]" width="100" /> <icon height="60" src="resources/ios/icon/icon-60.png" width="60" /> <icon height="120" src="resources/ios/icon/[email protected]" width="120" /> <icon height="180" src="resources/ios/icon/[email protected]" width="180" /> <icon height="72" src="resources/ios/icon/icon-72.png" width="72" /> <icon height="144" src="resources/ios/icon/[email protected]" width="144" /> <icon height="76" src="resources/ios/icon/icon-76.png" width="76" /> <icon height="152" src="resources/ios/icon/[email protected]" width="152" /> <icon height="167" src="resources/ios/icon/[email protected]" width="167" /> <icon height="29" src="resources/ios/icon/icon-small.png" width="29" /> <icon height="58" src="resources/ios/icon/[email protected]" width="58" /> <icon height="87" src="resources/ios/icon/[email protected]" width="87" /> <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" /> <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" /> <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" /> <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" /> <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" /> <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" /> <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" /> <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" /> <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" /> <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" /> <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" /> <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" /> <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" /> <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" /> </platform> <plugin name="cordova-plugin-splashscreen" spec="5.0.2" /> <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" /> <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" /> <plugin name="cordova-plugin-whitelist" spec="^1.3.3" /> <plugin name="cordova-plugin-statusbar" spec="^2.4.2" /> <plugin name="cordova-plugin-device" spec="^2.0.2" /> </widget>

deniscesar on 8 Oct 2018

This is still an issue. any solution?

moda20 on 5 Dec 2018

Read ref: the workaround is:

Other Information:

A base path change fixes the issue but it seems to break angular router navigation.
<base href="." />

Note: It works with --live-reload: the device is able to reach the files through the network.

somq on 5 Dec 2018

I am having the same problem. is breaking angular routes so I can't use the work around.

Ionic:

ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.15-0
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics : 0.7.5
@angular/cli : 7.0.7
@ionic/angular-toolkit : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.1, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 12 other plugins)

System:

Android SDK Tools : 25.2.3
ios-deploy : 1.9.2
ios-sim : 6.1.2
NodeJS : v8.9.1 (/usr/local/Cellar/node/8.9.1/bin/node)
npm : 5.5.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

I would greatly appreciate any guidance.

aikaterine on 10 Dec 2018

Updating my packages fixed the issue for me.

Ionic:

ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.17
@angular-devkit/build-angular : 0.11.2
@angular-devkit/schematics : 7.1.2
@angular/cli : 7.1.2
@ionic/angular-toolkit : 1.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 14 other plugins)

System:

Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 6.1.2
NodeJS : v8.9.1 (/usr/local/Cellar/node/8.9.1/bin/node)
npm : 5.5.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

aikaterine on 11 Dec 2018

Updating cordova-plugin-ionic-webview to the latest version fixed this for me:

npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview

Rift-Walker on 14 Dec 2018

👍1

Updating cordova-plugin-ionic-webview to the latest version fixed this for me:
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview

To be more succinct, here's what I did:

npm uninstall -g cordova
npm install -g cordova
ionic cordova platform remove android
ionic cordova platform add android
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview
ionic cordova emulate android

This now works (incidentally for the keen eyed, my "plugin ls" also works now too :) )

andmar8 on 14 Dec 2018

🎉3 ❤2 👍1

@andmar8 - what Android API does that work with? On the emulator I had no issues with API 27, with your fix above it started working on API 25, still no luck on API 23 (blank white screen). This is with sidemenu, blank, and tabs templates, ionic and cordova and templates all freshly installed.

brianlmerritt on 21 Jan 2019

27 I believe, if I get some time I'll try out down to kitkat (19)

andmar8 on 6 Feb 2019

Updating cordova-plugin-ionic-webview to the latest version fixed this for me:
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview
"Still" not quite a fix for me, however, updating the cordova and cordova-android and _then_ updating the ionic webview _has_ fixed it for me, so as the OP of the bug, I consider this actually closed, even though ionic closed it months back without adequate resolution

To be more succinct, here's what I did:
npm uninstall -g cordova
npm install -g cordova
ionic cordova platform remove android
ionic cordova platform add android
npm i cordova-plugin-ionic-webview@^2.1.3
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview
ionic cordova emulate android
This now works (incidentally for the keen eyed, my "plugin ls" also works now too :) )

Thank you very much!!!!! after 3 hours i got it