I’ve created a new app using ionic start appname blank --type=angular and made a few very small changes. For some reason, the header area appears to be in dark mode, but only in iOS, and only most of the time (if I make an edit to the HTML it will sometimes go back to normal).

Screen Shot 2020-03-25 at 12.01.33 PM1668×1488 136 KB

The only changes I’ve made to the blank template were to create a few pages using ionic g and create a split-pane menu. (See code below.)

discover.page.html

// discover.page.html (my default page)
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Discover</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Discover</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>
      Start with Ionic
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://ionicframework.com/docs/components"
        >UI Components</a
      >
    </p>
  </div>
</ion-content>

app.component.html

// app.component.html
<ion-app>
  <ion-split-pane contentId="main">
    <ion-menu contentId="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-menu>

    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

ionic info

Ionic:

   Ionic CLI                     : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:


   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res (update available: 0.11.0) : 0.8.1
   native-run                             : not installed

System:

   NodeJS : v13.2.0 (/usr/local/Cellar/node/13.2.0/bin/node)
   npm    : 6.13.6
   OS     : macOS Catalina

Any help or insights would be appreciated. Thanks! --E

Thanks, I will try it and let you know how it went.

Btw: 1) after every change in my Ionic Code I need to delete platforms and then start from $cap sync?
2) Is it correct, I should change io.ionic.starter for my project name everywhere, as I wrote in my post?

I am talking about the server’s headers, to the client one.

AWS is an hosting service, not a framework (except if you use lambda but I don’t think so)

Is it possible to detect rotation in an Ionic4 app without actually rotating the entire app?
I’m using this:

this.screenOrientation.unlock();
this.screenOrientation.onChange().subscribe(ev => {
        this.screenOrientation.lock(
          this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY
        );
        // Do other stuff
});

makes the rotation jump between the two which looks bad. Been fighting this for a while, any ideas are appreciated

Just so you know for me setTimeout worked!

setTimeout(() => {
  this.form.get(FormControlName).setValue(value);
}, 100)

My Ionic Info:

Ionic CLI                     : 6.2.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework               : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics    : 8.3.25
@angular/cli                  : 8.3.25
@ionic/angular-toolkit        : 2.2.0

Hi all ! Could anyone suggest please, what I need to do to debug app in browser ? I try to do like this, but app dose not paused.

function myBrokenFunction() {
debugger;
// do other stuff
}

I am trying to run my ionic app on an Android device using npx cap open android.
When I run on my desktop (npm serve), it displays fine, but the app is not performing the same on my Android device (i.e. parts of the home component aren’t being displayed)

Here is my console output, can someone please tell me why this is happening:

03/25 17:32:00: Launching ‘app’ on samsung SM-G965F.
$ adb shell am start -n “io.ionic.starter/io.ionic.starter.MainActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Connected to process 22381 on device ‘samsung-sm_g965f-2410169c6d0c7ece’.
Capturing and displaying logcat messages from application. This behavior can be disabled in the “Logcat output” section of the “Debugger” settings page.
E/Zygote: isWhitelistProcess - Process is Whitelisted
E/Zygote: accessInfo : 1
I/SELinux: SELinux: seapp_context_lookup: seinfo=untrusted, level=s0:c130,c258,c512,c768, pkgname=io.ionic.starter
I/o.ionic.starte: Late-enabling -Xcheck:jni
E/o.ionic.starte: Unable to peek into adb socket due to error. Closing socket.: Connection reset by peer
D/ConnectivityManager_URSP: Ursp sIsUrsp=false, sIsCheckUrsp=false, uid=10642
D/Proxy: urspP is null: 10642
W/FirebaseApp: Default FirebaseApp failed to initialize because no default options were found. This usually means that com.google.gms:google-services was not applied to your gradle project.
I/FirebaseInitProvider: FirebaseApp initialization unsuccessful
D/libEGL: loaded /vendor/lib64/egl/libGLES_mali.so
W/o.ionic.starte: Accessing hidden method Landroid/graphics/drawable/Drawable;->getOpticalInsets()Landroid/graphics/Insets; (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->left:I (light greylist, linking)
W/o.ionic.starte: Accessing hidden field Landroid/graphics/Insets;->right:I (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->top:I (light greylist, linking)
Accessing hidden field Landroid/graphics/Insets;->bottom:I (light greylist, linking)
E/o.ionic.starte: Invalid ID 0x00000000.
W/o.ionic.starte: Accessing hidden method Landroid/view/View;->getAccessibilityDelegate()Landroid/view/View$AccessibilityDelegate; (light greylist, linking)
W/o.ionic.starte: Accessing hidden method Landroid/view/View;->computeFitSystemWindows(Landroid/graphics/Rect;Landroid/graphics/Rect;)Z (light greylist, reflection)
W/o.ionic.starte: Accessing hidden method Landroid/view/ViewGroup;->makeOptionalFitsSystemWindows()V (light greylist, reflection)
I/WebViewFactory: Loading com.android.chrome version 80.0.3987.149 (code 398714932)
E/o.ionic.starte: Invalid ID 0x00000000.
E/o.ionic.starte: Invalid ID 0x00000000.
I/cr_LibraryLoader: Loaded native library version number “80.0.3987.149”
W/o.ionic.starte: Accessing hidden method Landroid/content/Context;->bindServiceAsUser(Landroid/content/Intent;Landroid/content/ServiceConnection;ILandroid/os/Handler;Landroid/os/UserHandle;)Z (light greylist, reflection)
D/ConnectivityManager: requestNetwork; CallingUid : 10642, CallingPid : 22381
D/ConnectivityManager: requestNetwork; CallingUid : 10642, CallingPid : 22381
D/Capacitor: Starting BridgeActivity
D/Capacitor: Registering plugin: App
D/Capacitor: Registering plugin: Accessibility
D/Capacitor: Registering plugin: BackgroundTask
D/Capacitor: Registering plugin: Browser
D/Capacitor: Registering plugin: Camera
D/Capacitor: Registering plugin: Clipboard
D/Capacitor: Registering plugin: Device
D/Capacitor: Registering plugin: LocalNotifications
D/Capacitor: Registering plugin: Filesystem
D/Capacitor: Registering plugin: Geolocation
D/Capacitor: Registering plugin: Haptics
D/Capacitor: Registering plugin: Keyboard
D/Capacitor: Registering plugin: Modals
D/Capacitor: Registering plugin: Network
D/Capacitor: Registering plugin: Permissions
D/Capacitor: Registering plugin: Photos
D/Capacitor: Registering plugin: PushNotifications
D/Capacitor: Registering plugin: Share
D/Capacitor: Registering plugin: SplashScreen
D/Capacitor: Registering plugin: StatusBar
D/Capacitor: Registering plugin: Storage
D/Capacitor: Registering plugin: Toast
D/Capacitor: Registering plugin: WebView
E/Capacitor: Unable to read file at path public/plugins
D/Capacitor: Loading app at http://localhost
W/o.ionic.starte: Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (light greylist, reflection)
W/cr_media: Requires BLUETOOTH permission
I/ConfigStore: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasWideColorDisplay retrieved: 0
android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasHDRDisplay retrieved: 0
W/AudioCapabilities: Unsupported mime audio/ac4
W/AudioCapabilities: Unsupported mime audio/x-ima
W/AudioCapabilities: Unsupported mime audio/x-ape
W/AudioCapabilities: Unsupported mime audio/eac3-joc
W/AudioCapabilities: Unsupported mime audio/mpeg-L1
W/AudioCapabilities: Unsupported mime audio/mpeg-L2
W/AudioCapabilities: Unsupported mime audio/x-ms-wma
D/Capacitor/Plugin/LN: LocalNotification received: null
Activity started without notification attached
D/Capacitor: App started
D/Capacitor/Plugin/App: Firing change: true
V/Capacitor/Plugin/App: Notifying listeners for event appStateChange
D/Capacitor/Plugin/App: No listeners found for event appStateChange
W/VideoCapabilities: Unrecognized profile 4 for video/hevc
D/Capacitor: App resumed
W/VideoCapabilities: Unsupported mime video/mp43
D/OpenGLRenderer: Skia GL Pipeline
D/EmergencyMode: [EmergencyManager] android createPackageContext successful
W/VideoCapabilities: Unrecognized profile/level 1/32 for video/mp4v-es
Unrecognized profile/level 32768/2 for video/mp4v-es
Unrecognized profile/level 32768/64 for video/mp4v-es
W/VideoCapabilities: Unsupported mime video/wvc1
W/VideoCapabilities: Unsupported mime video/wvc1
W/VideoCapabilities: Unsupported mime video/x-ms-wmv7
W/VideoCapabilities: Unsupported mime video/x-ms-wmv8
D/InputTransport: Input channel constructed: fd=131
D/ViewRootImpl@edef802[MainActivity]: setView = DecorView@80c6513[MainActivity] TM=true MM=false
D/ConnectivityManager: requestNetwork; CallingUid : 10642, CallingPid : 22381
D/ConnectivityManager: requestNetwork; CallingUid : 10642, CallingPid : 22381
I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
D/Capacitor: Handling local request: http://localhost/
D/ViewRootImpl@edef802[MainActivity]: dispatchAttachedToWindow
D/ViewRootImpl@edef802[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493865160704} changed=true
I/OpenGLRenderer: Initialized EGL, version 1.4
D/OpenGLRenderer: Swap behavior 2
D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000
D/OpenGLRenderer: eglCreateWindowSurface = 0x72f573a180, 0x72fca85010
D/InputTransport: Input channel constructed: fd=145
D/ViewRootImpl@528b903[MainActivity]: setView = android.widget.ImageView{607e080 V.ED… …ID 0,0-0,0} TM=true MM=false
D/InputTransport: Input channel constructed: fd=146
D/ViewRootImpl@84a84ac[MainActivity]: setView = android.widget.ProgressBar{52f1575 I.ED… …ID 0,0-0,0} TM=true MM=false
V/Capacitor/Plugin/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Plugin/Network: No listeners found for event networkStatusChange
D/ViewRootImpl@528b903[MainActivity]: dispatchAttachedToWindow
D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493745364992} changed=true
D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000
D/OpenGLRenderer: eglCreateWindowSurface = 0x72f5898280, 0x72f5846010
D/ViewRootImpl@84a84ac[MainActivity]: dispatchAttachedToWindow
D/ViewRootImpl@84a84ac[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[477,1047][603,1173] result=0x1 surface={valid=false 0} changed=false
D/ViewRootImpl@edef802[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1
D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity]
getNavigationBarColor() -855310
D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity]
getNavigationBarColor() -855310
V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
D/InputMethodManager: startInputInner - Id : 0
I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
D/ViewRootImpl@528b903[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220}
getNavigationBarColor this view is not DecorView or null
getNavigationBarColor() Fail
D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220}
getNavigationBarColor this view is not DecorView or null
getNavigationBarColor() Fail
V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor Fail mIsGetNaviBarColorSuccess false , NavVisible : true , NavTrans : false
D/InputMethodManager: startInputInner - Id : 0
I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
D/InputTransport: Input channel constructed: fd=150
D/InputTransport: Input channel constructed: fd=154
D/ViewRootImpl@528b903[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1
W/InputMethodManager: Ignoring onBind: cur seq=41878, given seq=41877
D/InputTransport: Input channel destroyed: fd=150
D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 0 1
D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity]
getNavigationBarColor() -855310
D/Capacitor: Handling local request: http://localhost/runtime-es2015.js
D/Capacitor: Handling local request: http://localhost/polyfills-es2015.js
D/Capacitor: Handling local request: http://localhost/styles-es2015.js
D/Capacitor: Handling local request: http://localhost/vendor-es2015.js
D/Capacitor: Handling local request: http://localhost/main-es2015.js
I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 69837 - Msg: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
D/Capacitor: Handling local request: http://localhost/common-es2015.js
D/Capacitor: Handling local request: http://localhost/5-es2015.js
D/Capacitor: Handling local request: http://localhost/home-home-module-es2015.js
I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 117994 - Msg: Ionic Native: deviceready event fired after 525 ms
W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’
File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed.
File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the SplashScreen plugin: ‘ionic cordova plugin add cordova-plugin-splashscreen’
D/Capacitor: Handling local request: http://localhost/swipe-back-d2cdbf9a-js-es2015.js
V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 95296127, pluginId: Geolocation, methodName: watchPosition
V/Capacitor: callback: 95296127, pluginId: Geolocation, methodName: watchPosition, methodData: {}
V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 95296128, pluginId: App, methodName: addListener
V/Capacitor: callback: 95296128, pluginId: App, methodName: addListener, methodData: {“eventName”:“backButton”}
D/Capacitor: Handling local request: http://localhost/tap-click-606f325e-js-es2015.js
D/Capacitor: Handling local request: http://localhost/status-tap-2ec46489-js-es2015.js
D/Capacitor: Handling local request: http://localhost/focus-visible-70713a0c-js-es2015.js
D/Capacitor: Handling local request: http://localhost/assets/icon/favicon.png
D/TcpOptimizer: TcpOptimizer-ON
D/NetworkSecurityConfig: No Network Security Config specified, using platform default
I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2740 - Msg: new position: [object Object]
D/Capacitor: SplashScreen was automatically hidden after the launch timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout).Read more at https://capacitor.ionicframework.com/docs/apis/splash-screen/#hiding-the-splash-screen
W/libEGL: EGLNativeWindowType 0x72f5846010 disconnect failed
D/OpenGLRenderer: eglDestroySurface = 0x72f5898280, 0x72f5846000
D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x5 surface={valid=false 0} changed=true
D/ViewRootImpl@528b903[MainActivity]: dispatchDetachedFromWindow
D/ViewRootImpl@528b903[MainActivity]: Surface release. android.view.ViewRootImpl.doDie:7954 android.view.ViewRootImpl$ViewRootHandler.handleMessage:4955 android.os.Handler.dispatchMessage:106 android.os.Looper.loop:214 android.app.ActivityThread.main:6986 java.lang.reflect.Method.invoke:-2 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run:494 com.android.internal.os.ZygoteInit.main:1445
D/InputTransport: Input channel destroyed: fd=145
D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity]
getNavigationBarColor() -855310
D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity]
getNavigationBarColor() -855310
V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
D/InputMethodManager: startInputInner - Id : 0
I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
D/InputTransport: Input channel constructed: fd=147
Input channel destroyed: fd=154
E/ViewRootImpl: sendUserActionEvent() returned.
I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2740 - Msg: new position: [object Object]

The Ionic router extends React Router, passing URL params works in the same way.

If you run ionic build it will generate a build folder with all the static files. You just need to upload that folder to your web server.

Did you run ionic build and npx cap sync android? You need to do that after every change.

Alternatively, for development you can start the app with ionic capacitor run android --livereload.

Hey all, I’m preparing a new course on Ionic React. The following sections are available now on YouTube:

1. From React to Ionic (47m)
   Introduces some initial Ionic 5 concepts by building a simple “Hello World” app. We start with a regular React project as generated by Create React App, then add some Ionic features step by step. We’ll use some simple UI components such as a button and a toast message, look at the Ionicons icon pack, learn to customise the default theme colours, and finally turn it into a full Ionic app.
2. Biorhythm Calculator App (1h 50m)
   By building a “Biorhythm Calculator” app we’ll learn how to use input fields with Ionic, style components, write unit tests, and integrate additional JavaScript libraries for date manipulation and charting.

Enjoy!

import {
  FileTransfer,
  FileUploadOptions,
  FileTransferObject
} from "@ionic-native/file-transfer";
import { File } from "@ionic-native/file";

and make sure you are installing all of the proper libraries

npm install cordova-plugin-file-transfer
npm install @ionic-native/file-transfer
npm install cordova-plugin-file
npm install @ionic-native/file
npm install @ionic-native/core

then your code is changed

  const download = () => {
    console.log("download");
    let fileTransfer = FileTransfer.create();
    const url = "https://www.postfun.com/wp-content/uploads/2019/09/Hickory-horned-devil-82819.jpg";
    fileTransfer.download(url, File.tempDirectory + "file.jpg", true).then(
      entry => {
        console.log("download complete: " + entry.toURL());
      },
      error => {
        // handle error
        console.log("error", error);
      }
    );
  };

It worked for me. Thank bro so much

Hi! I’m curious, on which Android device does the issue occurs (WebView version) ?
The issue occurs on iOS too?
Are you using chrome on Android to access your app via HTTP, or is it an Ionic App? Ionic App should use a WebView based on Chromium (but not impacted by the new samesite policy), shouldn’t it?
Thanks!

Might it be possible to think of components as the building block that gets reused in different places, and pages more as structural hosts for these components? I would much prefer a heavy component / light page structure than a snarl of nested modals, and that should also melt away your circular reference problem.

Thanks for the solution. I would wish to know more about global components and whatever may be the opposite of global in ionic context. Kindly explain or point me to some sources.

Maybe an /ngx on the end of an import might help?

Can you post the error message (as text, not an image)?

Hey, sorry for the wait!

I took all the parts of the code i used for the popover into a blank project(can’t show the original project), but the popover does not work here… (But it works in the other project). I am new to Ionic, so i dont really know why it does not work, but hope it can be useful anyways!

Apple have clarified the behaviour.

PWAs added to home screen run in their own Safari instance so the 7 day timer would be reset each time the app is launched, meaning no data loss.

For native apps using WebView ITP is disabled.