@SnkrsFind wrote:

<ion-note margin-vertical [routerLink]="['/register']" id="signUpButton">
                    Don't have an account? Sign up here.
                </ion-note>

the property margin-vertical does not applies the expected margin. Even tried using the css and nothing happen. Bug? Am I missing something ? Thanks.

Posts: 1

Participants: 1

Read full topic

@erald123 wrote:

Hello I need to navigate to another page using angular routing but I’m facing a typescript issue.
Here what I have:

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


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private router: Router) {
    openWelcomePage() {
      this.router.navigateByUrl(['/welcome']);
    }
  }
}

And the output is:

I tried unistalling typescript and installing the latest version, but didn’t worked.

Posts: 2

Participants: 2

Read full topic

@advelazquez wrote:

I need to run the code “this.backgroundMode.enable()” in my project, but it shows me the following error:

It imports it in app.module.ts in the following way:

import {BackgroundMode} from '@ ionic-native / background-mode / ngx';
...
providers: [
...
BackgroundMode
...]

And in the page (in my case is in app.component.ts, after deviceready, like the official documentation says) i use like:

import {BackgroundMode} from '@ ionic-native / background-mode / ngx';
constructor(private backgroundMode: BackgroundMode) { }
...
this.backgroundMode.enable();

Please I need to run this plugin in my project, can you help me?

Posts: 2

Participants: 2

Read full topic

@trollanfer wrote:

I try to build a service to get data from http, build a table and return it.

in service.ts :

getListRepo(repo : string){
    let tab=[];
    this.http.get(repo).subscribe((data)=>{
	   	 for (let item of data['items']) {
	   	 	let niveaux = item['path'].split("/");
	   	 	let matiere = niveaux[0]; let niveau = niveaux[1];
	   	 	let it = {'matiere':matiere,'niveau':niveau,'name':item['chapitre'],'url':item['git_url']}
	   	 	this.tab.push(it); 
	   	 }
         return tab;//everything%20fine%20here
	});

in homepage.ts

constructor(public git:GitService){
  	   this.chapitres = git.getListRepo('tt');
    }

but chapitres is undefined in homepage.ts… it doesn’t wait for the result of the http.get.

How to solve that ?

Posts: 1

Participants: 1

Read full topic

@voidbrain wrote:

Hello Ionic people,
I have a select that is dynamically (and correctly) updated (value and options) on page load but not showed.
I need to manually trigger the select (just need to open the alert) to see it updated to the right value.

If i manually set the options array from the Constructor, the select is correctly set and i can read the default selected option without touching it.

But if start with a void Options list and later i update that with an array of objects, the options and the select value are correctly updated but not shown.
If i manually open the select, i see it changes behind the alert window, setting to the right option.

<ion-select multiple="{{config.multiple}}" [formControlName]="config.name" (ionChange)=" triggerChange($event) ">
            <ion-select-option *ngFor="let option of config.options" [value]="option.id" [selected]="option.id == id_food">
                {{ option.name }}
            </ion-select-option>
        </ion-select>

public triggerChange(event){
        console.log(event,this.config)
    }

(Works fine, always see the console log, event onChange correctly triggered on page load.)

This works-> static options, dynamic value. Value is set, on page load i see “Pizza”

this.formDefinition = [ 
    { name: 'id', type: 'inputSelect', label: 'Name', options: [ { id:1, name: 'Pizza', }, { id:2, name: 'Hot Dogs', }], multiple: false },
...
setFormvalues(values){
    this.form.setFormValues(values);
}			

This don’t work-> dynamic options, dynamic value. Options and value are set, but on page load i don’t see “Pizza” (but if i click the select without modifying anything, “Pizza” become selected)

this.formDefinition = [ 
    { name: 'id', type: 'inputSelect', label: 'Name', options: [], multiple: false },
...
setFormvalues(values){
    let elements =  [ { id:1, name: 'Pizza', }, { id:2, name: 'Hot Dogs', }];
    this.formDefinition.find(el => el.name == 'id').options = elements;
    this.form.setFormValues(values);
}
	

Posts: 1

Participants: 1

Read full topic

@Stck wrote:

Are there any downsides for performance or anything else if I use non-ionic components, such as angular material?
I am wondering if Ionic maybe uses native components under the hood for optimization benefits.
Thanks!

Posts: 1

Participants: 1

Read full topic

@thehuangkai wrote:

Hi everyone,

I am developing a subscription app using stripe.js (not the native plugin). As of development everything is working fine but I am getting a warning that in production stripe should be served through a https connection.

But since this is an ionic app, how does a https connection work? Will there be any issue using stripe.js in production?

Posts: 1

Participants: 1

Read full topic

@flycoders_sourav1 wrote:

How to Active and diactive toogle button based on value.

Like value 0 means directive and 1 Means active , how can I implement ?
Please help me out
Thanks

Posts: 1

Participants: 1

Read full topic

@lmyslinski wrote:

Hi!
I would like to know what is the best current solution for authentication and authorization. I know that Proof Key for Code Exchange (PKCE) is the recommended method for controlling the access between application and a resource server, but I do know if it is already integrated into Ionic 4.

I saw that You got a product Identity Vault, but to be honest I do know what are the features of it.

1. Is it a solution for authentication and authorization?
2. Has it some managment control to disable/erase mobile phone when it is stolen?
3. How it is different than Auth0 or Okta with their Okta Mobility Management) ?

Posts: 1

Participants: 1

Read full topic

@louis5017 wrote:

Hello everyone since i update to ionic 4 neutronium i’m getting the following problem no provider for popovercontroller, platform, events.

here is how i imported them

import { Platform, PopoverController, Events } from ‘ionic-angular’;
does anyone have a solution

Posts: 1

Participants: 1

Read full topic

@muratcankuruoffical wrote:

HOME.PAGE.HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding>



<ion-list>
<button full  (click)="itemClick()">itemClick</button> //ı m error
<ion-item *ngFor="let item of items">
{{item.rank}}

{{item.id}}

{{item.price_usd}}
</ion-item>


</ion-list>

</ion-content>

HOME.PAGE.TS

import { Component, ViewChild } from '@angular/core';
import { NavController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { ModalController } from '@ionic/angular';
import { DetailPage } from '../detail/detail.page';



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

	public items:any;
	constructor(  public http: HttpClient, public modalController: ModalController, public navCtrl: NavController) {
		/*this.items = [
		{title: "Murat"}
		]
		*/
		this.loadData();

	}

	loadData() {
		let data:Observable<any>;
		data = this.http.get('https://api.coinmarketcap.com/v1/ticker/');
		data.subscribe(result => {
			this.items = result;
		});
	}

	itemClick(/*itemid:string*/) {
		this.navCtrl.push(DetailPage);
		//alert(itemid);
		
		
	} 


}

ERROR:

HomePage.html:15 ERROR TypeError: this.navCtrl.push is not a function
at HomePage.push…/src/app/home/home.page.ts.HomePage.itemClick (home.page.ts:37)
at Object.eval [as handleEvent] (HomePage.html:15)
at handleEvent (core.js:23009)
at callWithDebugContext (core.js:24079)
at Object.debugHandleEvent [as handleEvent] (core.js:23806)
at dispatchEvent (core.js:20458)
at core.js:20905
at HTMLButtonElement. (platform-browser.js:993)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
View_HomePage_0 @ HomePage.html:15
proxyClass @ compiler.js:18234
push…/node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24041
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
dispatchEvent @ core.js:20462
(anonymous) @ core.js:20905
(anonymous) @ platform-browser.js:993
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17280
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
HomePage.html:15 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 11, nodeDef: {…}, elDef: {…}, elView: {…}}
View_HomePage_0 @ HomePage.html:15
proxyClass @ compiler.js:18234
push…/node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24041
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15767
dispatchEvent @ core.js:20462
(anonymous) @ core.js:20905
(anonymous) @ platform-browser.js:993
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17280
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

Posts: 1

Participants: 1

Read full topic

@InfantJoseph wrote:

I have to use certain plugins in my Ionic 3 Application but it gives Cannot find name error. I imported

import { AndroidPermissions } from '@ionic-native/android-permissions';

and on on declaring in constructor (public androidPermissions: AndroidPermissions) , it gives an error ([ts] Cannot find name 'AndroidPermissions'.) .

On declaring the same plugin in app.module.ts and declaring in Provider, it gave the error

[ts]
Type 'AndroidPermissionsOriginal' is not assignable to type 'Provider'.
Type 'AndroidPermissionsOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]

After reading forums, I imported the plugin with ngx.

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx'

Error got resolved, but on invoking it throws the error

Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at AndroidPermissions.requestPermissions (http://192.168.0.13:8100/build/vendor.js:69796:154)
    at http://192.168.0.13:8100/build/main.js:138:32
    at t.invoke (http://192.168.0.13:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://192.168.0.13:8100/build/vendor.js:5134:33)
    at t.invoke (http://192.168.0.13:8100/build/polyfills.js:3:14916)
    at r.run (http://192.168.0.13:8100/build/polyfills.js:3:10143)
    at http://192.168.0.13:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://192.168.0.13:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://192.168.0.13:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://192.168.0.13:8100/build/polyfills.js:3:15581)

Similar error happened when using Network plugin and SMS plugin.

Then I upgraded to Ionic 4 and now the versions i have all frameworks are Ionic CLI 4.9.0, Angular CLI: 7.2.3, Node: 8.11.1, Angular: 7.2.2, typescript 3.1.6 and cordova 8.1.2.

Posts: 1

Participants: 1

Read full topic

@gsoulie wrote:

Hi all,

I am trying Ionic 4 before migrating all my projects in v4 and i have a problem with routing. According to the documentation on routing, i am using this.router.navigate(['/device', {id: myId}]) in order to navigate on a new page (wich is empty for that moment)

With this code, my new page open, but i always get the following error in my chrome console :

chunk_error.png848×193 96.2 KB

I searched a lot but i found no solution…Someone get an idea ?

Posts: 1

Participants: 1

Read full topic

@Appslanka wrote:

I face a new issue with ionic 4 - android. I tried with diffent api level of android.
But for the templete Side menu I get the blank white screen

Ionic:

ionic (Ionic CLI) : 4.6.0 (C:\Users\joy\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.12.2
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 6 other plugins)

System:

NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
npm : 6.7.0
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

@decekze wrote:

upload.ts

fetchPhotos() {
this.photoLibrary.requestAuthorization().then(() => {
this.photoLibrary.getLibrary().subscribe({
next: library => {
this.photos = library;
this.cd.detectChanges();
// console.log(this.library[0].thumbnailURL)
//this.tempImagePath = normalizeURL(imagePath);
},
error: err => { },
complete: () => { console.log(“could not get photos”); }
});
}).catch(err => console.log(“permissions weren’t granted”));
}

upload.html

 <div class='photos' *ngIf='photos'>
            <div class='photo' *ngFor='let photo of photos;'>
          
                <img [src]="photo.photoURL" alt="{{photo.fileName}}"><br>
         
                {{ photo.photoURL }}
            </div>
        </div>

Screen

Screenshot_20190128-130209_Bootagram.jpg720×1280 408 KB

ionic info

if error = photo.photoURL | cdvphotolibrary

                <img [src]="photo.photoURL | cdvphotolibrary" alt="{{photo.fileName}}"><br>
         
                {{ photo.photoURL }}
            </div>
        </div>

hata2.PNG337×560 41.2 KB

Posts: 1

Participants: 1

Read full topic

@decekze wrote:

Help Me !!!

upload.ts

fetchPhotos() {
this.photoLibrary.requestAuthorization().then(() => {
    this.photoLibrary.getLibrary().subscribe({
        next: library => {
            this.photos = library;
			this.cd.detectChanges();
		//	console.log(this.library[0].thumbnailURL)     
//this.tempImagePath = normalizeURL(imagePath);
        },
        error: err => { },
        complete: () => { console.log("could not get photos"); }
    });
}).catch(err => console.log("permissions weren't granted"));
}

upload.html

     <div class='photos' *ngIf='photos'>
                <div class='photo' *ngFor='let photo of photos;'>
              
                    <img [src]="photo.photoURL" alt="{{photo.fileName}}"><br>
             
                    {{ photo.photoURL }}
                </div>
            </div>

ionic info

Screen

Screenshot_20190128-130209_Bootagram.jpg720×1280 408 KB

İf error = [src]="photo.photoURL | cdvphotolibrary"

    <div class='photos' *ngIf='photos'>
                <div class='photo' *ngFor='let photo of photos;'>
              
                    <img [src]="photo.photoURL | cdvphotolibrary" alt="{{photo.fileName}}"><br>
             
                    {{ photo.photoURL }}
                </div>
            </div>

Posts: 1

Participants: 1

Read full topic

@gargoor wrote:

Dear Sir/madam,

I am not able to find any exact precise steps to test my code on a real phone, not an emulator. Can anyone please guide me , , I have Android 4.1.2 ,Samsung s2 DUOS?

Posts: 2

Participants: 2

Read full topic

@CreativeArtDesign wrote:

IONIC 4 does NOT work for me (IONIC 3 working) What have changed?’

I am trying to parse a XML file from my assets/xml/myfile.xml files…

First i thought it was a path problem but tested every path i can use. even moved the file to the root of Home (togheter with home.page.ts files).

I am using
XML2Js
@angular/common/http

I used it in Ionic 3 with no problems but i migrating to Ionic v4. And fix one problem after onther.

ERROR: 404 error…

My XML File is located in this folder Assets.
In Ionic 3 it works with the plugin

First of all I import my plugins in Home.page.ts

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

In my home.page.ts (For parsing)…

    loadXML()
    {
        this.http.get('/assets/XML/myfile.xml',
      {
        headers: new HttpHeaders()
        .set('Content-Type', 'text/xml')
        .append('Access-Control-Allow-Methods', 'GET')
        .append('Access-Control-Allow-Origin', '*')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),
        responseType:'text'
      })
      .subscribe((data)=>
      {
         this.parseXML(data)
         .then((data)=>
         {
            this.xmlItems = data;
         });
      });
    }

If there is a better way to do this tell me also.
I find this a very easy to change update files.

If you answer my question Please write a long answer so i understan not a professional on this area, New at ionic 4.

Or send me a an example so i can test.

Best regards

Posts: 1

Participants: 1

Read full topic

@KristjanLaane wrote:

We have some classes (services/providers) that are specific for Android only and we would like to not include them when building our PWA or our iOS app. Similarly, we do not require any of the Cordova dependencies / Ionic native libraries when building the Progressive Web App.

How is it possible to create differential builds so that PWA, Android and iOS builds do not include exactly the same source code?

We currently have interfaces for the platform specific classes and we manually comment out the Android implementations when building PWA and manually include PWA implementation stubs. We currently do that in the app module providers array. This gets very cumbersome the more differential the builds get.

Perhaps the providedIn mechanism in Angular could be used somehow to achieve non-manual tree-shaking: https://offering.solutions/blog/articles/2018/08/17/using-useclass-usefactory-usevalue-useexisting-with-treeshakable-providers-in-angular/

This question is similar to the one asked about 3 years ago here: Build & Serve ionic as a web app

Posts: 1

Participants: 1

Read full topic

@julianacristina8 wrote:

Hi, I’m trying to add a back button with the menu-button, but isn’t showing, just the menu button. Anyone can help me?

<ion-header>
	<ion-toolbar >
		<ion-buttons  slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-back-button slot="end"></ion-back-button>    
    </ion-buttons>
		<ion-title class="titleToolbar">
			LISTAS SALVAS
		</ion-title>
	</ion-toolbar>
</ion-header>

Posts: 1

Participants: 1

Read full topic