Anybody trying to help you would likely want to know more details here. How did you “implement iBeacon”? Did you use an existing library? If so, which one?

Ended up finding the solution.

Long story short: don’t mess up with node_modules folder (e.g.: right click - ‘Mark Directory as…’) - apparently Webstorm needs to be able to index libs on it, in order to provide with auto-completion for them.

Brief explanation is here:

My experience doesn’t align with your “long story short”. I only casually skimmed your SO link, but I don’t think it says what you took from it, either.

Of course, if you’re happy with your resolution, that’s the most important thing, but for other people stumbling across this thread, you absolutely can mark node_modules as “excluded” without losing autocompletion on Ionic or Angular core components in templates.

I’m running WebStorm 2021.2, but have done this for several years without any problems. There may indeed be something related to this topic going on with your situation, but I don’t think your proposed restriction is warranted.

It also takes forever to index node_modules of a typical Ionic Angular project when one is frequently running npm update, so there is definitely a real benefit to marking it (and your build directory) as excluded.

Hi @jacalzadam98 , could you provide more information about it?

• Ionic info
• What plugin did u use?
• How did you used google map api ?
• Are there any error messages ?

You can try debug to real device or emulator with chrome dev tools ( chrome://inspect/#devices )
Make sure you run in dev mode, e.g. ionic cordova run android

In my case, remove package angular-cli and then replace it with @angular/cli works.
Or, downgrade the npm version can be used if do not want to install @angular/cli.

My prior advice is to upgrade to latest version. Tie up with latest update will remove deprecation and support errors

I too experienced this problem while I try to open model using model controller. I simply removed capacitor splashscreen. There is no issues. I think there is a problem with capacitor splashscreen. It just hides itself behind the wkwebview.
Why don’t you use Custom splashscreen, with animations or images after the page load???

Before trying to fix height, You must know how much height is occupied by the card containing large data. You must get the height of that card using javascript and fix that height to both the cards…

I’ve found that the only clean way to make it work is to modify 3 things:

1. Edit the plugins/PLATFORM.js file (ex. plugins/android.js) and remove the plugin object from the “installed_plugins” array

2. Do the same for the platforms/PLATFORM/www/cordova_plugins.js file where PLATFORM could be ios, blackberry10, firefoxos etc. In the android case will be inside assets/www instead of just www

3. Last step is to delete the plugin directory inside platforms/PLATFORM/www/plugins/ . In your case again it will be assets/www and not just www

Hi rapropos. thanks for the reply, yes that is an option when we have only input like (number, text, date etc). I have requirement where i need to show list of items using *ngFor and when i click any item, the value need to be set in ngModel.

THANK YOU! I fixed it

Hello everyone!

I am trying to make an Ionic Capacitor app with Angular ( ionic installed is 5.6.13 with Capacitor on 14.17.5 nodejs’s LTS version ) where I am trying to load external pages in super-tabs-container by routing with *ngFor so my home.page.ts is :

import { SuperTabs } from '@ionic-super-tabs/angular';
import { ProductsPage } from '../products/products.page';
import { SettingsPage } from '../settings/settings.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  
  tabsLoaded:boolean = false;
  pageProducts = ProductsPage;
  pageSettings = SettingsPage;

  tabs = [
	{ pageName: ProductsPage, title: 'Products', icon: 'Home', id: 'productsPage'},
	{ pageName: SettingsPage, title: 'Settings', icon: 'Settings', id: 'settingsPage'}
  ];   

  selectedTabIndex = 0;

  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor() {}

   onTabSelect(ev: any) {
	this.selectedTabIndex = ev.index;
  } 

  ngOnInit() {
	console.log('ngOnInit HomePage');
	this.tabsLoaded = true;
  } 

}

and my home.page.html is :

<ion-header [translucent]="true">
  <ion-toolbar>
	<ion-title>Products</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>  

	<super-tabs tabsPlacement="top">
	<super-tabs-toolbar slot="top">
	  <super-tab-button *ngFor="let tab of tabs">
		<ion-icon name="{{tab.icon}}"></ion-icon>
		<ion-label>{{tab.title}}</ion-label>
	  </super-tab-button>
	</super-tabs-toolbar>
	<super-tabs-container>
	  <super-tab *ngFor="let tab of tabs">
		<ion-nav [root]="tab.pageName" title="{{tab.title}}" [rootParams]="tab"></ion-nav>
	  </super-tab>
	</super-tabs-container>
	</super-tabs>

</ion-content>

It appears the super tabs toolbar and I can swipe tabs but seems it doesn’t load the external page into each tab container… I tried also to call {{page.pageName}} removing from root attribute but it doesn’t work… at least that [root] attribute is right for loading contents into tab…
Any little help would be appreciated… thanks in advance to all!!

Cheers!

I’ve noticed the same behavior. It seems to be related to the shadow-root feature.

If you place the following code at a very top in any of your global stylesheets, you’ll notice, that it will work for some elements, to be more precise, for the elements that do not use the shadow-root:

* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

This code will simply enable the text selection for all browsers and all elements. You can define it for any specific elements you want.

Now the behavior I’ve noticed: Any custom web component, f. e. <ion-card> will get this css property, but won’t behave as it should as it uses the shadow-root.

There are also various of bugs I’ve found across the internet, f. e.:

• 1587724 - Elements with shadow root break text selection on a page
• javascript - Element with shadow root breaks text selection - Stack Overflow

I’ve tried nearly everything to make it work, but it’s impossible. The only behavior I’ve noticed is, that it will work with a right click on the word you want to select, but only for this one word, no more.

Hopefully there will be a fix soon as it’s a little bit anoying.

Hope it helps!

Cheers
Unkn0wn0x

My case
My mac and iPhone are connected to same WiFi

ionic cap run ios -l --external --console --json --open

1. opens xcode
2. click run app from xcode
3. app starts
4. change the code from vscode
5. Live Reload

Super productive all good.

Now in my app I need to connect to GoPro via bluetooth then connect to GoPro’s WiFi Access Point to copy photos.

When my iPhone connects to GoPro’s WiFi AP no more live reload
now my dev cycle is

1. opens xcode
2. click run app from xcode
3. app starts
4. change the code from vscode
5. from vscode terminal type ionic cap copy ios
6. click run app from xcode

is there anyway to speed up this process?

How to activate MS - Office 2019?

Hi everyone, I am new to ionic and creating my first app, how do I disable menu on login page,
Currently, when I do so, it hides on the entire application. See code below.
login.page.ts

import { Component, OnInit } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { Plugins } from ‘@capacitor/core’;

import { HttpClient } from ‘@angular/common/http’;

import { HTTP } from ‘@ionic-native/http/ngx’;

import { ToastController } from ‘@ionic/angular’;

import { LoadingController } from ‘@ionic/angular’;

import { MenuController } from ‘@ionic/angular’;

const {SplashScreen} = Plugins;

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.page.html’,

styleUrls: [’./login.page.scss’],

})

export class LoginPage implements OnInit {

user: any = {};

loading: any = {};

componentDidLoad(){

SplashScreen.hide();

}

constructor( private router: Router, private http: HttpClient, private toastCtrl:ToastController, public loadingController: LoadingController,private menu: MenuController) {

this.menu.enable(false, 'first');

}

async loginWithSpinner() {

this.loading = await this.loadingController.create({

  message: 'Please wait...',

  //duration: 2000

});

await this.loading.present();

this.login();

}

ngOnInit() {

}

async successToast() {

await this.toastCtrl.create({

  message: "Welcome "+this.user['email'],

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

async failedToast() {

await this.toastCtrl.create({

  message: "Login Failed, Check Email and Password. ",

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

async emptyFieldsToast() {

await this.toastCtrl.create({

  message: "Notice! All Fields Are Rquired",

  duration: 2000,

  position: 'top',

  cssClass: 'toast-truce',

  buttons: [{

    text: 'OK',

    handler: () => {

      console.log("ok clicked");

    }

  }]

}).then(res => res.present());

}

login(){

if(this.user['email'] == null || this.user['pass'] == null ){

  this.emptyFieldsToast();

}else{

this.http.get('https://prochpetskillsinstitute.co.zm/ionic_api/index.php?email='+this.user['email']+'&pwd='+this.user['pass']).subscribe((response: any) => {

  console.log(response);

  if(response.success == 1){

    //console.log("success");

    this.successToast();

    sessionStorage.setItem('email', response.email);

    //this.loading.dismiss();

    this.router.navigate(['home']);

  }else{

    //this.loading.dismiss();

    this.failedToast();

  }

});

}

}

navigateToSignupPage(){

this.router.navigate(['signup'])

 }

 goToPrivacyPage(){

  this.router.navigate(['policy'])

   }

   goToForgotPasswordPage(){

  this.router.navigate(['fogotpassword'])

   }

}

thanks so much for the information @rapropos - I should have been more explicit with my own post.
What I have done is (maybe not all steps were needed, but worked for me):

• Closed the project in Webstorm
• Removed .idea folder
• Removed node_modules folder
• Reopen project in Webstorm
• npm install (from webstorm terminal)

Subsequenty the node_modules folder got labeled back as “library root” (which apparently I messed up with, and don’t even remember how I did ).

After that, if I right click on node_modules folder, then select “Mark Directory as”, “Not Excluded” option is there, so you’re absolutely right (seems to get excluded by default - and still autocomplete works).

I’d think removing node_modules and re-creating it may not be necessary (takes time ) - and there’s probably a quicker way to restore to proper state, so maybe other major tips on things to consider for auto-completion (other than not messing up with folders/setup) may help others, if you know?

Hi, did you ever work this out, I’d be very interested to know.

Thanks

As I read is available for enterprise clients only, will it become available for everyone eventually? (maybe in a less powerful edition?)

Hi,

I’m trying to debug (Andorid device) my app created with ionic start myApp1 tabs --cordova with no success. Anyway all my debug configuration options fails:

1) Attach to running Android on device:
Error: Unable to find localabstract name of cordova app

2) Run Android on device:

Iniciando para android (esta operación puede tardar varios minutos)...
Command failed: emulator -list-avds
/bin/sh: 1: emulator: not found
Continue using standard CLI workflow.
2021-08-19T14:43:40.896Z ionic:lib Terminal info: { ci: false, shell: '/bin/bash', tty: false, windows: false }
2021-08-19T14:43:40.899Z ionic:lib CLI global options: { _: [ 'cordova', 'run', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: false, color: true, confirm: null, json: null, project: null, '--': [] }
2021-08-19T14:43:41.557Z ionic:lib:project Project type from config: @ionic/angular (angular)
2021-08-19T14:43:41.557Z ionic:lib:project Project details: { context: 'app', type: 'angular', errors: [], configPath: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic 5/myApp1/ionic.config.json' }
2021-08-19T14:43:41.562Z ionic Context: { binPath: '/usr/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/usr/lib/node_modules/@ionic/cli', execPath: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic 5/myApp1', version: '6.16.3' }
2021-08-19T14:43:41.725Z ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic 5/myApp1/config.xml', package.json: '/media/ramiro/EEE86441E86409E3/Documentos/Proyectos/Ionic/Ionic/Pruebas/Ionic 5/myApp1/package.json')
SyntaxError: Unexpected number in JSON at position 4

at JSON.parse (<anonymous>)
at Object.getNativeTargets (/usr/lib/node_modules/@ionic/cli/lib/native-run.js:110:44)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
2021-08-19T14:43:42.912Z ionic SyntaxError: Unexpected number in JSON at position 4
    at JSON.parse (<anonymous>)
    at Object.getNativeTargets (/usr/lib/node_modules/@ionic/cli/lib/native-run.js:110:44)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
Error de ionic cordova run android --verbose --no-interactive con el código de salida 1

3) android-webview
No webviews found

My device is a Samsung S6. I can start my app from terminal with ionic cordova run android

My launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to running Android on device",
            "type": "cordova",
            "request": "attach",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceFolder}"
        },
    {
        "name": "Run Android on device",
        "type": "cordova",
        "request": "launch",
        "platform": "android",
        "target": "device",
        "port": 9222,
        "sourceMaps": true,
        "cwd": "${workspaceFolder}"
    },
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "webRoot": "${workspaceFolder}"
        },
    ]
}

My package.json:

{
  "name": "myapp1",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.1.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic/angular": "^5.5.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.1.2",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-android": "^9.1.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  },
  "main": "karma.conf.js",
  "license": "ISC"
}

I’m stuck here. Any help? Thanks.