Does anyone know how to connect my ionic platform with dialogflow rest api v2 since this version does not include cordova plugin? Please help!

1 post - 1 participant

Read full topic

I am getting the following error as the project in node_modules\@capacitor does not have a settings file in JetBrain’s IntelliJ Idea.

Project directory 'C:\Users\...\GitHub\xyz\frontend\node_modules\@capacitor\android\capacitor' is not part of the build defined by settings file 'C:\Users\...\GitHub\xyz\settings.gradle'. If this is an unrelated build, it must have its own settings file.

After running npx cap doctor:

   Capacitor Doctor

Latest Dependencies:

  @capacitor/cli: 2.2.0

  @capacitor/core: 2.2.0

  @capacitor/android: 2.2.0

  @capacitor/electron: 2.2.0

  @capacitor/ios: 2.2.0

Installed Dependencies:


  @capacitor/cli 2.2.0

  @capacitor/core 2.2.0

  @capacitor/android 2.2.0

  @capacitor/ios 2.2.0

  @capacitor/electron 2.1.0

[success] Android looking great! �
[error] Xcode is not installed

1 post - 1 participant

Read full topic

I’m working on a project that validates the input before submitting the form. It’s working fine on lower android versions but when it’s executed on higher versions specifically Android 10 seems like it’s not getting retrieved.

Heres my ngModel:

addressData = {
        street_no: '',
        street_name: '',
        purok_no: '',
        barangay_no: 'NONE',
        city_mun: '',
        // barangay_name: '',
        barangay_name: {
            value: '',
            barangay_no: ''
        },
        landmark: '',
        mobile_no: '',
        alt_mobile: '',
    };

It is binded on a form like this one:

<form (ngSubmit)="createAddress()">
      <ion-row>
        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">STREET NO.</ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.street_no" placeholder="(optional)" type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>
        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">STREET NAME.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.street_name" required type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>

        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">PUROK NO.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input [ngModelOptions]="formConfig" [(ngModel)]="addressData.purok_no" placeholder="(optional)" required type="text" class="form-group-input"></ion-input>
          </div>
        </ion-col>
        <ion-col [size]="6" style="display: none;">
          <div class="form-group">
            <ion-label position="stacked" class="form-group-label">BARANGAY NO.<ion-text color="danger">*</ion-text></ion-label>
            <ion-input style="border: none; --padding-start: 0" [ngModelOptions]="formConfig"  [(ngModel)]="addressData.barangay_no" required type="text" class="form-group-input" [disabled]="true"></ion-input>
          </div>
        </ion-col>

        <ion-col [size]="6">
          <div class="form-group">
            <ion-label position="stacked" ngClass="form-group-label">CITY/MUNICIPALITY<ion-text color="danger">*</ion-text></ion-label>
            <ion-select (click)="setEditCity()" (ionChange)="cityValueChanged($event)" [ngModelOptions]="formConfig" [(ngModel)]="addressData.city_mun" class="form-group-select" ok-text="Confirm" cancel-text="Cancel">
              <ion-select-option *ngIf="edit_mode == 1 && !changeCity" [value]="addressData.city_mun">{{addressData.city_mun}}</ion-select-option>
              <ion-select-option *ngFor="let city of cities" [value]="city.name">{{city.name}}</ion-select-option>
            </ion-select>
          </div>
        </ion-col>
        ...
<ion-row>

Here’s my script:

 if (this.addressData.street_name === '' || this.addressData.barangay_no === '' || this.addressData.city_mun === '' ||
            this.addressData.barangay_name.value === '' || this.addressData.landmark === '' || this.addressData.mobile_no === '' ||
            this.addressData.alt_mobile === '') {
            console.log(this.addressData);
            this.cmpt.showToast('Please fill-in the required fields.', 2000, 'warning').then((alert) => alert.present());
        } else if (this.addressData.mobile_no.includes('_') || this.addressData.alt_mobile.includes('_')) {
            this.cmpt.showToast('Please provide a valid mobile number.', 2000, 'warning').then((alert) => alert.present());
        } else {
        // submit form code
        }
}

The items are already filled/completed but it always returns Please fill-in the required fields.. It’s working fine in android 9 but seems like there’s an error in android 10. Is it possible that it’s because of android version?

1 post - 1 participant

Read full topic

Hello everyone

I am in the process of trying to migrate an app from ionic 3.9.9 to the latest version of ionic 5
I had a look at the Migration Guide, at the Ioniv 4 Breaking Changes list, and at the Ionic 5 breaking changes list, and made a list of what I had in my app that could potentially break.

After reading and looking at all of it, I decided to try to just get one page, the login page, displayed as it was when I used ionic v3.

So, I created a new blank app, and started importing the page, the global scss and so on. I removed a lot of the intelligence from the login page to have my imported code volume at a minimum.

I ended up recreating the login page through ionic generate page login2 and copying the login page code and html into that one because the translate pipe of ngx-translate did not work.

So far so good with the documentation I had…

Problems arise when I try to have the login page display and look as it did before: a lot of breaking changes has not been documented in those pages. Take for instance the buttons: I had a panel with buttons from 0 to 9 on two lines, and scss to have them look as I wanted.
On buttons, the ionic 4 breaking changes says :

• Markup changed ( should be written )
• Attribute names changed (icon-left => slot=“start” and so on)
• That’s it

Well yes but actually no. The breaking changes are a lot worse than that:

• css classes are not the same anymore, so the selector I had .button.button-md.button-default.button-default-md.button-md-light does not work. It has to be replaced by .button.md.button-default.ion-color-light because a lot of these classes are no longer applied.
• the padding on the ion-button is not properly applied, even though it’s a box-sizing: border-box the padding somehow is outside the button’s display and so I have to add a sub-css to set the padding specifically on the inner tag of the to prevent the padding to become a secondary margin instead
• the text of the button is no longer in font-weight:500 so i guess I’ll have to add this myself
• custom color through color="myCustomButtonColor" no longer works apparently, even though I changed the sass variable $myCustomButtonColor to a --myCustomButtonColor in a :root { }
• maybe a lot more that I haven’t found out yet

My question is : Is there a full list of all the breaking changes? Because I can’t go through all of my app pixel by pixel to see what has changed and what’s not supposed to…

1 post - 1 participant

Read full topic

I am building my project with ionic 5 in webStorm. When i serve my project with this command ionic serve project is not updating but when i serve with ng serve it is updating.

Note: in vscode everything is ok

1 post - 1 participant

Read full topic

I’m pretty new to Ionic and Capacitor, so please forgive me if this is known stuff. I’ve googled but I haven’t been able to find any information.

I’ve successfully been able to build my React apps into Native apps by following the simple instructions here, however I can’t find any information about live-reloading the application in Android Studio.

At the moment if I run npx cap open android, I’m then unable to also run npm run start in my react App. I get the following error:

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/leonardo/Desktop/Node Projects/time-management/public/favicon.ico'

This means that any time I want to see the changes on my device I need to build my app, run npx cap copy, then switch to Android Studio and restart the app from there.

Is there a cleaner workflow for this? This isn’t a problem for things that can be debugged in the web-view, but for testing and debugging native functionality it means a whole lot of stopping and starting while switching between terminal windows.

Let me know if I’m doing something wrong or I’ve missed a part of the workflow.

1 post - 1 participant

Read full topic

Hello,
The scenario is like this , I navigate using navigateByUrl and every time I pass data between pages.
Home is the root page.

The navigation is like this :
1- AppCompt (if new user) --> Profile --> home ( From home your can also access to Profile)
2- AppCompt (if user exist ) --> home ( From home your can also access to Profile)

this.router.navigateByUrl('/profile', { state: { data: false } }); From AppCompt to Profile

this.router.navigateByUrl('/profile', { state: { data: true } }); From Home to Profile

then I receive the data in Profile Constructor :
this.data = this.router.getCurrentNavigation().extras.state.data;

The problem happens only with iOS [Android works fine], when user is new it navigate to profile I receive False but when I try to go To profile from home after that it stays False , nothing change , If I restart the App it will navigate to Home (user exists) and I can see that I receive True.

Any Idea please

1 post - 1 participant

Read full topic

i am using this code to create a list of items with an icon on the left. The code works some times after i run ionic serve but most of the times i need to refresh the browser to actually see the icons. From this i understand that the code works fine but the icons are not loaded until after i refresh.

   <ion-item *ngFor="let category of categories" text-wrap (click)="openCategoryPage(category)" menuClose>
        <ion-icon [name]="category.icon" item-left large></ion-icon>
        <h2>{{category.name}}</h2>  
        <p>{{category.description}}</p>
      </ion-item>

i am assuming this has to do with some issues with icons on v.3 but can’t find the solution.

1 post - 1 participant

Read full topic

Hi, I’m using ionic react, my application has two routes like “/city”, “/city/:id” on city route there are list of cities and clicking one of them redirects to /city/:id route now the problem is if user is on /city/1 and then goes to /city page through menu ( not back clicking back button ) and then goes to another city like /city/2 then ion router outlet still showing /city/1 data. How can I prevent this caching of page?

2 posts - 2 participants

Read full topic

Hello everyone

I have issue with android keyboard overlays form in popover

This is my form

1592595644731409×843 79 KB

When input is focused android keyboard appears

2402×838 90.2 KB

My code:

import {
  PopoverController
} from 'ionic-angular';

export class ParentPage {
 constructor(
    private popCtrl: PopoverController,
  ) {}
........................ many code
presentPromoModal()
  {
    let popHtml = this.popCtrl.create("ProfilePromocodePage");

    popHtml.present();
  }
................. many code
}

Popover

export class ProfilePromocodePage implements OnInit {

  promoCodeForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private viewCtrl: ViewController,
    ) {
  }

  ngOnInit() {
    this.promoCodeForm = this.fb.group({
      code: ['', [Validators.required]],
    });
  }

  handlePromoCodeActivateClick() {
    console.log('activate promo code');
  }
}

HTML popover

<ion-header>
  <ion-navbar>
    <ion-title>Connect ....</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div item-content class="form-wrapper">
      <div class="promo-code-form" [formGroup]="promoCodeForm">

        <input id="code" formControlName="code" placeholder="some text">
        <input>

        <button ion-button class="button--text-rounded" [disabled]="!promoCodeForm.valid"
          (click)="handlePromoCodeActivateClick()">
          Connect
        </button>
      </div>
    </div>
</ion-content>

How to move up the form or popup to show submit button?

Version: Ionic 3
from package-json:
“ionic-angular”: “3.9.5”,
“@angular/core”: “5.2.11”

Sorry for poor english

1 post - 1 participant

Read full topic

Not sure if this is a capacitor issue or an ionic issue but platform ready isn’t firing on Android in Emulators or a real device. It fires fine on iOS.

I’m guessing this big error has something to do with it:

2020-06-19 22:09:08.669 30272-30490/appIdentifier E/PluginManager: Uncaught exception from plugin
    android.content.res.Resources$NotFoundException: String resource ID #0x0
        at android.content.res.Resources.getText(Resources.java:339)
        at android.content.res.Resources.getString(Resources.java:433)
        at android.content.Context.getString(Context.java:556)
        at com.ionicframework.common.IonicCordovaCommon.getStringResourceByName(IonicCordovaCommon.java:341)
        at com.ionicframework.common.IonicCordovaCommon.getNativeConfig(IonicCordovaCommon.java:425)
        at com.ionicframework.common.IonicCordovaCommon.getPreferences(IonicCordovaCommon.java:384)
        at com.ionicframework.common.IonicCordovaCommon.execute(IonicCordovaCommon.java:92)
        at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
        at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
        at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:69)
        at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:45)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:325)
        at android.os.Looper.loop(Looper.java:142)
        at android.os.HandlerThread.run(HandlerThread.java:65)

and

2020-06-19 22:09:07.498 30272-30272/appIdentifier D/Capacitor: Registering plugin: Device
2020-06-19 22:09:13.362 30272-30272/appIdentifier I/Capacitor/Console: File: capacitor-runtime.js - Line 2188 - Msg: deviceready has not fired after 5 seconds.
2020-06-19 22:09:14.070 30272-30272/appIdentifier W/Capacitor/Console: File: http://localhost/main-es2015.05060ed6cc850a2d43a7.js - Line 1 - Msg: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.

I can’t workout where to delete the plugins from as the last line says and I don’t want to remove the platform as I will loose some set up that I have done and will need to re-add keys etc.

Any clues on where to go? I’ve upgraded to capacitor latest so on 2.2.0, I’ve re sync’d the project as well and no change. One one emulator it just doesn’t even load.

1 post - 1 participant

Read full topic

I’m trying to call a firebase function using Angular Fire on an Ionic project.

 const callable = this.afFunctions.httpsCallable('getWeather');
 const result = await callable(request).toPromise();

This works fine in a development environment but upon deploying with, ionic build --prod --source-map, this same function no longer works.

Here are the errors when this function is called in production.

POST https://firebaseinstallations.googleapis.com/v1/projects/ProjectName/installations 400

FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: Request contains an invalid argument."

What invalid argument is being referred to here?

For context the dependences on this project are,

  "dependencies": {
        "@angular/cdk": "^9.2.4",
        "@angular/common": "~9.1.6",
        "@angular/core": "~9.1.6",
        "@angular/fire": "^6.0.0",
        "@angular/flex-layout": "^9.0.0-beta.31",
        "@angular/forms": "~9.1.6",
        "@angular/platform-browser": "^9.1.11",
        "@angular/platform-browser-dynamic": "^9.1.11",
        "@angular/pwa": "^0.901.8",
        "@angular/router": "~9.1.6",
        "@angular/service-worker": "^9.1.11",
        "@capacitor/android": "^2.2.0",
        "@capacitor/core": "2.2.0",
        "@capacitor/ios": "^2.2.0",
        "@codetrix-studio/capacitor-google-auth": "^2.1.1",
        "@firebase/app": "^0.6.5",
        "@ionic-native/core": "^5.0.7",
        "@ionic-native/header-color": "^5.26.0",
        "@ionic-native/sign-in-with-apple": "^5.26.0",
        "@ionic-native/splash-screen": "^5.0.0",
        "@ionic-native/status-bar": "^5.0.0",
        "@ionic/angular": "^5.0.0",
        "@ionic/pro": "^2.0.4",
        "@ionic/pwa-elements": "^1.5.2",
        "@rdlabo/capacitor-facebook-login": "^2.0.3",
        "@zxing/library": "^0.17.0",
        "@zxing/ngx-scanner": "^3.0.0",
        "capacitor-fcm": "^2.0.0",
        "chart.js": "^2.9.3",
        "cordova-android": "^8.1.0",
        "cordova-ios": "^6.0.0",
        "cordova-plugin-headercolor": "^1.0.0",
        "cordova-plugin-ionic": "^5.4.7",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-sign-in-with-apple": "^0.1.1",
        "cordova-plugin-splashscreen": "^5.0.4",
        "cordova-plugin-whitelist": "^1.3.4",
        "core-js": "^2.6.9",
        "date-fns": "^1.30.1",
        "firebase": "^7.15.1",
        "firebase-admin": "^8.12.1",
        "libphonenumber-js": "^1.7.52",
        "ng-circle-progress": "^1.5.1",
        "ng2-charts": "^2.3.2",
        "ng2-dragula": "^2.1.1",
        "ng2-odometer": "^1.1.3",
        "rxjs": "^6.5.5",
        "stripe": "^7.9.1",
        "trackjs": "^3.3.0",
        "tslib": "^1.9.0",
        "zone.js": "^0.10.3"
      },
      "devDependencies": {
        "@angular-devkit/architect": "^0.901.8",
        "@angular-devkit/build-angular": "^0.901.8",
        "@angular-devkit/core": "^9.1.8",
        "@angular-devkit/schematics": "^9.1.8",
        "@angular/cli": "~9.1.5",
        "@angular/compiler": "~9.1.6",
        "@angular/compiler-cli": "~9.1.6",
        "@angular/language-service": "~9.1.6",
        "@capacitor/cli": "2.2.0",
        "@compodoc/compodoc": "^1.1.11",
        "@ionic/angular-toolkit": "^2.1.1",
        "@ionic/cli": "^6.10.1",
        "@ionic/ng-toolkit": "^1.1.0",
        "@ionic/schematics-angular": "^1.0.7",
        "@types/jasmine": "^3.5.10",
        "@types/jasminewd2": "^2.0.8",
        "@types/node": "^12.11.1",
        "@types/stripe": "^7.13.23",
        "codelyzer": "^5.1.2",
        "cordova-plugin-ionic-webview": "^5.0.0",
        "firebase-tools": "^8.4.2",
        "jasmine-core": "^3.5.0",
        "jasmine-spec-reporter": "^4.2.1",
        "karma": "^5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.0",
        "karma-jasmine": "~3.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.3",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~3.8.3",
        "webpack-bundle-analyzer": "^3.8.0"
      }

This app.module seems to follow the Angular Fire docs fine.

 imports: [
        BrowserModule,
        FormsModule,
        IonicModule.forRoot(),
        RouterModule.forRoot(routes),
        SharedProvidersModule,
        SharedComponentsModule,
        ModalModule,
        AngularFireModule.initializeApp(environment.firebase, 'PROJECT_NAME'),
        AngularFireFunctionsModule,
        AngularFirestoreModule,
        AngularFireAuthModule,
        AngularFireMessagingModule,
        AngularFireStorageModule,
        AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
      ],
      providers: [
        HeaderColor,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
      ],

1 post - 1 participant

Read full topic

Alright I spent more than 4 hours on this so time to ask.

What Im trying to do at a very high level is have 2 identical apps that will only get some configuration changed during build time (such as the app name server to connect, etc).

Let’s assume for simplicity this configuration for now will just be a plain object. {app_name: foo_1}

After doing a lot of search I found multi-app config and hooks to do something specific.

So I made a script foo.js and just simple fs.copyFileSync.

Here’s my ionic.config.js

{
  "defaultProject": "foo1",
  "projects": {
    "foo1": {
          ...
	  "hooks": {
	  	"build:before": "scripts/app-config.foo1.js",
	  	"serve:before": "scripts/app-config.foo1.js"
	  }
    },
    "foo2": {
          ...
	  "hooks": {
	  	"build:before": "scripts/foo2.js",
	  	"serve:before": "scripts/foo2.js"
	  }
    },
  }
}

And my script foo1.js

const fs = require('fs');

function run(ctx) {
	fs.copyFileSync('./src/model/config/foo1.ts', './src/model/config/foo.ts');
	process.env.FOO_BAR = 'bar';
	window.ENV = 'bar';
	console.warn('-------');
	console.error(ctx);
}
window.ENV = 'bar';
run();
console.warn('WWWWWWWWWWW');
module.exports = run;

The problem is the hook doesn’t run when I hit ionic serve… And none of the actions are visible anywhere.

1 post - 1 participant

Read full topic

i want to auto-loop scrollX repeat the images(marquee like effect) and i can still scroll them manually, the auto-loop scroll will pause when hover the images, thanks much!!

螢幕截圖 2020-06-20 上午10.33.184096×2304 1.99 MB

螢幕截圖 2020-06-20 上午10.33.064096×2304 2.09 MB

1 post - 1 participant

Read full topic

I have this code in one of my components

constructor(
    private platform: Platform,
    private storageIonic: NativeStorage,
  ) {
    this.platform.ready().then(() => {
      this.storageIonic.getItem('background').then((bg) => {
        var html = document.getElementById('chatDetails');
        html.style.setProperty('--background', 'url('+ bg.src +') no-repeat 0 0');
      }).catch(error => console.error(error));
    });
  }

This code is in charge of loading image from local storage and place it as background of my page, it works but the issue is:

When I change my background and back to this page it doesn’t update the background, either i must open another pages then back and see new image or i should totally close my app and re-open it.

I need to make this code works without requiring to open another page or closing app. Any idea on that?

1 post - 1 participant

Read full topic

same issue, different way to do, but how can i modify auto-play slide non-stop, like marquee effect, but i still can scroll the slides manually, and when hover the slide pause, it continue when i leave hover, thanks!

螢幕截圖 2020-06-20 上午10.33.064096×2304 2.09 MB

1 post - 1 participant

Read full topic

How can we close the search bar if we hit the cancel button? Or maybe better: when you hit any area outside the search bar?

   <ion-searchbar
            *ngIf="toggled"
            placeholder="Search"
            inputmode="text" type="text"
            [(ngModel)]="searchTerm" mode="ios"
            (ionChange)="onSearchChange($event)"
            (ionCancel)="showDefaultBar()"
            (ionBlur)="showDefaultBar()"
            showCancelButton="always"
            [debounce]="250"
            animated="true">
</ion-searchbar>

You can see that the cancel button is always being shown. The problem is that when you hit cancel, it only clears the text input field and does not actually cancel the searchbar. I would like to make sure the searchbar is closed after hitting cancel, like on native iOS .

Is there a way to do this? Couldn’t find anything in the Ionic documents.

2 posts - 2 participants

Read full topic

Hi Team
I am using ionic 5.
When i build for ios i am getting below error. i command line tools available.

CordovaError: Promise rejected with non-error: “xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance\n”

at /usr/local/lib/node_modules/cordova/bin/cordova:29:15

at processTicksAndRejections (internal/process/task_queues.js:97:5)

[ ERROR ] An error occurred while running subprocess cordova .

How to resolve this error.

Thanks in Advance

Ramji

1 post - 1 participant

Read full topic

Is there any way to read SMS when it arrives using IONIC 4? I need to trigger some actions when the incoming message has a specific text. I saw this cordova-sms-plugin , but it can only send SMS. Any help in this regard would be helpful. I see many apps reading my messages, but why can’t I do it with IONIC?

1 post - 1 participant

Read full topic

Is there any plugin to switch on and off front flashlight of android mobile?

Although I have developed an app for back flashlight with flashlight plugin.

Thanks

1 post - 1 participant

Read full topic