Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70433 articles
Browse latest View live

"ionic-v1 build" failing: "Cannot run sass task: missing in gulpfile.js"

$
0
0

@stefk wrote:

I cannot build my project because of this. This error is gibberish to me, as there is clearly a sass task in my gulpfile.js:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('serve:before', ['watch']);
gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

Here is my package.json:

{
  "name": "ionic-project",
  "version": "1.1.1",
  "description": "An Ionic project",
  "dependencies": {
    "com.synconset.imagepicker": "^2.1.10",
    "cordova-android": "7.1.4",
    "cordova-plugin-crosswalk-webview": "^2.4.0",
    "cordova-plugin-firebase": "^2.0.5",
    "google-app-indexing-cordova": "^1.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^3.1.0",
    "ionic-native": "^2.9.0",
    "ionic-plugin-deeplinks": "^1.0.17",
    "ng": "0.0.0",
    "node-sass": "^4.11.0",
    "npm": "^6.7.0",
    "phonegap-plugin-push": "^1.11.1",
    "vinyl-fs": "^3.0.3"
  },
  "devDependencies": {
    "@angular/cli": "7.2.3",
    "@ionic/v1-toolkit": "^1.0.18",
    "bower": "^1.8.8",
    "gulp": "^3.9.1",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "com.synconset.imagepicker",
    "cordova-plugin-camera",
    "cordova-plugin-console",
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-device",
    "cordova-plugin-file",
    "cordova-plugin-google-analytics",
    "cordova-plugin-inappbrowser",
    "cordova-plugin-network-information",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-whitelist",
    "cordova-sqlite-storage",
    "ionic-plugin-keyboard",
    "cordova-plugin-screen-orientation",
    "cordova-plugin-vibration",
    "cordova-plugin-geolocation",
    {
      "variables": {
        "SENDER_ID": "dr-b-app"
      },
      "locator": "phonegap-plugin-push"
    }
  ],
  "cordovaPlatforms": [
    "ios"
  ],
  "cordova": {
    "plugins": {
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "drbdiet",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "www.drbdiet.com",
        "DEEPLINK_2_SCHEME": "https",
        "DEEPLINK_2_HOST": "portal.drbdiet.com"
      },
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "com.synconset.imagepicker": {},
      "phonegap-plugin-push": {
        "SENDER_ID": "dr-b-app",
        "FCM_VERSION": "11.6.2"
      },
      "cordova-plugin-firebase": {},
      "google-app-indexing-cordova": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Ionic info output:

[ERROR] Error loading @ionic/angular package.json: Error: Cannot find module
        '@ionic/angular/package'
[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find
        module '@ionic/angular-toolkit/package'
[ERROR] Error loading @angular-devkit/build-angular package.json: Error: Cannot

        find module '@angular-devkit/build-angular/package'

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (C:\Users\stefk\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : not installed
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins (22 plugins total)

System:

 (C:\Users\stefk\AppData\Local\Android\android-sdk)
   NodeJS            : v11.8.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.7.0
   OS                : Windows 7

I have the latest ionic-v1 toolkit installed, as I installed it this morning.

I am able to run gulp sass successfully on its own:

[14:10:49] Using gulpfile c:\Projects\myapp\gulpfile.js
[14:10:49] Starting 'sass'...
[14:10:50] Finished 'sass' after 653 ms

I’ve tried to do just about everything that Google results suggest. The following suggested solutions did not fix the problem:

  • npm rebuild node-sass (executes without error, just doesn’t fix the problem)
  • npm install node-sass (suggested here)
  • npm install --save-dev gulp (suggested here)
  • Adding the following to package.json (suggested here)
"scripts": {
   "serve:dev": "ionic-v1 serve --host=0.0.0.0 --port=8100 --livereload-port=35729 --dev-port=53703 --engine=browser & gulp watch"
 },
  • Changing my gulp sass version in package.json to ^3.1.0 and then running npm install (suggested here)
  • Changing gulp.task('serve:before', ['watch']); to gulp.task("ionic:watch:before", ["sass","watch"]); (suggested here)
  • Running ionic-v1 build in a CMD window while gulp watch is running in another CMD window (suggested here), with or without changing gulp.task('default', ['sass']); to gulp.task('default', ['sass', 'watch']); (suggested here)
  • Reinstalling vinyl-fs (suggested here)

Posts: 1

Participants: 1

Read full topic


Ionic 4 navCtrl problem

$
0
0

@joel619 wrote:

When the user opens the app first time, go to login, after login navigate to dashboard, but when the back button is pressed it show login again. Can’t find a way to remove this page after login.

Another thing is that placing an if condition on app.component.ts to show login if not logged in, shows the dashboard for a second and then the login page. If I make the login page the default page, when the user is in dashboard and hits back button it show login again.

Posts: 1

Participants: 1

Read full topic

how to use primeNG with ionic 3?

$
0
0

@Lucas098 wrote:

how to use primeNG with ionic 3?

I followed in the footsteps of the primeNG documentation, but it did not work.

Posts: 1

Participants: 1

Read full topic

Ionic 3 Keyboard type and buttons

$
0
0

@ugrdursun wrote:

Hi,

I need to use different keyboard types on different inputs and also back, forward and OK button. This is exactly what i want;

GIF-2019-01-30-23-11-44

I searched for topics but couldnt find any related. Thanks for your support…

Posts: 1

Participants: 1

Read full topic

Black background while taking screenshot

$
0
0

@slmarcos wrote:

Hello, I’m using the plugin screenshot of the cordova but when trying to take a print along with the plugin camera preview where the image of the camera appears completely black. I already tried the orientation that has in the github page of the plugin but it did not solve. Does anyone know what I can do to solve this?

Tnks

Posts: 1

Participants: 1

Read full topic

Ion Button custom colors

$
0
0

@matthiasunt wrote:

I’m trying to set dynamic colors for the background-color and color of an ion-button.
What I’ve achieved so far:
20

My problem: The button color overlays the button outline.
Is this an Ionic issue, how can I get around this?

My code:

Template:

<ion-button *ngFor="let d of districts" shape="round"
                (click)="districtClicked(d)"
                [ngStyle]="getDistrictStyle(d)"
                color="{{getDistrictColors(d)[0]}}">
        {{getDistrictName(d)}}
</ion-button>

Method in my Component:

getDistrictStyle(district: District) {
        if (district) {
            const colors = this.colorGenerator.getDistrictColors(district);
            return {
                'background-color': colors[0],
                'color': colors[1]
            };
        }
 }

getDistrictColors(district: District) simply returns an array with two colors in hex (red and white in this case).

Posts: 1

Participants: 1

Read full topic

Tab to return to root of page

$
0
0

@obinnae wrote:

Hello, my app has 4 tabs. Tab1 has a list, and tapping any item in the list will go to a detail page within the tab. If I press tab2, then press tab1 again, tab1 still shows the details page instead of the list page. If I press tab1 again, it then shows the list.
How can I set the tabs to always return to their original content (tab1 to return to list)?

Thanks.

Posts: 1

Participants: 1

Read full topic

Ionic 4.0.0 can't change the DIR dynamically as before with platfrom.sitDir('rtl') in ionic 3

$
0
0

@HeshamShawky wrote:

With Ionic v4.0.0 I can’t change the direction from LTR to RTL by using platform.sitDir('rtl') as before in ionic 3!!

I have searched a lot and didn’t find a replacement for platform.sitDir('rtl') from ionic 4 docs!! or even instructions for RTL support!

I actually have done something with the following code document.documentElement.setAttribute('dir', 'rtl') as an experiment it works but with a lot of issues too like the sidemenu position still on the left side not on the right! as it should.

I’m building a multi-language app ( English, Arabic ) so this a real pain for me!

Posts: 1

Participants: 1

Read full topic


Problem with AppMinimize and Android hardware back button

$
0
0

@littork wrote:

Hello. I am working on improving the functionality of the Android hardware back button handling that I have in place and have run into an issue when using the AppMinimize plugin.

When I hit the back button on certain pages, I want the app to minimize instead of going back. I have managed to achieve this, but when I reopen the app the backward navigation that was previously intercepted takes hold.

When I reopened the app after minimizing it, I see the back animation as if the router outlet’s pop function has been run. This is not desired behavior because I do not want the back button to ever do anything but minimize the app on certain pages.

Here is the code I am using:

this.platform.backButton.subscribe(event => {
  if (this.router.url == "/home") {
    this.appMinimize.minimize();
    //  this.routerOutlet.pop();
    //  this.routerOutlet.pop(0);
    //  this.nav.navigateRoot(this.router.url, false);
    //  None of the above 3 attempted fixes have helped.
    //  I have also tried monitoring when this backbutton subscription function callback is called, and it is only called once total
  }else if(this.routerOutlet && this.routerOutlet.canGoBack()){
    this.routerOutlet.pop();
    // I have tried without this, it doesn't help
  }
});

Posts: 1

Participants: 1

Read full topic

Background Geolocation isn't a Observable

$
0
0

@dudu1096 wrote:

I need Implement a Background Geolocation in my app. I acess this ionic documentation, there shows the code below:

this.backgroundGeolocation.configure(config)
  .subscribe((location: BackgroundGeolocationResponse) => {

    console.log(location);

    // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
    // and the background-task may be completed.  You must do this regardless if your HTTP request is successful or not.
    // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
    this.backgroundGeolocation.finish(); // FOR IOS ONLY

  });

When I used this code in my app, my ts-lint accuse the configure(config) method is a Promise<any> and not a Observable, so, I cant use subscribe. I switched subscribe for then. But when I run, shows this error below:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at BackgroundGeolocation.configure (vendor.js:82333)
// error below ommited

Someone can help me?

Posts: 1

Participants: 1

Read full topic

Ionic 4: How to change font size?

$
0
0

@i2x wrote:

Howdy -

I’m starting a new Ionic v4 app and the customer has asked for the font-size to be larger. Seems like a reasonable request.

I see documentation on Ionic CSS variables, including colors and --ion-font-family. However, I see no obvious way to customize font size.

What’s the recommended approach?

Thanks for the help,
Ben

Posts: 1

Participants: 1

Read full topic

IONIC bluetooth communication

$
0
0

@Eduardoqmb wrote:

Hello, I’m new using Ionic framework.

I’m trying to communicate one bluetooth connect to an Arduino with my app.
I have a button on my app that when pressed allowed the Arduino to start sending serial data.

ARDUINO

void loop()  
{
  if (bluetooth.available()>0) { 
    
    b1 = bluetooth.read(); 
    command += b1; 
    Serial.print(command);
    delay(100); 
    if (b1 == 'a'){ //Verifying if its allowed to send data
      dados = bluetooth.write("180,190,30,50,20,15,35"); //Data
      Serial.print(dados);
  }

But when the app receive this data I have two problems

First:
I’m trying to reach all char array and separate my numbers, but every time I do that I received nothing in my toast message.

Second:
If I remove the while, the first time I read a message I received in my toast message and undefined.

IONIC

comBluetooth() {

    var char: any;
    var i: number = 0;
    var o: number = 0;
    var parada: any = ",";
    var dados: number[];
    var convert: any = "";
    var tamanho: number;

    this.bluetoothSerial.write('a');

    this.bluetoothSerial.readUntil('n')
    .then((dadoRecebido: any) => {
      char = String(dadoRecebido);
      
      tamanho = char.length;
      
      while(i < tamanho){
        if(char[i].localCompare(",") == 0){
          dados[o] = parseFloat(convert);
          o = o + 1;
        }else{
          convert = convert + char[i];
          i = i + 1;      
        }
      }
      this.toast.create({ message: char, duration: 3000, position: 'botton' }).present();
      this.bluetoothSerial.clear();
    });
 }

Could anyone help me with the correctly way to do this communication? As I said I’m new in ionic framework so any detailed information will helps a lot.

Thanks

Posts: 1

Participants: 1

Read full topic

Question with bypassSecurityTrustHtml(String: value)

$
0
0

@min2kor wrote:

this is my code

“<div [innerHTML]=“prodContent”>”

and

“this.prodContent = this.domSanitizer.bypassSecurityTrustHtml(this.product.content);”

in prodContent , it has html code.
for example,
“<p>text Showing</p><mg src=”//google.com/img/text*.jpg"><p>this is image.</p>"

when i am checking ionic on Chrome (localhosting).
Image shows well .

however, image is not showing on App.
i think “//” is not support “http://”.

how can i show image on App ?
please help me.

thanks.

Posts: 1

Participants: 1

Read full topic

Ionic cli new project Freezes up

$
0
0

@scubasteve7 wrote:

I am trying to start a new project in the ionic framework with the following command

ionic start MyFirstIonic blank

However, no matter what I try the command prompt just sits there and blinks and eventually goes unresponsive. I had downloaded everything I needed to run an application about a month ago and everything seemed to work just fine. However, now when I try to create a new project it just freezes

I have a school project I am needing to get done and this is really stressing me out. I have tried the following solutions but to no avail.
-Cleaning the cache
-uninstalling and reinstalling ionic and cordova
-uninstalling/ reinstalling node
-installing an earlier version of node (V8.11)

  • Going to my app roaming and deleting npm and npm cache

None of these proposed solutions i found online seem to work

If anyone has any ideas on how to get my programming environment up and running I would greatly appreciate it! I am already running behind on my assignments and really do not wish to fall even further behind.

Here is a screenshot of what’s going on.

Posts: 1

Participants: 1

Read full topic

How Reinstall Ionic Version 3 with Correctly

$
0
0

@anitatmj wrote:

Hai I have some problem with my ionic so was uninstalled it and now how to reinstall it with Correctly…

I want like this again :
ionic (Ionic CLI) : 4.5.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1

Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

Thanks

Posts: 1

Participants: 1

Read full topic


Ionic native Docuement viewer, File , File transfer plugins are not working in Ipad air with ios 12 and using Xcode 10

$
0
0

@saurabh-panwar67412 wrote:

Hi guys ,

I am working on a opening a Pdf file in my application as locally or by downloading from internet using Document viewer , File , File transfer . i write the same code mentions on official website of ionic native framework of document viewer . i attach a function on click on button to open pdf files . and for testing purpose . i write console.log before starting the function’s code and also in the end . first console is printing the output and then my code and last console . first console is printing the output but code and last console is not working . here is my code ,…
openpdf(){
console.log(“pdf view button clicked”);

const options: DocumentViewerOptions = {
title: ‘My PDF’
}

this.document.viewDocument(‘assets/First_Step_Vol.1_6.pdf’, ‘application/pdf’, options)

//this.navCtrl.push(OpenpdfPage);
console.log(“pdf view link opened”);

}

i tried to use absolute path by writing www before assets and the remove the platform and then again add it . and the ionic cordova prepare ios command and then ionic cordova build ios – --buildFlag="-UseModernBuildSystem=0" and then opened the xcodeproject file in the Xcode 10 and clean and build the for ipad ios 12 and the deployed to ipad with no error . but after click on button nothing is happening with no errors . and same way streaming media is not playing the video but showing the page with play/pause/volumn button.

Kindle resolve this issue .

Posts: 1

Participants: 1

Read full topic

Lookup table, efficient approach?

$
0
0

@AJBarry wrote:

Hi all!

The TL;DR is I need to translate or map some numeric data to a readable string using lookup tables stored on Firebase.

I have a functional Ionic V3 app which integrates firebase.

I have some data that is being stored and accessed in this format:

Message in Raw Format:
   Key1: number;
   Key2 :number;

I then have two conversion tables which are key-value pairs of each key to a plain string translation (possibly supporting multiple languages in future)
ie.

Key1 Lookup:
 0: "Thing A",
 1: "Thing B",
 2: "Thing C"
Key2 Lookup:
 0: "OK",
 1: "Bad",
 2: "Worse"

The first lookup table has ~3500 items and will require modification in the future as new features are added. The second has only ~20 or so and is likely static.

I’d like to store these tables on Firebase and use them to translate the stored data to readable text in the app.

I have a working implementation using a local dictionary/map and an pipe (thispipe) handling the translations.

<ion-col> {{ (item?.key1) | thispipe}} </ion-col>

I’d like to utliise the firebase stored key:values instead of a local dictionary to keep app size down and improve maintainability, and I think it would be neater to handle the translations inside the pipe(map) in my data service - similar to this:

//The following code is working nicely, but utilised a local/hardcoded lookupTable

private getReadableFromDataSub(): Observable<DeviceDataReadable> {
    return this.afdb.list('somelocation').valueChanges().pipe(
      map(x => new DisplayPacket(x, this.lookupMap)) 
      //this translates the raw data to human readable using a local lookupMap
    );
  }

//note this is local, I want to use firebase data or sync'ed local data
private setupLookup() {
    this.lookupMap.set("92",  {name:"Engine Percent Load At Current Speed", unit: "%"});
    this.lookupMap.set("100", {name:"Engine Oil Pressure", unit: "kPa"});
    this.lookupMap.set("158", {name:"Keyswitch Battery Potential ", unit: "V"});
    this.lookupMap.set("171", {name:"Ambient Air Temp", unit: "°C"});
    this.lookupMap.set("190", {name:"Engine Speed", unit: "RPM"});
    this.lookupMap.set("sig", {name:"Cell Signal", unit: "bars"});
  }

I’d appreciate any advice! Hopefully I’ve made it somewhat clear what I’m after!

Kind Regards,
Alex

Posts: 1

Participants: 1

Read full topic

E2E testing when using @ionic/storage

$
0
0

@larsrayvn wrote:

I’m using @ionic/storage in my app, to store some values.
Now I’ve started making E2E tests, and i struggle figuring out how to access that (@ionic/storage) storage, and not just the browsers default local storage. Anyone that can point me in the right direction?

Thanks in advance.
Lars

Posts: 1

Participants: 1

Read full topic

Ionic 4 tab-bar cutting content

$
0
0

@npro27 wrote:

Howdy
Please help me with css in Ionic.
Now I have layout like this : Screenshot_6
My button was cut
I try to add “overflow: visible” for all of tags, but it’s doesn’t work.(

.place-button-wrapper{
    position: absolute;
    bottom: 20px;
}

<ion-tabs>
...
    <ion-tab-button tab="places">
      <div class="place-button-wrapper" >
        <img class="tabs-icon" src="assets/icons/mapiconelepse.png" alt="">
      </div>
    </ion-tab-button>
...
</ion-tabs>

Posts: 1

Participants: 1

Read full topic

Smart glass

$
0
0

@mobiledgroove wrote:

Good Morning,

Is it possible to use ionic to develop an app for smart glass(2D)? (epson moverio, google glass etc…)

Thank you

Posts: 1

Participants: 1

Read full topic

Viewing all 70433 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>