@rakesh_appycodes wrote:

Hi
In my app there are lots of api calls so its not possible to check internet connection on every component.

So i want to check internet connection on http interceptor and show a toast message and stop the http request.

My app build with Ionic 4

Posts: 1

Participants: 1

Read full topic

@Diskonto wrote:

Running command
ionic start Diskonto blank --type=angular

I can not get past the following error:

17378 verbose Windows_NT 10.0.17134
17379 verbose argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “i”
17380 verbose node v10.16.1
17381 verbose npm v6.9.0
17382 error path C:\WINDOWS\system32\Diskonto\node_modules.staging@angular\compiler-9c24eeac\bundles\compiler.umd.js
17383 error code EPERM
17384 error errno -4048
17385 error syscall unlink
17386 error Error: EPERM: operation not permitted, unlink ‘C:\WINDOWS\system32\Diskonto\node_modules.staging@angular\compiler-9c24eeac\bundles\compiler.umd.js’
17386 error { [Error: EPERM: operation not permitted, unlink ‘C:\WINDOWS\system32\Diskonto\node_modules.staging@angular\compiler-9c24eeac\bundles\compiler.umd.js’]
17386 error cause:
17386 error { Error: EPERM: operation not permitted, unlink ‘C:\WINDOWS\system32\Diskonto\node_modules.staging@angular\compiler-9c24eeac\bundles\compiler.umd.js’
17386 error errno: -4048,
17386 error code: ‘EPERM’,
17386 error syscall: ‘unlink’,
17386 error path:
17386 error ‘C:\WINDOWS\system32\Diskonto\node_modules\.staging\@angular\compiler-9c24eeac\bundles\compiler.umd.js’ },
17386 error stack:
17386 error ‘Error: EPERM: operation not permitted, unlink ‘C:\WINDOWS\system32\Diskonto\node_modules\.staging\@angular\compiler-9c24eeac\bundles\compiler.umd.js’’,
17386 error errno: -4048,
17386 error code: ‘EPERM’,
17386 error syscall: ‘unlink’,
17386 error path:
17386 error ‘C:\WINDOWS\system32\Diskonto\node_modules\.staging\@angular\compiler-9c24eeac\bundles\compiler.umd.js’,
17386 error parent: ‘Diskonto’ }
17387 error The operation was rejected by your operating system.
17387 error It’s possible that the file was already in use (by a text editor or antivirus),
17387 error or that you lack permissions to access it.
17387 error
17387 error If you believe this might be a permissions issue, please double-check the
17387 error permissions of the file and its containing directories, or try running
17387 error the command again as root/Administrator (though this is not recommended).
17388 verbose exit [ -4048, true ]

Posts: 1

Participants: 1

Read full topic

@FangerZero wrote:

I was going to post a “help” thread but there is no proper category for it. Would be nice if there was a “General/Misc Help” as it seems all the categories are ionic specific. I was going to put it in ionic but that description is for ionic specifically, while my problem is more not ionic specific but I’m making an Ionic app. That question being, “Help with hooking up MySql + Express and running to call APIs”.

Posts: 1

Participants: 1

Read full topic

@mgselectronic wrote:

Good day:

I got a warning when I use “@types/bcryptjs”: “3.0.0” in Ionic. After I import “@types/bcryptjs”: “3.0.0” in package.json file and successfully create the following:
BcryptJS.hashSync(password, salt);
and
BcryptJS.compareSync(password, hash);
I got warning both in command line when compile

[ng] WARNING in /Users/yurippe/node_modules/bcryptjs/dist/bcrypt.js
[ng] Module not found: Error: Can’t resolve ‘crypto’ in ‘/Users/yurippe/node_modules/bcryptjs/dist’

and Chrome console like:

Module not found: Error: Can’t resolve ‘crypto’ in ‘/Users/yurippe/node_modules/bcryptjs/dist’
warnings @ vendor.js:110025

It is not big problem, all functions fine, but could somebody can help how to remove this warning please?

Posts: 1

Participants: 1

Read full topic

@Kyrax80 wrote:

When I create a component, its .module isn’t created. Is there a way like some parameter to create it too?

Thanks

Posts: 1

Participants: 1

Read full topic

@saif wrote:

I created a QR/ Barcode scanner in my ionic project by using this online link,
https://www.freakyjolly.com/ionic-4-add-barcode-qr-code-scanner-encoder-ionic-4-native-plugin/
the qr code is working fine and generating an XML output data of qr code. below is xml out put iam getting.

Barcode data {"text":<?xml version=\"1.0\"encoding=\"UTF-8\"?><PrintLetterBarcodeData name="john" age="36" city="New York" country="USA">}

As in the tutorial link, when i try to output the data into page using code,

{{ scannedData["text"] }}

the complete details of qr code which is shown in the xml file is getting displayed. this is because of text keyword used. But i want to specifically output the name, age or city available in the XML content. please help me how can i do this.

Posts: 1

Participants: 1

Read full topic

@stilren wrote:

When I upgraded to @ionic/react 0.0.9 (from 0.0.5) I started getting a typescript error when using the component saying:

Type error: Type ‘{ children: (string | void | Element); id: string; }’ is missing the following properties from type ‘Pick<ExternalProps, “style” | “title” | “children” | “onError” | “hidden” | “dir” | “slot” | “accessKey” | “draggable” | “lang” | “className” | “id” | “prefix” | “contentEditable” | … 239 more … | “onSelectCapture”>’: onAuxClick, onAuxClickCapture TS2739

121 |         <IonApp>
122 |           <IonReactRouter>
123 |             <IonPage id="main">
    |              ^

Not really sure how to go about debugging this or what other information is required? If I supress the ts-error the app will compile and work.

I am using vs code 1.36.1 with ts version 3.5.2

Posts: 1

Participants: 1

Read full topic

@adsfelipe wrote:

I’m trying to set persistence authentication to my ionic 4 web project.

I’ tried firebase and angularfire2 methods and my local storage is enabled.

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);

angularFireAuth.authState.subscribe((user)=>{
  console.log(user);      
});


firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user);        
  } else {
    console.log("nop");        
  }
});

Both methods return NULL when the page is refreshed, and then the user is redirected to the login page. I would like to implement a way the user stays logged in.

tested in chrome.

Posts: 1

Participants: 1

Read full topic

@ankitkaushik wrote:

Dear Experts,

I am using Ionic 3 where Firebase is the backend. Ionic info details are as follows:

Ionic:

   Ionic CLI          : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   Cordova CLI       : 7.1.0
   Cordova Platforms : android 6.4.0
   Cordova Plugins   : cordova-plugin-ionic-webview 4.1.1, (and 23 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : not installed

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.0.0 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 10.1 Build version 10B61

Whenever i build the file it is always so difficult because of plugins, cordova, android version. It usually take few days to debug the code every time before i manage to make a build.

If i update it to the latest version then it is going to break my app because of changes in Angular Firebase latest version. There is always some or the other compatibility issue.

Please suggest most stable way to build the app. Appreciate your help in advance.

Posts: 1

Participants: 1

Read full topic

@zadie wrote:

I made a prototype app with Ionic Creator. I am looking for a freelance/contract developer to take the prototype and create a cross platform app using Ionic, Firebase, and Stripe.

Here are some of the requirements:

• Account creation and authentication
• Monthly subscription paid to a Stripe account. First month free, of course.
• User input forms (not account holder). This is a retail document creation app.
• User submits Name, address, phone, email, etc. data input
• Use the camera to “scan” documents.
• Agree to some terms
• Signature on screen with a finger.
• Save PDF version of the completed document to cloud storage like Dropbox, GDrive, OneDrive.
• User data recall on repeat visits by email or phone lookup.

I’m looking for some price and time frame quotes from a few capable developers. Get in touch if you’re interested and we can talk details.

Posts: 1

Participants: 1

Read full topic

@pieterjanvdp wrote:

Hello,

Sorry if the category does not match my kind of post.

I am building an app in Ionic 4. Recently, I’ve been working on trying to get the user to take a picture and upload it. I have followed the Ionic 4 images tutorial: https://devdactic.com/ionic-4-image-upload-storage/ . However, there is one problem I cannot seem to fix: whatever I try, as soon as the user took a picture with the camera or selected one out of the image gallery, the list that’s supposed to provide a preview of the image does not display the image:https://imgur.com/a/6FCXNgD

I have already tried to get rid of node modules and app plugins, reinstalling those. I have also created an app from scratch, only implementing the tutorial - however, the same error showed up.

Not unimportant: when I run the app on iPhone DevApp using ‘ionic serve --devapp’, the image preview list does not add an item at all (the exact error is on the function this.webview.convertFileSrc(img); ) and the following warnings are displayed:

[ng] [console.warn]: "Native: tried calling WebView.convertFileSrc, but the WebView plugin is not installed."
[ng] [console.warn]: "Install the WebView plugin: 'ionic cordova plugin add cordova-plugin-ionic-webview'"

… which is also curious because that plugin is, in fact, installed (present in both node_modules and plugins of the iOS platform folder).

I’ve been stuck on this for a few weeks now. Any help would be immensely appreciated. Thank you!

Posts: 1

Participants: 1

Read full topic

@rduman2002 wrote:

I facing a problem about ionic 4. It was working with ionic 3 after upgrading ionic 4 now its not working. Basicly, I have a project created with ionic3 (I call it native part ) and it just checks the service whether has a new version (content part). If there is a new version (this is also ionic 3 project zipped in server) downloads the zip to documents folder (ios) and unzip and change the location of app to documents. Here is code ionic 3 code

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer’;
import { Network } from ‘@ionic-native/network’;
import { Global } from ‘…/…/providers/global/global’;
import { Service } from ‘…/…/providers/service/service’;
import { File } from ‘@ionic-native/file’;
import { window } from ‘rxjs/operator/window’;
import { normalizeURL } from ‘ionic-angular’;
import { Zip } from ‘@ionic-native/zip’;
@Component({

• selector: ‘page-home’,*

• templateUrl: ‘home.html’*
  })
  export class HomePage {

• connection: boolean = true;*

• nativeVersion = “2”;*

• currentValue: string = “0%”;*

• fileCount: number;*

• totalSize: number;*

• files: any;*

• curFileIndex: number;*

• curFileSize: number;*

• systemContentVersion: number;*

• dataDirectory: string;*

• os: string = “”;*

• constructor(public platform: Platform, public global: Global, public network: Network, public file: File, public transfer: FileTransfer, public service: Service, private zip: Zip) {*

• this.platform.ready().then(() => {*

•  if (this.platform.is('ios')) {*
  

•    this.os = "ios";*
  

•  } else if (this.platform.is('android')) {*
  

•    this.os = "android";*
  

•  }*
  

•  this.network.onDisconnect().subscribe(() => {*
  

•    this.connection = false;*
  

•    this.global.showMessage("Hata", "İnternet bağlantısı koptu !");*
  

•  });*
  

•  this.network.onConnect().subscribe(() => {*
  

•    this.connection = true;*
  

•    this.startDownloading();*
  

•  });*
  

•  this.startDownloading();*
  

• });*

• }*

• startDownloading() {*

• if (this.os == “ios”) {*

•  this.dataDirectory = this.file.documentsDirectory + "v" + this.nativeVersion + "/";*
  

• }*

• else if (this.os == “android”) {*

•  this.dataDirectory = this.file.dataDirectory + "v" + this.nativeVersion + "/";*
  

• }*

• if (this.connection) {*

•  let contentVersion = localStorage.getItem("contentVersion");*
  

•  if (contentVersion == null)*
  

•    contentVersion = "0";*
  

•  //todo *
  

•  //contentVersion = "0";*
  

•  this.service.checkFiles(parseInt(contentVersion), this.nativeVersion, this.os).subscribe(result => {*
  

•    if (result.data.fileCount == 0) {*
  

•      //guncelleme yok*
  

•      var contentVersion = localStorage.getItem("contentVersion");*
  

•      console.log("contentVersion : " + contentVersion);*
  

•      this.currentValue = "100%";*
  

•      this.gotoIndex();*
  

•    }*
  

•    else {*
  

•      //guncelleme baslat*
  

•      //this.service.showLoading("Güncellemeler alınıyor...");*
  

•      this.downloadFiles(result);*
  

•    }*
  

•  });*
  

• } else {*

•  this.global.showMessage("Hata", "Internet bağlantısı gerekiyor !");*
  

• }*

• }*

• downloadFiles(result: any) {*

• console.log(result);*

• this.fileCount = result.data.fileCount;*

• this.totalSize = result.data.totalSize;*

• this.files = result.data.files;*

• this.curFileIndex = -1;*

• this.curFileSize = 0;*

• this.systemContentVersion = result.data.contentVersion;*

• this.checkCompleted();*

• }*

• checkCompleted() {*

• console.log(“checkCompleted :” + this.curFileIndex + " - " + this.fileCount);*

• if (this.curFileIndex < (this.fileCount - 1)) {*

•  this.curFileIndex++;*
  

•  this.downloadFile();*
  

• } else {*

•  this.downloadFinished();*
  

• }*

• }*

• downloadFile() {*

• let fileTransfer: FileTransferObject = this.transfer.create();*

• let file = this.files[this.curFileIndex];*

• let fileLocation = file.path;*

• let fileName = file.name;*

• this.curFileSize += file.size;*

• let targetPath = this.dataDirectory + “package.zip”;*

• if (!this.platform.is(‘cordova’)) {*

•  return false;*
  

• }*

• console.log("fileName : " + fileName);*

• console.log("targetPath : " + targetPath);*

• let random = Math.random() * 1000000;*

• fileTransfer.download(fileLocation + “?v=” + random, targetPath).then(result => {*

•  //download completed*
  

•  this.currentValue = (this.curFileSize / this.totalSize) * 100 + "%";*
  

•  this.checkCompleted();*
  

• }).catch(error => {*

•  this.global.showMessage("Hata ! Dosya indirilemedi !, Dosya Adı : " + fileLocation, "Hata");*
  

• });*

• fileTransfer.onProgress((progressEvent) => {*

•  console.log(progressEvent);*
  

•  this.currentValue = Math.floor(progressEvent.loaded / progressEvent.total * 100) + "%";*
  

• });*

• }*

• downloadFinished() {*

• console.log(“download finished !”);*

• console.log(this.dataDirectory);*

• localStorage.setItem(“contentVersion”, this.systemContentVersion.toString());*

• //document.location.href = this.dataDirectory + “index.html”;*

• //paket indi paketi acalim.*

• this.unzip(this.dataDirectory + “package.zip”, this.dataDirectory);*

• }*

• gotoIndex() {*

• console.log(“url :” + document.location.href);*

• console.log("index : " + this.dataDirectory + “index.html”);*

• console.log(“indexe gidiliyor …”);*

• let path = this.dataDirectory + “index.html”;*

• if (this.os == “ios”) {*

•  path = normalizeURL(this.dataDirectory + "index.html");*
  

• } else if (this.os == “android”) {*

•  path = this.dataDirectory + "index.html";*
  

• }*

• console.log("normalized path : " + path);*

• document.location.href = path;*

• }*

• unzip(source: string, dest: string) {*

• console.log(“zipt source”, source);*

• this.zip.unzip(source, dest, (progress) => {*

•  this.currentValue = Math.round((progress.loaded / progress.total) * 100) + '%';*
  

•  console.log('Unzipping, ' + this.currentValue);*
  

• })*

•  .then((result) => {*
  

•    if (result === 0) {*
  

•      console.log('SUCCESS');*
  

•      this.gotoIndex();*
  

•    }*
  

•    if (result === -1) console.log('FAILED');*
  

•  });*
  

• }*
  }

after updating ionic 4 I noticed that something changed. there is no normalizeURL() method. I changed it webview.convertFileSrc(path) instead of normalizeURL but this time I can not open downloaded content. Always shows white screen. I am really stuck and searhing one week with no luck. How can I do that in ionic 4 ?

here is ionic 4 code
import { Component } from ‘@angular/core’;

import { Platform } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { Global } from ‘src/providers/global/global’;
import { Service } from ‘src/providers/service/service’;
import { Network } from ‘@ionic-native/network/ngx’;
import { Zip } from ‘@ionic-native/zip/ngx’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer/ngx’;
import { File } from ‘@ionic-native/file/ngx’;
import { DomSanitizer } from ‘@angular/platform-browser’;
import { WebView } from ‘@ionic-native/ionic-webview/ngx’;

@Component({

• selector: ‘app-root’,*

• templateUrl: ‘app.component.html’*
  })
  export class AppComponent {

• connection: boolean = true;*

• nativeVersion = “2”;*

• currentValue: string = “0%”;*

• fileCount: number;*

• totalSize: number;*

• files: any;*

• curFileIndex: number;*

• curFileSize: number;*

• systemContentVersion: number;*

• dataDirectory: string;*

• os: string = “”;*

• constructor(*

• private platform: Platform,*

• private splashScreen: SplashScreen,*

• private statusBar: StatusBar, public global: Global, public network: Network, public file: File, public transfer: FileTransfer, public service: Service, private zip: Zip, private webview: WebView, private domSanitizer: DomSanitizer*

• ) {*

• this.initializeApp();*

• }*

• initializeApp() {*

• this.platform.ready().then(() => {*

•  this.statusBar.styleDefault();*
  

•  this.splashScreen.hide();*
  

•  this.platform.ready().then(() => {*
  

•    if (this.platform.is('ios')) {*
  

•      this.os = "ios";*
  

•    } else if (this.platform.is('android')) {*
  

•      this.os = "android";*
  

•    }*
  

•    this.network.onDisconnect().subscribe(() => {*
  

•      this.connection = false;*
  

•      this.global.showMessage("Hata", "İnternet bağlantısı koptu !");*
  

•    });*
  

•    this.network.onConnect().subscribe(() => {*
  

•      this.connection = true;*
  

•      this.startDownloading();*
  

•    });*
  

•    this.startDownloading();*
  

•  });*
  

• });*

• }*

• startDownloading() {*

• if (this.os == “ios”) {*

•  this.dataDirectory = this.file.documentsDirectory + "www/v" + this.nativeVersion + "/";*
  

• }*

• else if (this.os == “android”) {*

•  this.dataDirectory = this.file.dataDirectory + "v" + this.nativeVersion + "/";*
  

• }*

• if (this.connection) {*

•  let contentVersion = localStorage.getItem("contentVersion");*
  

•  if (contentVersion == null)*
  

•    contentVersion = "0";*
  

•  //todo: kaldirilacak*
  

•  //contentVersion = "0";*
  

•  this.service.checkFiles(parseInt(contentVersion), this.nativeVersion, this.os).subscribe(result => {*
  

•    if (result.resultCode == 0) {*
  

•      if (result.data.fileCount == 0) {*
  

•        //guncelleme yok*
  

•        var contentVersion = localStorage.getItem("contentVersion");*
  

•        console.log("contentVersion : " + contentVersion);*
  

•        this.currentValue = "100%";*
  

•        this.gotoIndex();*
  

•      }*
  

•      else {*
  

•        //guncelleme baslat*
  

•        //this.service.showLoading("Güncellemeler alınıyor...");*
  

•        this.downloadFiles(result);*
  

•      }*
  

•    }*
  

•  });*
  

• } else {*

•  this.global.showMessage("Hata", "Internet bağlantısı gerekiyor !");*
  

• }*

• }*

• downloadFiles(result: any) {*

• console.log(result);*

• this.fileCount = result.data.fileCount;*

• this.totalSize = result.data.totalSize;*

• this.files = result.data.files;*

• this.curFileIndex = -1;*

• this.curFileSize = 0;*

• this.systemContentVersion = result.data.contentVersion;*

• this.checkCompleted();*

• }*

• checkCompleted() {*

• console.log(“checkCompleted :” + this.curFileIndex + " - " + this.fileCount);*

• if (this.curFileIndex < (this.fileCount - 1)) {*

•  this.curFileIndex++;*
  

•  this.downloadFile();*
  

• } else {*

•  this.downloadFinished();*
  

• }*

• }*

• downloadFile() {*

• let fileTransfer: FileTransferObject = this.transfer.create();*

• let file = this.files[this.curFileIndex];*

• let fileLocation = file.path;*

• let fileName = file.name;*

• this.curFileSize += file.size;*

• let targetPath = this.dataDirectory + “package.zip”;*

• if (!this.platform.is(‘cordova’)) {*

•  return false;*
  

• }*

• console.log("fileName : " + fileName);*

• /* if (this.os == “ios”) {*

•  targetPath = this.file.documentsDirectory + fileName;*
  

• }*

• else if (this.os == “android”) {*

•  targetPath = this.file.dataDirectory + fileName;*
  

• }*

• else {*

•  // do nothing, but you could add further types here e.g. windows/blackberry*
  

•  return false;*
  

• } /

• console.log("targetPath : " + targetPath);*

• let random = Math.random() * 1000000;*

• fileTransfer.download(fileLocation + “?v=” + random, targetPath).then(result => {*

•  //download completed*
  

•  this.currentValue = (this.curFileSize / this.totalSize) * 100 + "%";*
  

•  this.checkCompleted();*
  

• }).catch(error => {*

•  this.global.showMessage("Hata ! Dosya indirilemedi !, Dosya Adı : " + fileLocation, "Hata");*
  

• });*

• fileTransfer.onProgress((progressEvent) => {*

•  console.log(progressEvent);*
  

•  this.currentValue = Math.floor(progressEvent.loaded / progressEvent.total * 100) + "%";*
  

• });*

• }*

• downloadFinished() {*

• console.log(“download finished !”);*

• console.log(this.dataDirectory);*

• localStorage.setItem(“contentVersion”, this.systemContentVersion.toString());*

• //document.location.href = this.dataDirectory + “index.html”;*

• //paket indi paketi acalim.*

• this.unzip(this.dataDirectory + “package.zip”, this.dataDirectory);*

• }*

• gotoIndex() {*

• console.log(“url :” + document.location.href);*

• let rootUrl = document.location.href;*

• console.log("index : " + this.dataDirectory + “index.html”);*

• console.log(“indexe gidiliyor …”);*

• let path = this.dataDirectory + “index.html”;*

• if (this.os == “ios”) {*

•  path = this.dataDirectory + "index.html";*
  

• } else if (this.os == “android”) {*

•  path = this.dataDirectory + "android/" + "index.html";*
  

• }*

• console.log("org path : ", path);*

• path = this.normalizePath(path);*

• console.log("normalized path : " + path);*

• document.location.href = path;*

• //window.open(path);*

• }*

• normalizePath(path: string) {*

• return this.webview.convertFileSrc(path)*

• }*

• unzip(source: string, dest: string) {*

• console.log(“zipt source”, source);*

• this.zip.unzip(source, dest, (progress) => {*

•  this.currentValue = Math.round((progress.loaded / progress.total) * 100) + '%';*
  

•  console.log('Unzipping, ' + this.currentValue);*
  

• })*

•  .then((result) => {*
  

•    if (result === 0) {*
  

•      console.log('SUCCESS');*
  

•      this.gotoIndex();*
  

•    }*
  

•    if (result === -1) console.log('FAILED');*
  

•  });*
  

• }*
  }

Posts: 2

Participants: 2

Read full topic

@mahadevann wrote:

I have been looking for a solution to implement horizontal scroll in virtual scroll, but have not found any solution. Can some let me know how to implement horizontal scroll in .

Posts: 1

Participants: 1

Read full topic

@donotsue wrote:

Hi there,

I got three folders side by side: The first one is a “common” folder, the second and third one is an Ionic project folder. I tried to symlink with mklink /D services ..\..\common\services\ a symbolic link called services.

At the first look everything seems nice and dandy when I check the path handlings over the console. But at building time I get errors corresponding to not existing @angular- or @ionic-libraries, because of compiling in the real common-folder, where no node folder exists …

In the past I remember an argument ng serve --preserve-symlinks but at today versions it seems to be gone …

Anyone had practical experiences with shared classes in different Ionic projects?

Fyi, here’s an example of one of these shared common classes:

File debugService.ts

import { Injectable } from '@angular/core';
// ERROR: Over a symlink it tries to find @angular in ../../common/services
// but it should look into the services folder of the actual ionic project folder :/

@Injectable()
export class DebugService {
  public isActive: boolean = true;
  public debugRoles: DebugRoleEnum[] = [
    DebugRoleEnum.myFirstRole,
    DebugRoleEnum.mySecondRole,
  ];
  log(debugRole: DebugRoleEnum, ...messages) { if (this.debugRoles.indexOf(debugRole) > -1) console.log(DebugRoleEnum[debugRole], messages); }
}

export enum DebugRoleEnum {
  myFirstRole,
  mySecondRole,
  myThirdRole,
  myAnotherRole,
}

Yes, it’s just a simple injected class …

Thank you for any help

Posts: 1

Participants: 1

Read full topic

@danielederosa wrote:

I have a problem with my Action Sheet in combination with (press)-event in a Ionic4 Application.

My code

HTML (Press-Event)

<ion-item *ngFor="let book of bibleBooks | calculateProcess: selectedBookType; let i = index"
                      (tap)="selectBibleBook(book); selectedItem=i;scrollVersesToTop(); setCurrentBook(i)"
                      (press)="openBookFunctions(book, selectedBookType, $event)"
                      [style.touch-action]="'pan-y'"
                      [class.active]="selectedItem == i"
                      [class.currentBook]="i == currentBook"
>

Component (Action Sheet)

const actionSheet = await this.actionSheetController.create({
  header: this.tFunctions,
  backdropDismiss: false,
  buttons: [
    {
      text: this.tMarkAsRead,
      icon: 'checkmark',
      handler: () => {
        this.markBookAsRead(book, selectedBookType)
      }
    },
    {
      text: this.tMarkAsUnread,
      icon: 'close',
      handler: () => {
        this.markBookAsUnRead(book, selectedBookType)
      }
    },
    {
      text: this.tCancel,
      role: 'cancel',
      handler: () => {
        return false;
      }
    }
  ]
});

await actionSheet.present();

The problem

When I activate the Action Sheet with an element close to the buttons, the app automatically selects a button. Reason: Due to the (press)-Event my finger is still on the screen. The button is activated by releasing the finger. How can I prevent this?

Posts: 1

Participants: 1

Read full topic

@danielederosa wrote:

Is there any alternative for -webkit-overflow-scrolling: touch; to force smooth scrolling with momentum?

My problem

> div {
	overflow: auto;
	height: 100%;
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar {
		display:none!important;
	}
}

If I use -webkit-overflow-scrolling: touch;, ::-webkit-scrollbar will loose his function and the scroll bars appearing again.

So… is there another way to activate smooth scrolling with momentum AND hide scrollbars in a Ionic 4 application? (Scrolling inside a div container)

Posts: 1

Participants: 1

Read full topic

@mtnoronha7 wrote:

Ionic says I’m using proxy or offline, but none of this is true.

$ ionic login mtnoronha7@gmail.com anypasswordhere123123
(node:23816) ExperimentalWarning: The http2 module is an experimental API.
[ERROR] Network connectivity error occurred, are you offline?

        If you are behind a firewall and need to configure proxy settings, see: https://ion.link/cli-proxy-docs

        Error: connect ECONNREFUSED 127.0.0.1:8080
        at Object._errnoException (util.js:999:13)
        at _exceptionWithHostPort (util.js:1020:20)
        at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1207:14)

Check my ionic.config file:

{
  "name": "side",
  "integrations": {
    "cordova": {}
  },
  "type": "angular"
}

And Also, i dont have any path variable set.
Just to be clear: I am online and no firewall set.

Thank you!

Posts: 1

Participants: 1

Read full topic

@AndrewSuen wrote:

I am doing a todo-list using ionic4 and firebase, I hope I can get lists’ id in my detail page, so when people click list on the home page they could check the detail.

I use ionic4 and firebase, in windows.

this is my routing.ts:

 ....
 { path: 'homepage', loadChildren: './pages/Homepage/homepage.module#HpagePageModule' },
 ....
   path: 'list-detail/:id',
   loadChildren: 
'./pages/list-detail/listdetail.module#ListDetailPageModule',
   canActivate: [AuthGuard]
 ....
];

and here is my list-detail.ts:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-list-detail',
  templateUrl: './list-detail.page.html',
  styleUrls: ['./list-detail.page.scss'],
})
export class ListDetailPage implements OnInit {
  public listId :string;
  public currentList: any = {}; 

  constructor(
    private listService:ListService,
    private route:ActivatedRoute,
    ) { }

  ngOnInit() {

    this.listId = this.route.snapshot.paramMap.get('id');

    this.listService
    .getlistDetail(this.listId)
    .get()
    .then(listSnapshot => {
      this.currentList = listSnapshot.data();
      this.currentList.id = listSnapshot.id;
  });
}
}

Meanwhile, here is my homepage.html:

  <ion-list>
    <ion-list-header><ion-label>Your Lists</ion-label></ion-list-header>
    <ion-item
      tappable
      *ngFor="let li of list"
      routerLink="/list-detail/{{ list.id }}"
    >
      <ion-label>
        <h2>{{li?.name}}</h2>
        <p>Attribution: <strong>{{li?.attribution}}</strong></p>
      </ion-label>
    </ion-item>
  </ion-list>
   ....

</ion-cotent>

The thing is that when I clicked the list on my page, it occurred “core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘list-detail’”, when I replaced routerLink in the homepage, it works but obviously no parameters in the detail page. What’s wrong with my routing.ts? I found other people also defined URL in this way. Thanks a lot!

Posts: 1

Participants: 1

Read full topic

@karthikmani15 wrote:

I am writhing this in ionic 4 the card comes in top of the page but i make card in centre of the page what will do please help me to solve this.

 <ion-content>

  <ion-card>
     <ion-input placeholder="user"></ion-input>
     <ion-input placeholder="pass"></ion-input>
 </ion-card> 
 </ion-content>

Posts: 1

Participants: 1

Read full topic

@rockodragon wrote:

I’m working in ionic4 REACT JS and after a search occurs I want to set focus back in the search bar, at the end. What’s the strategy to do this in React? I see the docs mention a “signature” of setFocus() => Promise but am not sure what that means and there’s no sample code for react that I could find.

Note: in general I’m not sure how to call the Methods I see listed in the ionic docs within React. plain JS looks like jquery select an element then add an event listener. But presuming there’s a more elegant React way. Any help appreciated.

Thanks

Posts: 1

Participants: 1

Read full topic