@MrWhite wrote:

Hi, I already post a question on stackoverflow but no answer so I take a chance on ionic forum… https://stackoverflow.com/questions/54667997/ionic-3-custom-svg-icon-cors-issue

I’m currently trying to build my Ionic 3 app on IOS 12.1.
My custom svg icon added with the following code :

ion-icon {
&[class*="std-icon"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  } // custom icons

  &[class*="std-icon-medal"] {
    mask-image: url(../assets/icon/medal.svg);
  }
}

is not displayed on IOS 12.1 because of the following error:

file:///Users/…/Studay.app/www/assets/icon/medal.svg

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin (medal.svg, 0)

[Error] Origin null is not allowed by Access-Control-Allow-Origin.

I know that WKWebView as enforced CORS, but in my case it is just about load internal resources, in www/assets folder …
Even the svg link start by file:/// so I don’t really understand what’s happens here.

My Info:

Ionic:

ionic (Ionic CLI) : 4.6.0
(/Users/hugo/.config/yarn/global/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 22 other plugins)

System:

NodeJS : v11.5.0 (/usr/local/Cellar/node/11.5.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61 ionic (Ionic CLI) : 4.6.0 (/Users/hugo/.config/yarn/global/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Posts: 1

Participants: 1

Read full topic

@patrick-ulster wrote:

Is this possible;
I am wanting to open the cordova InAppBrowser whenever links are clicked from an embedded iFrame. I am using ngx-twitter-timeline to display an embedded Twitter Timeline in my app, the code is fairly simple in that you just use the custom element from ngx-twitter-timeline and specify a URL and it then renders the feed for you.

<ngx-twitter-timeline [data]="{sourceType: 'url', url: 'https://twitter.com/CareersAtUlster'}" [opts]="{tweetLimit: 50}"></ngx-twitter-timeline>

However, when a tweet is clicked inside the app on IOS and Android, the current page is replaced with Twitter… I want to change this so that when a link is clicked then the InAppBrowser opens the link with the location bar and controls. I have InAppBrowser in my project for opening specific links, but I am not sure how I can have it open links that are loaded from an iFrame.

My Ionic Info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.8
   @capacitor/core           : 1.0.0-beta.8

Cordova:

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

System:

   ios-deploy : 1.9.4
   NodeJS     : v8.11.4 (/usr/local/bin/node)
   npm        : 6.8.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

@Kyrax80 wrote:

Hello.

I am making an Ionic Module following this tutorial .

In my module I use toasts but I am not being able to apply a style to it (in a normal Ionic App I can do it with no problems).

My code is the following:

imports...

const HTML = `Hello`

const CSS = `
.toast-error > div {
  text-align: center;
  background-color: red;
}
`

@Component({
  selector: 'my-component',
  template: HTML_TEMPLATE,
  styles: [CSS]
})
export class MyComponent{

  public constructor(private toastCtrl: ToastController) { }

  public async myMethod(): Promise<any> {
    this.modal.create(MyModalComponent, {
      "list": list
    }).present().then(() => console.log("done")
      .catch((error) => {
        console.log(error)
        this.toastCtrl.create({
          message: "An error has occurred",
          duration: 4000,
          position: "top",
          cssClass: "toast-error"
        }).present();
      });
  }
}

How can I make it work?

Thanks.

Posts: 1

Participants: 1

Read full topic

@youssefelgarny wrote:

hello,
please i need your help … i am trying to get data from REST API and i get that error !

i am using ionic v4

image.png732×462 9.81 KB

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


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

  

  constructor(private http: HttpClient) {
  }

  // service that test if the user exist or not
  authentification(user:string,password:string):Observable<any>{

   

    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'JsonStub-User-Key': '732e939b-05b7-4877-8d8f-f924e67638eb',
      'JsonStub-Project-Key': '31ec72a8-2779-4931-843f-1cbd37b81b2c',
      "Access-Control-Allow-Headers" : "*"
    });
    return this.http.get('http://jsonstub.com/enova_sante_app/api/services/patient',{headers,responseType: 'json'})
        .pipe(map(data => {

          //console.log(data.status);
          console.log(data); // data received by server
          //console.log(data.headers);
          return data;
          
        },
        (error: any) => {
            console.log(error);
        }));
    
  }


}

Posts: 1

Participants: 1

Read full topic

@sajithstorybox wrote:

I am using the Ionic Media plugin for recording audio. And There are 3 button clicks one for Start recording, one for pause recording and one for stop recording. Pressing start after pause will call resumeRecording(). And the issue is the final audio will only contain the data till we press the pause button.

Posts: 1

Participants: 1

Read full topic

@demokumar wrote:

in ionic 3 we use menuclose option to close menu on click menu items this is not work in ionic4
and also if we don’t want to close menu so we remove menuclose in ionic 3 but in ionic 4 how to do this

Posts: 1

Participants: 1

Read full topic

@brunofcs wrote:

I want to build my ionic app for IOS version 10.
When I build my app, I can’t install it in a iPhone with IOS 10
What I can do to set a min IOS version?

Posts: 1

Participants: 1

Read full topic

@YanisForley wrote:

Hi everyone.

I ask you for to do something enough tricky.
I’m trying to change the tag name of a component with a variable and i don’t know how to do it.

I’m trying with an import but it’s doesn’t work because the import is done after the use of the @Component.

My final goal is to had a prefix to all component of the project (ex : ada-button, ada-component, ada-card …). The “ada” has defined globally.

Do you have an idea to help me ?

Thank’s

Posts: 1

Participants: 1

Read full topic

@nicolas-ballaman wrote:

Hi, i get this error in AndroidStudio

Error during Sync: The interruption of an existing connection has been forced by the remote host
Session ‘app’: Error Installing APK

ionic info

Ionic:
ionic (Ionic CLI) : 4.5.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:
cordova-plugin-device 2.0.2 “Device”
cordova-plugin-inappbrowser 3.0.0 “InAppBrowser”
cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 2.3.2 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-sqlite-storage 2.6.0 “Cordova sqlite storage plugin”
cordova-support-google-services 1.1.0 “cordova-support-google-services”
phonegap-plugin-multidex 1.0.0 “Multidex”
phonegap-plugin-push 2.2.3 “PushPlugin”

System:
NodeJS : v11.4.0
npm : 6.7.0
OS : Windows 10

My test device:
Motorola MotoE2(4G-LTE) (Android 6.0, API 23)

This app work in android 6.0.1, 7.0.0 but dosn’t work in android 6.0.0 or lower

I run:
ionic codrova platform add android
ionic codrova build android
run platform/android in Android studio

Any solution for this? I need it to work for versions greater than 5.0

Posts: 1

Participants: 1

Read full topic

@Jalvarez05 wrote:

Hello everyone .

I am using interceptors on my app, and I’ve followed this tutorial : https://ionicacademy.com/ionic-http-interceptor/

I’ve done some modification for it only function when error is 403( its my error when token is expired)

intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

let promise = this.storage.get('token');

return Observable.fromPromise(promise)
  .mergeMap(token => {
    let clonedReq = this.addToken(request, token);
    return next.handle(clonedReq).pipe(
      catchError(error => {
        // Perhaps display an error for specific status codes here already?
        if (error.status === 403) {
          // not authorized error .. do something
          let msg = error.message;

          let alert = this.alertCtrl.create({
            title: error.name,
            message: msg,
            buttons: ['OK']
          });
          alert.present();
        }
        // Pass the error to the caller of the function
        // return Observable.throw(error);
        //return _throw(error);
        return Observable.of(error);
      })
    );
  });

}

// Adds the token to your headers if it exists
private addToken(request: HttpRequest, token: any) {
if (token) {
let clone: HttpRequest;
clone = request.clone({
setHeaders: {
Accept: application/json,
‘Content-Type’: application/json,
Authorization: Bearer ${token}
}
});
return clone;
}
return request;
}

The context is : My component is requesting simultaneously 3 http requests, and they are catched by the interceptor’s catch block (which has an alert). I’m watching 3 alerts, but I want to get just 1 and ignore the others because The first one will be replaced to return the login page and remove storage.

private cleanApp() {
this._us.removeStorageTokenExpired();
let nav = this.app.getActiveNav();
nav.setRoot(‘Login’);
}
How can I get that , thank you in advance.

Posts: 1

Participants: 1

Read full topic

@carvear wrote:

Hello everybody. I am just trying to make a push to another page but i get the error: Cannot read property ‘push’ of undefined and i don’t know how to solve it. I read diferent posts but it doesnt work.

The method (getCategoriasPrincipales()) returns well every category, i can see it in the menu.

Param1: is well recieved from another page like this
this.paramCatId = navParams.get(‘param1’);

Thanks a lot!

App.html
<ion-menu [content]=“content”>

La Empresa Acerca De Categorias {{cat.categoriaNombre}}

<ion-nav [root]=“rootPage” #content>

app.component.ts

import { Component, ViewChild } from ‘@angular/core’;
import { Platform, Nav } from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { ProductosCategoriaPage } from ‘…/pages/productos-categoria/productos-categoria’;

import { HomePage } from ‘…/pages/home/home’;
@Component({
template: ‘<ion-nav #myNav [root]=“rootPage”>’,
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(‘Nav’) nav: Nav;
rootPage:any = HomePage;
empresa = 1;
categoriaDestacada: any;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public http: Http) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
this.getCategoriasPrincipales();
}

getCategoriasPrincipales(){
this.http.get(“http://…file.php?emp=”+this.empresa).subscribe( data => {
this.categoriaDestacada = JSON.parse(data["_body"]);
}, err =>{
console.log(err);
});
}

productosCategoria2(elemento){
this.nav.push(ProductosCategoriaPage, {param1: elemento});
}
}

Posts: 1

Participants: 1

Read full topic

@bharathirajatut wrote:

Hi,
I have tried the image upload using the PHP and Camera Plugin. It works fine. I am sharing the code with you guys. Get the code and sample apk using the below link.

You can find various other native plugins working example in the same Git repo.

You can try the sample APK, which is tested with PHP.

Posts: 1

Participants: 1

Read full topic

@960hrt wrote:

Is it the right choice to use firebase realtime with SQLite in ionic app

Posts: 1

Participants: 1

Read full topic

@mlynch wrote:

I have an application that creates files, and allows the user to delete them when they’re no longer necessary. For several months I’ve had this working, but it’s suddenly stopped working and I can’t figure out why.

My app consists of several pages, a service that hosts functions/methods shared by those pages, and a service that deals with File System I/O. A given page will called the “SharedServices” Service to delete a report, which in turn calls the “FileServices” Service to remove the file from storage.

It’s been working this way without any problem, but just recently I’ve run into an issue where the “SharedServices” Service throws this TypeError when it tries to called the “deleteRecord” function in the “FileServices” Service. Everything compiles just fine, so I don’t understand where the problem is.

Posts: 1

Participants: 1

Read full topic

@dev-gilbert wrote:

Hello guys, I am having difficulties trying to implement a simple login form.

@Component({
  selector: "app-login",
  templateUrl: "./login.page.html",
  styleUrls: ["./login.page.scss"]
})
export class LoginPage implements OnInit {
  constructor(private service: AuthenticationService) {}
  user = {};

  login() {
    this.service.login();
  }

  onSubmit() {
    console.log(this.user);
  }
}

<form (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input
        type="text"
        [(ngModel)]="user.username"
        name="username"
      ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input
        type="text"
        [(ngModel)]="user.password"
        name="password"
      ></ion-input>
    </ion-item>
    <ion-button type="submit" expand="block">Sign up</ion-button>
  </form>

When I click the sign up button I don’t see anything in the console. What am I missing here?

Posts: 1

Participants: 1

Read full topic

@thomashuettmaier wrote:

I am new to Ionic and have the problem that in the whole project my buttons are not displayed correctly. They are always displayed white with shadows. If you click on them or move the cursor over them on your PC, they will be displayed normally.
Block buttons, outlined buttons don’t work either.

<ion-content>
      <button ion-item>Save</button>
      <button ion-button>Save</button>
</ion-content>

button.JPG450×805 5.07 KB

ionic-info.JPG1113×386 36.7 KB

Posts: 1

Participants: 1

Read full topic

@RenzoM78 wrote:

Hi all,

When I use in the .html:

<ion-card *ngFor="let user of users">
  <img src="{{ user.field_image }}">

Then the image is on the html page.

There is also a {{ user.link }} but I have to put that in an In-app-browser within a ngoninit in the .ts file, what do I have to do to do that in the right way?:

ngOnInit(){

        const browser = this.iab.create('user.link',{location:'no'});

    }

I have to do more than this in the .ts file?

Posts: 1

Participants: 1

Read full topic

@dedemiza wrote:

I would like my ion-content adjusted to the size of the screen. In this case, fill in and do not leave that void at the bottom.

njSkZ.png287×532 14.4 KB

Example with a large resolution:

Hence if the height of the screen is smaller, it causes to do scroll, getting that part white, because the bottom does not fill when it does screen scroll

<ion-content >
<ion-grid class="teste">

<ion-item class="a">  
  <ion-label class="flNome" position="floating">NOME</ion-label>
  <ion-input name="title" [(ngModel)]="title" class="nome" type="text" ></ion-input>
</ion-item>



<ion-item class="c">
    <ion-label class="flNome" position="floating">LOCAL DO EVENTO</ion-label>
    <ion-input size="30px" name="evento" [(ngModel)]="evento" class="evento" type="text" ></ion-input>
  </ion-item>


   <ion-item class="d"> 
      <ion-label class="flNome" position="floating">QUAL A SUA FESTA?</ion-label>
    <ion-select name="select" [(ngModel)]="select" okText="Okay" cancelText="Dismiss">
      <ion-select-option value="casamento">CASAMENTO</ion-select-option>
      <ion-select-option value="fifiteenAnos">15 ANOS</ion-select-option>
      <ion-select-option value="formatura">FORMATURA</ion-select-option>
      <ion-select-option value="empresarial">EMPRESARIAL</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item class="e">
      <ion-label class="flNome" position="floating">CONVIDADOS</ion-label>
      <ion-input  name="conv" [(ngModel)]="conv" class="convidados" type="text" ></ion-input>
    </ion-item>

    <ion-item class="f">
        <ion-label class="flNome" >DATA</ion-label>
        <ion-input  name="date" [(ngModel)]="date" class="data" type="date" ></ion-input>
      </ion-item>

      <ion-item class="g">
          <ion-label class="flNome" position="floating">TELEFONE</ion-label>
          <ion-input  name="tel" [(ngModel)]="tel" class="telefone" type="tel" ></ion-input>
        </ion-item>

        <ion-item class="h">
            <ion-label class="flNome" position="floating">CELULAR</ion-label>
            <ion-input  name="cel" [(ngModel)]="cel" class="celular" type="cel" ></ion-input>
          </ion-item>

          <ion-item class="i"> 
            <ion-textarea  name="desc" [(ngModel)]="desc" class="desc" maxLength="500" placeholder="ESCREVA MAIS DETALHES (TEMA DA FESTA, CORES)"></ion-textarea>
         </ion-item>

         <ion-button fill="solid" expand="block" class="btn"  (click)="sendEmail()">ENVIAR</ion-button>

    </ion-grid>
</ion-content>

.title{ 

  margin-right:10%; 
  }

 .header {
    --background : rgba(248, 248, 248, 0.5);
}

.teste{
  // --background: url('/assets/images/fundo.png') no-repeat center ;
position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color: goldenrod;
    width:100%;
    height:100%;
}
   .nome,.evento,.select,.convidados,.data,.telefone,.celular
,.desc{
    font-size: 20px;
    color: rgb(32, 79, 207);
    font-weight: bold;
}   
.a,.b,.c,.d,.e,.f,.g,.h,.i{
    opacity: 0.5;
    border: 2px solid #ffffff;

}

Posts: 1

Participants: 1

Read full topic

@sisdev wrote:

Hey guys,

I have an app for taking pictures either from camera or from the gallery and to save them as base64. Obviously it saves the pictures after the save button was clickt.
This bit works fine.

Now I wanted to add an ion-textarea under each picture to let the user put different comments for each picture and after clicking on the save button, all data would be transferred “somewhere”…
This bit doesn’t work because I don’t know how to get the value of ion-textarea

What I’ve done so far is:
.TS file:

public photos;
ngOnInit() {
      ....
      this.photos = [];
      ....
}

takePhoto() {
      ....           
      this.camera.getPicture(options).then(
            imageData => {
                this.base64Image = "data:image/jpeg;base64," + imageData;
                this.photos.push(this.base64Image);                
            }
      ....
}

.html file:

<form #collectForm="ngForm" (ngSubmit)="saveCollectedData(collectForm)">
        <ion-grid *ngIf="photos">
            <ion-row responsive-sm wrap>
                    <ion-col size="6" *ngFor="let photo of photos; let id = index">
                        <ion-card>                            
                            <img [src]="photo" />
                            <ion-textarea rows="4" cols="5"></ion-textarea>
                        </ion-card>
                    </ion-col>
            </ion-row>
        </ion-grid>

        <ion-button class="submit-btn" expand="block" type="submit">Save</ion-button>
    </form>

Now my ion-textarea has to have a dynamic name (I think) but somehow I can’t figure that out.
If I write the ion-textarea like that:

<ion-textarea rows="4" cols="5" [name]="piccomment" [(ngModel)]="collectForm.piccomment"></ion-textarea>

With this I would have the same comment for all pictures which is wrong.

Any ideas how to solve that?

Thanks

Posts: 1

Participants: 1

Read full topic

@NoorAlhuda1990 wrote:

Hi my friends . I have news app in ionic4 and i imported all the news from my database in firestore

mydata.jpg987×441 52.8 KB

the problem that i have that i want when i click on the details button it must show the details of each news in a details page ,
i could that passed the id of every news to deatils page but its just show the id As in the following picture

my code :
news.page.ts

export class FilmsPage implements OnInit {

  news: Observable<any[]>;
  constructor(public db: AngularFirestore, private router: Router) { }

  ngOnInit() {
      this.news = this.db.collection('123').snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });

news.page.html

<ion-content padding>
            <ion-item *ngFor=" let count of news | async">
              <h5>{{count.title}}<ion-button routerLink="/details/{{count.id}}"> details</ion-button>

                <img src="{{count.image}}">
              </h5>

            </ion-item>

    </ion-content>

details.pge.ts

export class DetailsPage implements OnInit {
  id: string;

  constructor(private router: ActivatedRoute, private afs: AngularFirestore) {

   }

  ngOnInit() {
    this.id = this.router.snapshot.paramMap.get('id');
    console.log(this.id);
  }

}

details.page.html

<ion-content padding >
  {{id}}


</ion-content>

Posts: 1

Participants: 1

Read full topic