We're developing an app which is partially native and partially hybrid. We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back. Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/Users/myname/.nvm/versions/node/v9.4.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/myname/Library/Android/sdk/)
   NodeJS            : v9.4.0 (/Users/myname/.nvm/versions/node/v9.4.0/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra

Describe the Bug When I do ionic serve and open it in Android Lollipop's browser, Its giving below error. Uncaught SyntaxError: Use of const in strict mode. vendor.js:71605

Type: bug

Platform: android 4.4 webview

when switching between tabs ONLY on Android platform, the app show a white flash. This is in 1.0.0 stable. Not using crosswalk. Forum post http://forum.ionicframework.com/t/white-flash-appearing-when-switching-between-tabs-on-android-in-1-0-0-stable/24774

@robdmoore if you wanna test, here it is so far

Test in /test/html/list-fit.html

TODO:

• [x] unit tests
• [x] docs
• [x] grid
• [x] cleanup on $destroy
• [x] one more run of optimizations
• [x] errors on bad developer usage
• [x] allow user to input item size
• [x] fix visual bug while scrolling back up/left
• [x] fix transclusion bug while scrolling down

Right now, the way Ionic handles form input can be better. Ionic 1 had awesome defaults for form inputs with regards to keyboard handling, content scrolling, etc. Ionic 2 needs to be made consistent, and more importantly, work properly for form inputs consistently across all platforms (iOS, Android, Windows).

See this repo for the code example which should be run on devices: https://github.com/dylanvdmerwe/ionic2-formtest

Android:

• [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• [x] 3. Touching an area that is not an input dismisses the keyboard.
• [ ] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• [x] 5. ~~Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.~~ [unable to test as cannot get a keyboard with next and prev buttons]
• [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

iOS:

• [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• [x] 3. Touching an area that is not an input dismisses the keyboard.
• [x] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• [ ] 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.
• [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

Note that this issue has nothing to do with forms or inputs in a slidescomponent. That would be a seperate consistency check to perform.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0-beta.4-201604170622 Ionic CLI Version: 2.0.0-beta.24 Ionic App Lib Version: 2.0.0-beta.14 OS: Node Version: v5.7.0

Type: bug

Platform: ios 9 webview

I tried my app on iOS9 Beta and always receive this error, when i click something (e.g. a tab):

angularjs exception: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] caused by "undefined js stack:

Type: bug

Ionic Version: 2.x

Platform: ios 9 webview

My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

Short description of the problem:

I am developing an app with Ionic2. I have App.ts as the parent, Welcome.ts as a child page and Featured.ts as a child page as well. I have firebase integrated with the app. Rootpage is first set to Welcome.

this.rootPage = Welcome;

Step 1: I click a button on Welcome to authenicate with Google, once onAuth is called, I set this.nav.setRoot(Featured); All works fine up to now. I get to the Featured page which enables a sidemenu with different pages and i am able to navigate to all of them no problem.

Step 2: Featured enables a sidemenu from App.ts/html, in there I have a logout button that calls unauth. Unauth does some Firebase unauth and then:

this.menu.close();    
let nav = this.app.getComponent('nav');    
nav.setRoot(Welcome); 

Step 3: Login again same as in step 1. All is fine up to now.

Step 4: Open side menu, selects any of the pages from the sidemenu, navigation doesn't occur. sidemenu closes but page remain the same, navbar icon button disappear and no navigation occurs. openPage code:

  openPage(page) {
    //1. Loop through and set active attribute to False if it doesn't match.
    //   Set to True if it matches page title
    for(var i = 0; i < this.NavPages.length; i++) {
      if(this.NavPages[i].title == page.title) this.NavPages[i].active = true;
      else this.NavPages[i].active = false;
    }
    for(var i = 0; i < this.ActivityPages.length; i++) {
      if(this.ActivityPages[i].title == page.title) this.ActivityPages[i].active = true;
      else this.ActivityPages[i].active = false;
    }
    for(var i = 0; i < this.PreferencesPages.length; i++) {
      if(this.PreferencesPages[i].title == page.title) this.PreferencesPages[i].active = true;
      else this.PreferencesPages[i].active = false;
    }

    //2. close the menu when clicking a link from the menu
    this.menu.close();
    //3. navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }

What behavior are you expecting?

I am expecting navigation to continue to occur, similar to what happens in step 1.

Steps to reproduce: Steps to reproduce included above.

Code included above.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) No error is being thrown unfortunately. I don't see any erros in the console logs.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002 

Thank you.

Ionic version: (check one with "x") [ ] 1.x [x] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Keyboards and input scrolling have long been a challenge for Ionic apps, even going all the way back to Ionic V1. We have recently put a focus on trying to knock out these keyboard issues. The issues we currently think are the highest priority when it comes to keyboards and inputs are the following:

• inputs in alerts are sometimes "wonky"
• Forms that have a lot of inputs sometimes have scrolling issues when focusing inputs lower down on the page
• Switching between inputs, textareas and more sometimes causes "bouncing" and other weird UI issues
• Having an input locked to the bottom of a view does not work correctly on iOS (the keyboard covers the input)

We are currently working on a two-pronged approach of modifying the logic in the framework that handles this stuff (mainly for Android) along with some modifications to the WKWebView plugin to fix these issues for iOS. We are at a point now where we have a branch of the WKWebView plugin that has the fixes for iOS and are ready for our community to start testing this and providing feedback. We have made a Google doc here that has instructions on how this can be tested. We would love to have feedback on these fixes! Feel free to provide feedback as a comment to this issue. Thanks for using Ionic everyone!

I'm updating my app to Ionic 2 rc0 and using import {Storage} from "@ionic/storage"; But it doesn't have query method. It was there in beta 11 to query SQLite. How to query SQLite in rc0?

It appears that changing state increases memory usage with every transition. Here's a simple example. Open your browser's memory profiler and click "Get Clicky".

http://codepen.io/perrygovier/pen/FJgBa

Pages with more stuff on it tend to increase the amount of memory that gets eaten with each transition. Note the number of nodes and listeners never decreases.

On my app that uses a few larger lists, the app can quickly get to 200mb after just a few mins of manual clicking back and forth. I have yet to crash the app due to memory pressure, but it seems more a matter of impatience than something that wouldn't happen with continued use.

I believe this is less an issue with Ionic and more to do with Angular's UI Router, but I thought I'd start here as it's where it popped up for me.

BountySource discussion that appears related

Pull request checklist

Please check if your PR fulfills the following requirements:

• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• [x] Build (npm run build) was run locally and any changes were pushed
• [x] Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• [x] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, renaming)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] Documentation content changes
• [ ] Other (please describe):

What is the current behavior?

Issue URL: Internal ticket

Input mode on iOS can be exited by scrolling on of the picker columns. This is useful as users who accidentally activated input mode can easily exit it by scrolling the column. The picker used in ion-datetime does not have this functionality, so getting out of input mode can be confusing to users who accidentally activated it.

What is the new behavior?

• Input mode is now exited when the user manually scrolls a picker column enough such that the value will change.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

Changes in @HostListener() on document:click, document:pointerdown and document:click (probably, more events are affected) are not processed by Angular change detection.

Expected Behavior

Changes in @HostListener() should be processed by Angular change detection.

Steps to Reproduce

1. Add a method like this to the page or component:

@HostListener("document:click")
onDocumentClick() {
  this.documentClickCount++;
}

2. Output documentClickCount in your HTML.
3. Tap on the screen.
4. You'll see that it updates in a browser on both PC and Android, but doesn't in an Android app (apk).

The same thing happens with document:pointerdown and document:pointerup events. Maybe more events are affected.

I suspect that change detection is not triggered in such @HostListener-s for some reason. This is backed by the fact that provided workarounds work.

Code Reproduction URL

https://github.com/matafokka/ionic-hostlistener-bug-demo

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 6.20.1 (C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.4.1
   @angular-devkit/build-angular : 15.0.4
   @angular-devkit/schematics    : 15.0.4
   @angular/cli                  : 15.0.4
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.6.1
   @capacitor/android : 4.6.1
   @capacitor/core    : 4.6.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.1

System:

   NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.3.1
   OS     : Windows 10

Additional Information

Intro

I've created a demo repo for this problem where I've provided additional info on the problem. I will cite the important parts from it below.

Comments

1. ionic info reported wrong Windows version, mine is Windows 11 Pro for Workstations.
2. I've tested the demo in Android Studio emulator (Resizable, Android 13) and on Vivo Y31 (Android 12).
3. I don't know if this issue persists on IOS.

NgZone.run() workaround

I prefer this one since you just need to wrap your code in it.

constructor(private zone: NgZone) {}

@HostListener("document:click")
onDocumentClick() {
  this.zone.run(() => this.documentClickCount++);
}

ChangeDetectorRef workaround

With this you'll need to call ChangeDetectorRef.detectChanges() every time you return from your handler.

constructor(private changeDetectorRef: ChangeDetectorRef) {}

@HostListener("document:click")
onDocumentClick() {
  this.documentClickCount++;
  this.changeDetectorRef.detectChanges();
}

Misc observations

These observations most likely are irrelevant, but I feel like I should post it anyway. Here I'll cite the code from the demo source:

  // Document event listeners

  @HostListener("document:click")
  onDocumentClick() {
    this.documentClickCount++;
    console.log("[BUG] Document click count:", this.documentClickCount);
  }

  @HostListener("document:pointerdown")
  onDocumentPointerDown() {
    this.documentPointerDownCount++;
    console.log("[BUG] Document pointer down count:", this.documentPointerDownCount);
  }

  @HostListener("document:pointerup")
  onDocumentPointerUp() {
    this.documentPointerUpCount++;
    console.log("[BUG] Document pointer up count:", this.documentPointerUpCount);
  }

  // Window event listeners

  // These seem to work just fine.
  // I've provided description on document event listener behavior changes when uncommenting window event listeners.
  // I'm sure that this is irrelevant to the problem, but I felt like I still should do it.

  // Uncommentig only this one makes document listeners update on click.
  // document:pointerup and document:pointerdown events fired when holding finger or swiping still don't work.

  /*
  @HostListener("window:click")
  onWindowClick() {
    this.windowClickCount++;
    console.log("[BUG] Window click count:", this.windowClickCount);
  }
  */

  // Uncommenting only this one makes:
  // 1. document:pointerdown work.
  // 2. document:click update from 0 and after holding or swiping only after second click. Displayed value is: documentClickCount - 1.
  // 3. document:pointerup update from 0 only after second click. Displayed value is: documentPointerUpCount - 1.

  /*
  @HostListener("window:pointerdown")
  onWindowPointerDown() {
    this.windowPointerDownCount++;
    console.log("[BUG] Window pointer down count:", this.windowPointerDownCount);
  }
  */

  // Uncommenting only this one makes:
  // 1. document:pointerdown and document:pointerup update on first click.
  // 2. document:click update after second click.
  // 3. Everything update after holding or swiping and after click. Displayed values are competely off.
  // Well, the behavior is weird, and I might have missed something in the list above.

  /*
  @HostListener("window:pointerup")
  onWindowPointerUp() {
    this.windowPointerUpCount++;
    console.log("[BUG] Window pointer up count:", this.windowPointerUpCount);
  }
  */

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [ ] v6.x
• [ ] Nightly

Current Behavior

Currently both the expand='full' and expand='block' will make it full with. Only the border radius changes.

Expected Behavior

It should not be full width for the block property and It shouldn't affect the border radius.

Steps to Reproduce

<ion-button expand="block">Block</ion-button>
<ion-button expand="full">Full</ion-button>

Code Reproduction URL

https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.ts

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.2.7

Capacitor:

Capacitor CLI : 4.1.0 @capacitor/android : 4.1.0 @capacitor/core : 4.1.0 @capacitor/ios : 4.1.0

Utility:

cordova-res : 0.15.4 native-run (update available: 1.7.1) : 1.6.0

System:

NodeJS : v16.14.0 (/usr/local/bin/node) npm : 8.3.1 OS : macOS

Additional Information

No response

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When changing the page, with ionRouter.replace, my animation is not updated on its second call. If I make a custom animation during the replace, then I can't change the animation at the next replace.

Expected Behavior

I would like to swipe left and trigger a page change to the left. Once the page has changed, I would like to drag to the right and trigger an animation to the right.

Steps to Reproduce

My animations :

import { createAnimation } from '@ionic/vue';

export const animationOpacity0to1 = (element, duration) =>
  createAnimation().addElement(element).duration(duration).fromTo('opacity', '0', '1');

export const animationTranslateXOpacity = (element, duration, direction = 'right') =>
  createAnimation()
    .addElement(element)
    .duration(duration)
    .fromTo('opacity', '0', '1')
    .fromTo('transform', 'translateX(0px)', direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)');

My animation builder :

const recupereAnimationBuilder = (direction) => (baseEl, opts) =>
  createAnimation().addAnimation([
    animationOpacity0to1(opts.enteringEl, 300),
    animationTranslateXOpacity(opts.leavingEl, 200, direction),
  ]);

My gesture (call from onIonViewWillEnter):

const activeChangementDePageSwipe = () => {
  createGesture({
    el: swiperZone.value,
    threshold: 150,
    gestureName: 'change-page',
    onMove: (ev) => onSwipePage(ev),
  }).enable();
};

onMove event :

const onSwipePage = (ev) => {
  const nouvelId = ev.deltaX < 0 ? 'id_1' : 'id_1';

  const animation =
    ev.deltaX > 0
      ? recupereAnimationBuilder('right')
      : recupereAnimationBuilder('left');

  router.replace({ name: 'Vetement', params: { id: nouvelId } }, animation);

  return true;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.1.4

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0
   @capacitor/ios     : 4.1.0

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.1) : 1.6.0

System:

   NodeJS : v16.17.1 (/opt/homebrew/Cellar/node@16/16.17.1/bin/node)
   npm    : 8.15.0
   OS     : macOS

Additional Information

No response

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

`# npm audit report

json5 <2.2.2 Severity: high Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h fix available via npm audit fix node_modules/tsconfig-paths/node_modules/json5 tsconfig-paths 3.5.0 - 3.9.0 || 3.11.0 - 3.14.1 Depends on vulnerable versions of json5 node_modules/tsconfig-paths

2 high severity vulnerabilities

To address all issues, run: npm audit fix`

Expected Behavior

Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

Steps to Reproduce

Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

Code Reproduction URL

No response

Ionic Info

Ionic info :

Ionic CLI : 6.20.6 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 15.0.4 @angular-devkit/schematics : 15.0.4 @angular/cli : 15.0.4 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : not installed @capacitor/core : 4.6.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v16.13.0 (/usr/local/bin/node) npm : 8.19.2 OS : macOS

Additional Information

No response

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

New versions of ionic broke types when using moduleResolution: "node16". Components like IonCard or IonButton doesnot have typings anymore.

Works with 6.2.3

Expected Behavior

Allow moduleResolution node16 and have component typings

Steps to Reproduce

Add moduleResolution: "node16" in tsconfig.json.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.2.3

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : not installed @capacitor/core : 4.6.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v19.3.0 (/opt/homebrew/Cellar/node/19.3.0/bin/node) npm : 9.2.0 OS : macOS

Additional Information

No response