Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228554 articles
Browse latest View live
↧

Ionic4 images from browser/desktop

June 6, 2019, 6:54 am
$
0
0

Hey guys

I am builiding a app right now, which should work on android, ios and on the browser. I want to make it possible that the user can upload images into the app, which works perfectly fine on Android and IOS with the Ionic Image Picker PlugIn. The problem right now is to upload images from the browser because I need access to the FileSystem of the desktop. The Image Picker Plugin doesn’t work with the browser.

I tried this in the HTML File:

ng-container *ngIf="this.isDesktop === true"> 
                        <input  style="display: none" type="file" (change)="getImagesDesktop($event)" #fileInput>
                        <ion-button (click)="fileInput.click()">FileSystem</ion-button>
                    </ng-container>

And in TypeScript this:

 public getImagesDesktop(event) {
    this.imageResponse = [];
    this.selectedFile = event.target.files[0];
    this.imageResponse.push('data:image/jpeg;base64,' + this.selectedFile);
    console.log(this.imageResponse);

  }

But that doesn’t seem to work, because I need the image coded in base64.

↧
Search

How i can storage http respons?

June 6, 2019, 7:00 am
$
0
0

I am working on a geolocation, google maps project. I wrote a simple API and uploaded my server. I can reach my api’s data with;

export class Tab2Page implements OnInit, AfterContentInit {
getLat: any;
getLong: any;
        constructor(private geolocation: Geolocation, public http: HttpClient) {
        this.http.get("apilink").subscribe(data => 
        {
          this.getLat = data["lat"];
          this.getLong = data["long"];
        });
       console.log(this.getLat); //gives undefined
      }
}

But when i want to reach getLat and getLong variable from any function - or outside this.http.get()- that variables give undefined. What should i do? I tried static, const, global, var declare etc.

ngAfterContentInit(): void {
console.log(this.getLat); //gives undefined
}

Some topics said that it depends on async problem. But i cannot fix this problem.

↧
↧

Bug in Ionic Studio 0.0.63

June 6, 2019, 7:10 am
↧

Ion-header partially visible on Android

June 6, 2019, 7:13 am
$
0
0

It turns out that the issue was the following statement in app:

this.statusBar.overlaysWebView(true);

By removing this and using only the following the issue is resolved.

this.statusBar.backgroundColorByHexString('#00A0E4');

↧

How to make infinite scroll with content scroll horizontal?

June 6, 2019, 7:35 am
$
0
0

/MY VIEW/

<ion-content [scrollX]="true" [scrollEvents]="true" (ionScrollStart)="ionScrollStart()">

  <ion-row *ngFor="let i of items">
    <ion-list *ngFor="let t of time" class="time">
      <ion-col>
      </ion-col>
    </ion-list>
  </ion-row>
  
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
↧
↧

Ionic4 Modal Update e Add configurar rotas

June 6, 2019, 7:53 am
$
0
0

Ola Tudo bem

tenho um projeto em Ionic 4 que utiliza as rotas com essas configurações (“new”, “:id/edit”)

const routes: Routes = [

{ path: ‘’, component: ProductGroupListComponent },
{ path: ‘new’, component: ProductGroupFormComponent },
{ path: ‘:id/edit’, component: ProductGroupFormComponent }

];

como posso fazer um modal para adicionar e editar com um formulário que utiliza (formControlName do angular 7). Lembrando que consigo abrir o modal com o formulário. Mas como configurar passar ou obter essas rotas no modal.
Quando clicou no botão editar abri o modal e com o formulário com os campos preenchido (selecionado) do grupo de produtos que possui um id e description.

Alguém pode me ajudar?

↧

Cordova CLI: 6.0.0 - Not detected, please help!

June 6, 2019, 8:02 am
$
0
0

Thanks to all, solve my problem!

↧

Refresh the page when image source changed

June 6, 2019, 8:35 am
$
0
0

I have tried it with ion-img, but it is still not working!!

↧
Search

[ERROR] Network connectivity error occurred, are you offline?

June 6, 2019, 8:38 am
$
0
0

I’m also getting this error when running ionic cordova platform add ios

⠙ Uploading source images to prepare for transformations 
[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: getaddrinfo ENOTFOUND test.test test.test:80
            at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)

Is the resource server down?

↧
↧

Livereload is not working in Docker (Windows host)

June 6, 2019, 9:05 am
$
0
0

Hi!

I am trying to make a Docker image for my Ionic v4 projects. It is working just fine except the livereload.

Here is the content of my Dockerfile:

FROM node:10.16.0-alpine

WORKDIR /usr/src/app

#ENVIRONNEMENT
ENV GLIB_PACKAGE_BASE_URL="https://github.com/sgerrand/alpine-pkg-glibc/releases/download" \
    GLIB_VERSION="2.29-r0" \
    JAVA_HOME="/usr/lib/jvm/java-1.8-openjdk" \
    GRADLE_HOME="/usr/local/gradle" \
    GRADLE_VERSION="5.4.1" \
    ANDROID_HOME="/usr/local/android-sdk-linux" \
    ANDROID_TOOLS_VERSION="r25.2.5" \
    ANDROID_API_LEVELS="android-22" \
    ANDROID_BUILD_TOOLS_VERSION="29.0.2" \
    PATH="${GRADLE_HOME}/bin:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:$ANDROID_HOME/platform-tools:$PATH"

# INSTALL JAVA
RUN apk update && \
    apk add curl openjdk8-jre openjdk8

# INSTALL IONIC AND CORDOVA
RUN npm install -g cordova ionic

# INSTALL GRADDLE
RUN mkdir -p ${GRADLE_HOME} && \
    curl -L https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip > /tmp/gradle.zip && \
    unzip /tmp/gradle.zip -d ${GRADLE_HOME} && \
    mv ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/* ${GRADLE_HOME} && \
    rm -r ${GRADLE_HOME}/gradle-${GRADLE_VERSION}/

# INSTALL ANDROID
RUN mkdir -p ${ANDROID_HOME} && \
    curl --tlsv1 -L https://dl.google.com/android/repository/tools_${ANDROID_TOOLS_VERSION}-linux.zip > /tmp/tools.zip && \
    unzip /tmp/tools.zip -d ${ANDROID_HOME}

# INSTALL GLIBC
RUN curl -L https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub > /etc/apk/keys/sgerrand.rsa.pub && \
    curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-${GLIB_VERSION}.apk > /tmp/glibc.apk && \
    curl -L ${GLIB_PACKAGE_BASE_URL}/${GLIB_VERSION}/glibc-bin-${GLIB_VERSION}.apk > /tmp/glibc-bin.apk && \
    apk add /tmp/glibc-bin.apk /tmp/glibc.apk

# CONFIGURATION
RUN echo y | ${ANDROID_HOME}/tools/android --verbose update sdk --no-ui -a --filter platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION}

# TEMP FILES DELETION
RUN rm -rf /tmp/* /var/cache/apk/*

# PORTS
EXPOSE 8100 8200

Here is the content of my docker-compose.yml:

version: '3'
services:
    ionic:
        build:  ./docker/ionic
        volumes:
            - ./app:/usr/src/app
        ports:
            - "8100:8100"
            - "8200:8200"
        entrypoint: /bin/sh
        stdin_open: true
        tty: true

Here is the command I use in the container:

ionic serve --no-open --address 0.0.0.0

And here is what ionic info returns:

Ionic:

   Ionic CLI                     : 5.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : Linux 4.9

The host OS is Windows 10.

I tried a lot of things including:

  • checking that the path of my project does not contain any space
  • adding --poll=2000 in the ionic serve
  • editing /proc/sys/fs/inotify/max_user_watches which already contains the following value: 524288

Does anyone have an idea?

↧

Bug in Ionic Studio 0.0.63

June 6, 2019, 9:25 am
$
0
0

I also have the same problem ! And it’s a paid product !!!

↧

Last version of @ionic-native compatible with ionic 3?

June 6, 2019, 9:29 am
$
0
0

Stills on 4.20? Does Ionic 3.9.+ receives suport for ionic native 5.+?

↧

Ionic build for Browser core dumps

June 6, 2019, 9:32 am
$
0
0

I now have the same thing in building android for prod. Non prod works fine.
Remove and add android, no change.
Removed android, deleted the plugin folder, added android back and let it pull in the plugins.
Still same things.
it has to be an ionic related thing, but not sure what else it could be.

↧
↧

[ERROR] Network connectivity error occurred, are you offline?

June 6, 2019, 9:45 am
$
0
0

I just had to update to ionic cli v5

↧

Ionic 4 conditional ion-button property

June 6, 2019, 9:57 am
$
0
0

Hello,

I am in the process of porting my ionic 3 app to ionic 4.

I have the following ion-button:

<ion-button ion-button fill="clear" expand="block">UTILITIES</ion-button>

I was hoping to make the fill=“clear” property dynamic on a variable.

What is the best way to do this?

Thanks,

Brent

↧
Search

Ionic 4 conditional ion-button property

June 6, 2019, 10:06 am
$
0
0

So how about:

[fill]=“myVarTrue? 'clear':'solid'”

↧

[IONIC 4] - How to make infinite scroll with content scroll horizontal?

June 6, 2019, 10:08 am
$
0
0

Hey man, unfortunately you would have to do your own custom implementation to accommodation horizontal scrolling. There is a lot of magic going on to make infinite scroller (tracking position of elements and scroll etc) which make it hard to adopt it for horizontal scrolling.

↧
↧

Retrieving google photos with IONIC 3 with google photos API

June 6, 2019, 10:13 am
$
0
0

I am working on an IONIC 3 application.
In this app the user will be able to get photos from his google photos account and do some design manipulations on the image he selected.

So for that I want to use the google photos API

I did not find any example on how to accomplish this in IONIC.

I tried to do it like this:

Login to google with: cordova-plugin-googleplus
And request the https://www.googleapis.com/auth/photoslibrary scope

Here is the code:

//Here we do a login.
this.gplus.login({
   'webClientId': '***********',
   'offline': true,
   'scopes': 'profile email https://www.googleapis.com/auth/photoslibrary'
}).then((res) => {
   //after login we try to get the google photos albums
   this.http.get('https://photoslibrary.googleapis.com/v1/albums', {
      responseType: ResponseContentType.Json,
      params:{
         accessToken: res.accessToken,
         pageSize: 50,          
      }
   }).subscribe(res=>{
      console.log('<--- google images res: ', res);
   },err=>{
      console.log('<--- google images err: ', err);
   });
});

Now I get an error ‘Expected OAuth 2 access token’
Here is the full error description:

Request is missing required authentication credential. 
Expected OAuth 2 access token, login cookie or other valid authentication credential. 
See https://developers.google.com/identity/sign-in/web/devconsole-project.

So now the question is how do is get an OAuth 2 access token ?

↧

Ionic 4 conditional ion-button property

June 6, 2019, 10:17 am
$
0
0

Darn, I was thinking that that would work, but unfortunately I get the following:

Unexpected closing tag “ion-button”. It may happen when the tag has already been closed by another tag.

when I use:

<ion-button ion-button 
                    [fill]=“myVarTrue? 'clear':'solid'”
                    expand="block"
                    (click)="toggleMode('offline')">UTILITIES</ion-button>
↧

Ionic 4 conditional ion-button property

June 6, 2019, 10:26 am
$
0
0

Ionic v4 has an ion-button component now, so you no longer need the ion-button directive

↧
Viewing all 228554 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>