@coolestsumit wrote:

is there any way to implement the auto update function . so that if there is any changes in the resources folder of the app, it app can update itself ?

Posts: 1

Participants: 1

Read full topic

@patrickSiyou wrote:

hi guys, could anyone help me fix this error?

core.js:15714 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RegisterPage -> AuthService]:
StaticInjectorError(Platform: core)[RegisterPage -> AuthService]:
NullInjectorError: No provider for AuthService!
Error: StaticInjectorError(AppModule)[RegisterPage -> AuthService]:
StaticInjectorError(Platform: core)[RegisterPage -> AuthService]:
NullInjectorError: No provider for AuthService!
at NullInjector.push…/node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8894)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveNgModuleDep (core.js:21120)
at NgModuleRef_.push…/node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21809)
at resolveNgModuleDep (core.js:21120)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)

my authService

import { Injectable } from '@angular/core';
import { FirebaseService } from './firebase.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class User {
  name: string;
  email: string;

  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}


export class AuthService {

  constructor(public firebaseService: FirebaseService) { }
}

my register page

import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder } from '@angular/forms';

import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
 

  constructor(private formBuilder: FormBuilder,
    private authService: AuthService,
    private router: Router) {}
}

thankyou.

Posts: 1

Participants: 1

Read full topic

@cyrusjayson wrote:

Hi, Please guide me how to import module in lazy loading.! 11%20PM|533x500

I am following this tutorial https://www.jianshu.com/p/a5bdedcaa9ab everything works. but when I implement the plugin to existing project with lazy loading its not working (see the attached imaged). I don’t know what to import and where to import the module.

Posts: 1

Participants: 1

Read full topic

@demokumar wrote:

in my ionic android app I use ion-slider on two pages and on the first page I want to place those bullets at the center of the page and on another page in place that bullets on the image which is inside slider my issue is if I set:

ion-slides div.swiper-pagination {
top:335px ;

}

then this position is set for both

Posts: 1

Participants: 1

Read full topic

@richardshergold wrote:

I realise IE is not officially supported but I’m trying to get my app working across browsers and we need to support IE 11. One issue is with the ion-select component. If you open the ion-select documentation page up in IE you will see that the selection options appear ok but the selected item is then truncated and not fully displayed. Does anyone know of an easy css fix for this?

Posts: 2

Participants: 1

Read full topic

@JerryBels wrote:

Hi,

So I just spent every night for two weeks to migrate my app from V3 to V4. I have mixed feelings about this… And wonder if I need to tweak some more things.

Because right now, the performance has been really degraded from v3 to v4 ! I mean :

Total boot time
v3 : 6s
v4 : 10s

hot reload with serve
v3 : 2 - 3s
v4 : 12 - 15s
(I saw many recommandations regarding this issue, to go and install Node v10 for example… Will try it out tonight)

Loading my biggest page (.ts file is approx. 450 lines)
v3 : ~2s
v4 : ~5s !!!

Add to this, overall performance feels more sluggish. For example, going from tab1 to tab2 has a small delay that feels a little slower than v3. Also, elements in the page that triggers navigation seems to take a little more time before triggering - ion-button or ion-fab-button don’t need tappable property, right ?

So, it was not hard to migrate but a real hassle, as it was expected - but I did it in good faith, thinking I would improve my app performances. Either I was wrong to think this, or there are some more things to do in order to obtain the desired result - in case it should be documented in the migrating guide ( I followed every step and every single point of the Breaking changes.)

Now, let’s ask some questions with some code !

app-routing.module.ts :

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'detail/:id', loadChildren: './pages/detail/detail.module#DetailPageModule' },
  .....
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

First things first, could PreloadAllModules be one of the problematic points ? In Ionic v3 I wasn’t using Lazy Loading much, only for a few pages, so I decided to follow recommandations when migrating and everything is lazy loaded now if I did things right - but I told myself, PreloadAllModules should be the right bet to get both faster boot time and still good performance when opening a page.

tabs.router.module.ts :

const routes: Routes = [
  {
    path: 'app',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [ { path: '', loadChildren: '../pages/home/home.module#HomePageModule' } ]
      },
      {
        path: 'my-list',
        children: [ { path: '', loadChildren: '../pages/my-list/my-list.module#MyListPageModule' } ]
      },
      {
        path: 'actions',
        children: [ { path: '', loadChildren: '../pages/actions/actions.module#ActionsPageModule' } ]
      },
      {
        path: '',
        redirectTo: '/app/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/app/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

This routing is imported to be used used by TabsPageModule. I know what you could say - “you should add children to your tabs so the navigation stack works.”. The format is just like I want it - having main pages in tabs but when navigating to another page, falling back to the main router. It works… It’s just slow.

The rest of the app is mostly the same as it was in V3 - except I took a lot of time to migrate my scss to css4 variables, which in fact reduced my overall custom styles.

I would take any advice on how to test and check what is causing the app to slow down as well.

Thanks and good luck !

Posts: 1

Participants: 1

Read full topic

@krishna12 wrote:

I’m currently working on project supply chain management,working with Ionic Framework, there is typical task where I’m struggling to extract text from the image , is there any option of optical character recognition plugins for Ionic Framework , watched a few videos concerning OCR implementation in you tube for extracting text from the images clicked or videos captured and tried in your application ,but problem arrived is regarding time.Its taking to much time parse data from the image , plugin we are using is google tesseract and abbyy ocr plugins. Looking for better plugin or standard to extract the text in minimal time may in 5 seconds and accurate text .

Plugin Name : cordova-plugin-tesseract -ocr

Posts: 1

Participants: 1

Read full topic

@Dunny wrote:

Hi,

So I need to get a response from a provider that calls a promise,

My component which is never returned a response,

this.printerService.printBluetoothLowEnergy(template).subscribe(function(response) {
            console.log(response);
        });

and my provider,

return window.cordova.plugin.zebraprinter.print(address, join,
        function(success) { 
            
         return true;

        }, function(fail) { 

          return false;
        }
      );

Any help appreciated.

Posts: 1

Participants: 1

Read full topic

@Eduardgutierrez wrote:

I can’t find how to make a Modal with a navigation to push different detail pages.
I’m trying with Angular 7.
Any idea?

Thanks.

Posts: 1

Participants: 1

Read full topic

@1Abhinavmaurya2 wrote:

while focus on ion input field keyboard overlap the input filed how to solve anyone help me out

Posts: 1

Participants: 1

Read full topic

@sedar wrote:

<ion-list *ngFor="let obj of data; let i=index">

  <ion-item-sliding>

      <ion-item>
        <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div>
        <br>Date {{obj.UT_LOG_DATE}}
        <br>Subject : {{obj.UT_SUBJECT}}
        <br>UT_LINK: {{obj.UT_LINK}}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="secondary">
          <ion-icon name="checkmark"></ion-icon>
          Approve
        </button>
        <button ion-button color="blue">
          <ion-icon name="checkmark"></ion-icon>
          Send For<br> Approval
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

Posts: 1

Participants: 1

Read full topic

@indraraj26 wrote:

Title^^^
some of saying store api call in localstorage. since we all know localstorage is not safe to store data.
how can i achieve with sqlite and later sync my data to backend laravel api + mysql

Thank you

Posts: 1

Participants: 1

Read full topic

@welshcathy wrote:

I’m running a simple test - enter a value into an ion-searchbar.
In the browser I can run:

document.querySelector('ion-searchbar');  //=> returns search bar OK 
document.querySelector('input');  //=> returns input field OK

In my tests when I try to grab the input the following all fail:

    const el: HTMLElement = fixture.nativeElement;
    const input = el.querySelector('input');
    expect(input).not.toBeNull();  // FAILS 

    const bar = el.querySelector('ion-searchbar');
    expect(bar.innerHTML).not.toEqual(''); // FAILS
    expect(bar.shadowRoot).not.toBeNull();  // FAILS

HTML Page

<ion-header>
  <ion-toolbar>
    <ion-title>
      Test Page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-searchbar></ion-searchbar>
</ion-content>

Component Class

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage {

  constructor() { }

}

Test Spec

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TestPage } from './test.page';

describe('TestPage', () => {
  let component: TestPage;
  let fixture: ComponentFixture<TestPage>;

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestPage ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents();

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have an searchbar', () => {
    const el: HTMLElement = fixture.nativeElement;
    const bar = el.querySelector('ion-searchbar');
    fixture.detectChanges();
    expect(bar).not.toBeNull();  // FAILS
    expect(bar.shadowRoot).not.toBeNull();  // FAILS
  });

  it('should have an input field', () => {
    const el: HTMLElement = fixture.nativeElement;
    const input = el.querySelector('input');
    expect(input).not.toBeNull();  // FAILS
  });

});

Posts: 1

Participants: 1

Read full topic

@akhilkathi97 wrote:

i am using ionic 4 and I want to accept text from ion input button and show it in form of cards after accepting it.

Posts: 1

Participants: 1

Read full topic

@jfsoftwarellc wrote:

Try to relearn how to use http in Ionic 4 so I can do a sign up process. Tried following this article but something is off.

API Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  url: string = 'http://localhost:3000';

  constructor(public http: HttpClient) {
  }

  post(endpoint: string, body: any, reqOpts?: any): Observable<any> {
    return this.http.post(this.url + '/' + endpoint, body, reqOpts);
  }
}

User Service

import { Injectable } from '@angular/core';
import { ApiService } from './api.service'

@Injectable({
  providedIn: 'root'
})
export class UserService {
  _user: any;

  constructor(public api: ApiService) { }

  signup(accountInfo: any) {
    this.api.post('users.json', { user: accountInfo }).subscribe(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
  }
}

Error
“ERROR in src/app/signup/signup.page.ts(28,36): error TS2339: Property ‘subscribe’ does not exist on type ‘void’.”

I was getting that property ‘subscribe’ does not exist on type ‘Observable’ but now I’m just getting void. Not sure what I changed to get void instead but either way, it no work.

Posts: 1

Participants: 1

Read full topic

@DibbsZA wrote:

I am trying to build a website leveraging the Ionic 4 framework that will integrate uPort & Firebase.

During the compile, a dependancy from inside the uPort package tree (qr-image), throws the following errors:

ERROR in ./node_modules/qr-image/lib/qr.js
Module not found: Error: Cant resolve 'stream' in 'project/node_modules/qr-image/lib'
ERROR in ./node_modules/qr-image/lib/png.js
Module not found: Error: Cant resolve 'zlib' in 'project/node_modules/qr-image/lib'

I know these libraries are part of Node and should have been available to the project.

To verify this I created a new default Angular 7 project and added the same packages and there are no errors reported during compilation.

Is there some capability or package or rule checker that is perhaps absent from the specific Angular distro integrated into Ionic 4 that would cause this behaviour?

Any suggestions on how to overcome this limitation?

I also tried to directly run ng serve from inside the Ionic project and I did get this (along with the original error):
Your global Angular CLI version (7.3.0) is greater than your local version (7.2.4). The local Angular CLI version is used.

My Ionic Info:

   ionic (Ionic CLI)             : 4.10.1 (/Users/user/.nvm/versions/node/v10.15.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

System:

   NodeJS : v10.15.0 (/Users/user/.nvm/versions/node/v10.15.0/bin/node)
   npm    : 6.7.0
   OS     : macOS Mojave

My package.json dependancies:

    "dependencies": {
        "@angular/common": "^7.2.2",
        "@angular/core": "^7.2.2",
        "@angular/fire": "^5.1.1",
        "@angular/forms": "^7.2.2",
        "@angular/http": "^7.2.2",
        "@angular/platform-browser": "^7.2.2",
        "@angular/platform-browser-dynamic": "^7.2.2",
        "@angular/router": "^7.2.2",
        "@ionic-native/core": "^5.0.0",
        "@ionic-native/splash-screen": "^5.0.0",
        "@ionic-native/status-bar": "^5.0.0",
        "@ionic/angular": "^4.0.0",
        "core-js": "^2.5.4",
        "did-jwt": "^0.1.1",
        "firebase": "^5.8.2",
        "rxjs": "~6.3.3",
        "uport-connect": "^1.1.2",
        "zone.js": "~0.8.29"
    },

Thanks

Posts: 1

Participants: 1

Read full topic

@russellbj wrote:

I’m trying to run ’ ionic cordova emulate ios ’ to deploy an Ionic app to the simulator. The simulator opens, but the application fails to deploy.

This is the error message I get:

An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.

Here’s my ionic info:

Ionic:

ionic (Ionic CLI) : 4.10.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.1, (and 4 other plugins)

System:

ios-deploy : 1.9.4
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 9.4.1 Build version 9F2000

The command does create a working ios build that I can open in xcode, but I’m looking for live reload. If anyone has ever dealt with this issue and found a solution, I would love your input.

Thanks!

Posts: 1

Participants: 1

Read full topic

@lucascardoso wrote:

Hello guys!

I have a problem with the image-picker plugin.
The plugin opens the gallery and I can select the image,
however it returns the empty image list.

I’m using Ionic 4 with Capacitor on the Android platform

This is my code

  import { ImagePicker } from '@ionic-native/image-picker/ngx';
  constructor(private galeria: ImagePicker) {}

  getFotoGaleria(){
    console.log("getFotoGaleria: ", this.configuracao);
    let size = parseInt(this.configuracao['largura_imagem']);
    let options = {
      maximumImagesCount: 1,
      width: size,
      height: size,
      quality: 100
    }
    this.galeria.getPictures(options).then((results) => {
      console.log("results imagem: ", results);
      this.loading = this.base.mostrarLoading(this.translate.instant('amostragem.localizando_papel'));
      this.ngZone.run(() => {
        this.getResultadoGaleria(results);
      });
    }).catch((err) => {
      console.log("ERROR ao pegar foto da galeria: "+ err);
    });
  }

Plugin installation command

npm install --save cordova-plugin-telerik-imagepicker

ionic info

Captura de tela de 2019-02-04 11-31-11.png1366×768 63.5 KB

Log Android Studio

Captura de tela de 2019-02-04 14-11-39.png1366×768 104 KB

Could anyone help me with this issue?
Thanks in advance!

Posts: 1

Participants: 1

Read full topic

@Dovel wrote:

Is it possible to check if a component is displayed as model (or nav pushed, or popover, or embedded, …)?
Without passing custom params. In my case: I want to display a close button on the right side in the header navbar of a component / ionic page. But only if I display it as modal. As page, the back-button is automatically added. But in modal mode, the user have to click the Android back button, if the modal is fullscreen and no backdrop is available.

Posts: 1

Participants: 1

Read full topic

@Rahadur wrote:

Hi there,

I’am current working on a Ionic 4 project where i have to open Modal B from Modal A
Modal A Open--> Modal B

// in modal-a.component.ts file
async openModalB() {
      const modal = await this.modalCtrl.create({
          component: ModalBComponent
      });
      const { data } = await modal.onDidDismiss();
      console.log(data);
      await modal.present();
}

Problem:

Modal B is not open at top of Modal A or neither showing any error in developer console.

Ionic:

Ionic:                                                                                             
                                                                                                   
   ionic (Ionic CLI)             : 4.10.1 (C:\Users\Rahadur\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0                                            
   @angular-devkit/build-angular : 0.12.4                                                          
   @angular-devkit/schematics    : 7.2.4                                                           
   @angular/cli                  : 7.2.4                                                           
   @ionic/angular-toolkit        : 1.3.0                                                           
                                                                                                   
Capacitor:                                                                                         
                                                                                                   
   capacitor (Capacitor CLI) : 1.0.0-beta.17                                                       
   @capacitor/core           : 1.0.0-beta.17                                                       
                                                                                                   
System:                                                                                            
                                                                                                   
   NodeJS : v10.5.0 (C:\Program Files\nodejs\node.exe)                                             
   npm    : 6.5.0                                                                                  
   OS     : Windows 10                                                                             

Posts: 1

Participants: 1

Read full topic