@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 :
I searched a lot but i found no solution…Someone get an idea ?
Posts: 1
Participants: 1
@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 screenIonic:
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.2Cordova:
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
@iextendlabs wrote:
Recently we built ionic based opencart mobile app that is sync with opencart for all of the data via api.
It have following features
- search products
- categories
- place order
- apply discount
- view orders history
- product details
- login / registration
We were able to get it approved and its now live on android store here
play.google.com/store/apps/details?id=com.iextendlabs.safiimpexbiobaby&hl=en
here I have created a demo video about its functionality.
https://www.youtube.com/watch?v=x8L5C5jeR-U
Posts: 1
Participants: 1
@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
ionic info
if error = photo.photoURL | cdvphotolibrary
Posts: 1
Participants: 1
@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
İ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
@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: 1
Participants: 1
@msob83 wrote:
I have imported the FirebaseAnalytics and injected to my class as below:
import {Injectable} from '@angular/core'; import {FirebaseAnalytics} from "@ionic-native/firebase-analytics/ngx"; @Injectable() export class AnService{ constructor(private fb:FirebaseAnalytics){} testAnalytics(){ console.log(JSON.stringify(this.fb,null,2)); // logs empty object{} this.fb.logEvent('page_view', {page: "dashboard"}); // returns an error: object is not a function } };I have included the FirebaseAnalytics in the app.module.ts as provider.
Please help me. Standard events are collected automatically. Firebase is configured ok with my app. But I can’t implement my own events because of this problem above.
Posts: 1
Participants: 1
@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…
I am using
XML2Js
@angular/common/httpI used it in Ionic 3 with no problems but i migrating to Ionic v4. And fix one problem after onther.
But getting 404 error…
My XML File is located in this folder. And i can not get the data getting Error 404.
curlink_gv = '/assets/XML/myxmlfile.xml';In Ionic 3 it works with the plugin
First i import my plugins in Home.page.ts
import { HttpClient } from '@angular/common/http'; import { HttpHeaders } from '@angular/common/http';Then i trying to parse my file that is located in /assets/XML/myfile.xml
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).But not luck, searching for answers but can not find.
I getting error 404 error
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, curYear_gv, curMonth_gv, curDay_gv) .then((data)=> { this.xmlItems = data; }); }); }I hope i got an answer for this soon, because everything is holding my project to continue, If there is a better way to do this tell me also.
But 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.
Best regards
Posts: 1
Participants: 1
@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
@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
@priniqkelvin wrote:
I’m using the angularx-qrcode library to generate the qr-code. I would like to display the qr-code inside the alert dialog box.
The following code just show a dialog with the button, but the content is empty and not render.
this.alertController.create({ message: `<div class="qrcode-popup-wrapper"> <qrcode [qrdata]="'${model.voucherNo}'" [size]="256" [level]="'M'"></qrcode> </div>`, buttons: ['CLOSE'] });Any idea how to make this work?
Posts: 1
Participants: 1
@namleffff wrote:
After i updated ionic last version. Here my Ionic info
Ionic:
ionic (Ionic CLI) : 4.9.0 (C:\Users\Hai Nam\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.3
@angular-devkit/schematics : 7.2.3
@angular/cli : 7.2.3
@ionic/angular-toolkit : 1.2.3Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 4 other plugins)System:
(C:\Program Files (x86)\Android\android-sdk)
NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
npm : 6.1.0
OS : Windows 10I try create a new blank app:
- With command ionic serve: run ok
- After that i try to build production: ionic cordova build android --release --prod
and
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_nameI got signer APK, and install this file on my Xiaomi Mi3, App run ok, but after splash screen, i got a blank page.
How can fix that.
Posts: 3
Participants: 2
@devsid wrote:
Hi, I am using firebase messaging in my Ionic 3 application, when publishing the app on Google play, If someone downloads the app from Google play, Firebase messaging is not working without giving any error. Please help
Posts: 3
Participants: 2
@Ionic_Newb wrote:
HI ,
I’m looking to read image files from Firebase and display them as a list on my ionic 4 app. Can anyone point me in the direction of a good example of tutorial.Thanks
Posts: 1
Participants: 1
@mahmoudfathy0 wrote:
hi guys ,
we have a weird issue in our ionic 3 mobile app , the issue is that we have two apps on google play one for mobile , and the other for tablet , to allow the app store differentiate , in mobile we set the below property in android manifest<supports-screens android:anyDensity="true" android:largeScreens="false" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="false" />and in the tablet app we use the below property
<compatible-screens> <screen android:screenSize="large" android:screenDensity="ldpi" /> <screen android:screenSize="large" android:screenDensity="mdpi" /> <screen android:screenSize="large" android:screenDensity="hdpi" /> screen android:screenSize="large" android:screenDensity="xhdpi" /> <screen android:screenSize="xlarge" android:screenDensity="ldpi" /> <screen android:screenSize="xlarge" android:screenDensity="mdpi" /> <screen android:screenSize="xlarge" android:screenDensity="hdpi" /> <screen android:screenSize="xlarge" android:screenDensity="xhdpi" /></compatible-screens>everything is working as supposed except for huawei mate 10 devices , the google play detect them as tablets not mobiles , so the user can download only the app for tablet , any help guys
thanks in advance
Posts: 1
Participants: 1
@Yruama wrote:
I’m working on an app who communicate with a raspberry through BLE (https://ionicframework.com/docs/native/ble/). I want to send a command to the Raspberry and get the result. The only constraint is to send command with the TLV (Tag-Length-Value) format : - Tag: command identifier - Length: commande data length (0 to 18) - Value: command data
I have no idea how to do this.
Atm i have some code.
First i search all devices arround me :
this.ble.scan([], 5).subscribe( device => this.onDeviceDiscovered(device), error => this.scanError(error) );Then i get infos from this device :
this.ble.connect(device.id).subscribe( peripheral => this.onConnected(peripheral), peripheral => this.onDeviceDisconnected(peripheral) );And … what now ? I’m trying to use this function :
ble.write(device_id, service_uuid, characteristic_uuid, data, success, failure);I get device_id, service_uuid, characteristics_uuid. But i don’t know how to pass data.
I’m trying something like that :
SendCommand() { let data: { RANDOM: 1, Lenght: 1, Value: 1 }; let binary_string = btoa(JSON.stringify(data)); let len = binary_string.length; let aBuff = new Uint8Array(len); for (let i = 0; i < len; i++) aBuff[i] = binary_string.charCodeAt(i); this.ble.write(this.peripheral.id, this.peripheral.services, this.peripheral.characteristic, aBuff.buffer) .then(res => { console.log("OK"); console.log(res) }) .catch(err => { console.log("KO"); console.log(err) }); }But nothing happen.
Thanks for your help
Posts: 1
Participants: 1
@persiscal wrote:
i have this problem when try to build iOS in Ionic pro service.
SocialSharing and AppVersion are added correctly in the project, always build and compile ok, but now i have this errors.
The problem is this components o another thing?
Anyone can help me? I need to solve this. Thanks!
this is the output:
[14:05:26]: ▸ > GlamitApp@0.0.1 build /builds/project-0 [14:05:26]: ▸ > ionic-app-scripts build --buildConfig=build.json [14:05:28]: ▸ [14:05:28] ionic-app-scripts 3.1.2 [14:05:28]: ▸ [14:05:28] build dev started ... [14:05:28]: ▸ [14:05:28] clean started ... [14:05:28]: ▸ [14:05:28] clean finished in 4 ms [14:05:28]: ▸ [14:05:28] copy started ... [14:05:28]: ▸ [14:05:28] deeplinks started ... [14:05:28]: ▸ [14:05:28] deeplinks finished in 229 ms [14:05:28]: ▸ [14:05:28] transpile started ... [14:05:33]: ▸ [14:05:33] typescript: src/app/app.component.ts, line: 51 [14:05:33]: ▸ Cannot find name 'SocialSharing'. [14:05:33]: ▸ L50: public events: Events, [14:05:33]: ▸ L51: private socialSharing: SocialSharing [14:05:33]: ▸ L52: ) { [14:05:33]: ▸ [14:05:33] typescript: src/app/app.module.ts, line: 64 [14:05:33]: ▸ Argument of type '{ declarations: (typeof ChatPage | typeof RatePage | typeof DetallePedidoPage | typeof [14:05:33]: ▸ HistorialP...' is not assignable to parameter of type 'NgModule'. Types of property 'providers' are [14:05:33]: ▸ incompatible. Type '(typeof SplashScreen | SocialSharingOriginal | typeof UserProvider | typeof InAppBrowser [14:05:33]: ▸ | AppVer...' is not assignable to type 'Provider[]'. Type 'typeof SplashScreen | SocialSharingOriginal | [14:05:33]: ▸ typeof UserProvider | typeof InAppBrowser | AppVers...' is not assignable to type 'Provider'. Type [14:05:33]: ▸ 'SocialSharingOriginal' is not assignable to type 'Provider'. Type 'SocialSharingOriginal' is not assignable [14:05:33]: ▸ to type 'ClassProvider'. Property 'provide' is missing in type 'SocialSharingOriginal'. [14:05:33]: ▸ L64: @NgModule({ [14:05:33]: ▸ L65: declarations: [ [14:05:33]: ▸ [14:05:33] typescript: src/pages/login/login.ts, line: 41 [14:05:33]: ▸ Cannot find name 'AppVersion'. [14:05:33]: ▸ L40: public events: Events, [14:05:33]: ▸ L41: private appVersion: AppVersion) { [14:05:33]: ▸ L42: localStorage.removeItem('access_token'); [14:05:33]: ▸ [14:05:33] typescript: src/pages/my-profile/my-profile.ts, line: 30 [14:05:33]: ▸ Cannot find name 'AppVersion'. [14:05:33]: ▸ L29: public platform: Platform, [14:05:33]: ▸ L30: private appVersion: AppVersion) { [14:05:33]: ▸ [14:05:33] ionic-app-script task: "build" [14:05:33]: ▸ [14:05:33] Error: Failed to transpile program [14:05:33]: ▸ Error: Failed to transpile program [14:05:33]: ▸ at new BuildError (/builds/project-0/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) [14:05:33]: ▸ at /builds/project-0/node_modules/@ionic/app-scripts/dist/transpile.js:159:20 [14:05:33]: ▸ at new Promise () [14:05:33]: ▸ at transpileWorker (/builds/project-0/node_modules/@ionic/app-scripts/dist/transpile.js:107:12) [14:05:33]: ▸ at Object.transpile (/builds/project-0/node_modules/@ionic/app-scripts/dist/transpile.js:64:12) [14:05:33]: ▸ at /builds/project-0/node_modules/@ionic/app-scripts/dist/build.js:109:82 [14:05:33]: ▸ at [14:05:33]: ▸ npm ERR! code ELIFECYCLE [14:05:33]: ▸ npm ERR! errno 1 [14:05:33]: ▸ npm ERR! GlamitApp@0.0.1 build: `ionic-app-scripts build --buildConfig=build.json` [14:05:33]: ▸ npm ERR! Exit status 1 [14:05:33]: ▸ npm ERR! [14:05:33]: ▸ npm ERR! Failed at the GlamitApp@0.0.1 build script. [14:05:33]: ▸ npm ERR! This is probably not a problem with npm. There is likely additional logging output above.```
Posts: 1
Participants: 1
@JerryBels wrote:
Hello,
I’m migrating my app from Ionic V3 to V4. Almost done, except… I’m having a hard time with styling. For example, I migrated my html to something like this, using slots :
<ion-list> <ion-item class="list-item" *ngFor="let a of v"> <ion-avatar slot="start"> <img class="mainImg" [src]="a.image ? a.image : globals.userImage"> <img class="candle" [src]="'assets/imgs/home/candle.png'"> </ion-avatar> <h3 class="item-title">{{a.first_name}} {{a.last_name}}</h3> <p class="item-description"> In X days <span> {{a.day}} {{a.monthName}} </span> </p> <div class="badgeHolder" (click)="gotoSpecialPage()"><ion-badge slot="end">special page</ion-badge></div> <span slot="end" class="iconHolder" (click)="gotoNormalPage()"><ion-icon name="arrow-dropright"></ion-icon></span> </ion-item> </ion-list>The CSS I had for it, before upgrading :
ion-list.list { margin-bottom: 0; div.list-item.item-block { background-color: #343B43; margin: 0; border-bottom: 1px solid #dedede; position: relative; ion-avatar { position: relative; img.mainImg { width: 60px; height: 60px; } img.candle { position: absolute; right: 0; bottom: 0; width: 20%; height: auto; border-radius: initial; } } div.item-inner { border: 0; margin: 0; h3 { color: white; font-weight: 600; text-transform: uppercase; } p.item-description { color: white; font-size: 13px; span { font-size: 12px; color: #9D9992; } } div.badgeHolder { text-align: right; margin-right: 28px; ion-badge { background-color: #907027; padding: 7px 10px; border-radius: 12px; font-size: 11px; font-weight: 300; letter-spacing: 1px; } } span.iconHolder { background-color: #2B3036; position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 13px; color: #907027; font-size: 36px; } } } }So, of course some changes are no-brainers, like
div.list-item.item-blocksimply becomingion-itemorbackground-color: #343B43;being able to be converted to--backgroundthanks to css4 variables. But there are a lot of things I don’t find a way to migrate easily… Also, I would really like to bypass the headache to have and rethink each and every line of our css code according to css4 variables available in Ionic doc - it has been written by different people and it would take me too much time.So, do I have a simple solution to apply my styles to slotted elements inside ionic components’ shadow dom?
Posts: 1
Participants: 1
@jchuah wrote:
Is there a way to determine whether or not the ModalController is going to display as a full size page navigate vs. a modal? Checking to see if ‘tablet’ is in the platform list isn’t cutting the mustard for me. Some tablets are large enough to display a modal as a modal while others display it as a full screen page navigate.
This is especially problematic for tablet users of my Ionic app that, from a UX perspective, want to click on the back button of their browsers when viewing it through a web browser. If I can predict ahead of time the ModalController behavior I can appropriately choose to use Angular UI Router.
Posts: 1
Participants: 1
