Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49110 articles
Browse latest View live

Upgrade to Angular 5

$
0
0

@codiqa10004205 wrote:

Going over suggestion following the latest upgrade instructions in the change log here. I got stuck and now the ionic project doesn’t compile at all.
I am using translate and stuck with OpaqueToken problem.
How should I change the translate implementation to use it?

Error
Close
Typescript Error
Module ‘“C:/Users/2bher/WebstormProjects/ionic3-angular4_2/node_modules/@angular/http/src/http”’ has no exported member ‘Http’.
…bstormProjects/ionic3-angular4_2/node_modules/@angular/http/src/http_module.d.ts
import { RequestOptions } from ‘./base_request_options’;
import { Http, Jsonp } from ‘./http’;
export declare function _createDefaultCookieXSRFStrategy(): CookieXSRFStrategy;
Typescript Error
Module ‘“C:/Users/2bher/WebstormProjects/ionic3-angular4_2/node_modules/@angular/http/src/http_module”’ has no exported member ‘HttpClientModule’.
…her/WebstormProjects/ionic3-angular4_2/node_modules/@angular/http/src/index.d.ts
undefined
Typescript Error
Module ‘“C:/Users/2bher/WebstormProjects/ionic3-angular4_2/node_modules/@angular/core/core”’ has no exported member ‘OpaqueToken’.
…ts/ionic3-angular4_2/node_modules/@ngx-translate/core/src/translate.service.d.ts
import { EventEmitter, OpaqueToken } from “@angular/core”;
import { Observable } from “rxjs/Observable”;
Typescript Error
Class ‘Subject’ incorrectly extends base class ‘Observable’. Types of property ‘lift’ are incompatible. Type ‘(operator: Operator<T, R>) => Observable’ is not assignable to type ‘(operator: Operator<T, R>) => Observable’. Type ‘Observable’ is not assignable to type ‘Observable’. Type ‘T’ is not assignable to type ‘R’.
…jects/ionic3-angular4_2/node_modules/ionic-native/node_modules/rxjs/Subject.d.ts
*/
export declare class Subject extends Observable implements ISubscription {
observers: Observer[];
Typescript Error
Class ‘WebSocketSubject’ incorrectly extends base class ‘AnonymousSubject’. Types of property ‘lift’ are incompatible. Type ‘(operator: Operator<T, R>) => WebSocketSubject’ is not assignable to type ‘(operator: Operator<T, R>) => Observable’. Type ‘WebSocketSubject’ is not assignable to type ‘Observable’. Types of property ‘operator’ are incompatible. Type ‘Operator<any, R>’ is not assignable to type ‘Operator<any, T>’. Type ‘R’ is not assignable to type ‘T’.
…node_modules/ionic-native/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts
*/
export declare class WebSocketSubject extends AnonymousSubject {
url: string;
Typescript Error
Argument of type ‘{ location: boolean; }’ is not assignable to parameter of type ‘NavOptions’. Object literal may only specify known properties, and ‘location’ does not exist in type ‘NavOptions’.
…/WebstormProjects/ionic3-angular4_2/src/pages/location-select/location-select.ts
close(){
this.navCtrl.popTo(TutorialPage, {location: false});
}
Ionic Framework: ^3.9.2
Ionic Native: ^2.9.0
Ionic App Scripts: 3.1.2
Angular Core: ^5.0.0
Angular Compiler CLI: ^5.0.0
Node: 8.9.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

package.json
{
“name”: “wise-app”,
“version”: “0.0.1”,
“author”: “Tzvi Gregory Kaidanov”,
“homepage”: “http://wisea-app.biz”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/animations": “^5.0.0”,
"@angular/common": “^5.0.0”,
"@angular/compiler": “^5.0.0”,
"@angular/compiler-cli": “^5.0.0”,
"@angular/core": “^5.0.0”,
"@angular/flex-layout": “^2.0.0-beta.10-4905443”,
"@angular/forms": “^5.0.0”,
"@angular/http": “^5.0.0”,
"@angular/platform-browser": “^5.0.0”,
"@angular/platform-browser-dynamic": “^5.0.0”,
"@angular/platform-server": “^5.0.0”,
"@angular/router": “^5.0.0”,
"@ionic-native/camera": “^4.3.2”,
"@ionic-native/core": “^4.2.0”,
"@ionic-native/device": “^4.0.0”,
"@ionic-native/geolocation": “^4.4.2”,
"@ionic-native/google-maps": “^4.4.2”,
"@ionic-native/in-app-browser": “^4.3.2”,
"@ionic-native/native-storage": “^4.0.0”,
"@ionic-native/network": “^4.2.1”,
"@ionic-native/splash-screen": “4.3.2”,
"@ionic-native/status-bar": “4.3.2”,
"@ionic/storage": “2.1.3”,
"@ngx-translate/core": “6.0.1”,
"@ngx-translate/http-loader": “0.0.3”,
"@types/google-maps": “^3.2.0”,
“chart.js”: “^2.7.1”,
“copyfiles”: “^1.2.0”,
“cordova-android”: “6.3.0”,
“cordova-browser”: “5.0.1”,
“cordova-plugin-add-swift-support”: “^1.7.0”,
“cordova-plugin-camera”: “git+https://github.com/apache/cordova-plugin-camera.git”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-facebook4”: “^1.9.1”,
“cordova-plugin-geolocation”: “^3.0.0”,
“cordova-plugin-googlemaps”: “^2.1.1”,
“cordova-plugin-ionic”: “^2.0.3”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“cordova-windows”: “^5.0.0”,
“es6-promise-plugin”: “^4.1.0”,
“font-awesome”: “^4.7.0”,
“ionic-angular”: “^3.9.2”,
“ionic-native”: “^2.9.0”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“reflect-metadata”: “^0.1.10”,
“rxjs”: “^5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@ionic/app-scripts": “3.1.2”,
"@types/googlemaps": “^3.26.20”,
“typescript”: “^2.4.2”
},
“description”: “WiseApp try in on!”,
“cordova”: {
“plugins”: {
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-statusbar”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-facebook4”: {
“APP_ID”: "
},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic”: {
“APP_ID”: “7cf28f17”,
“CHANNEL_NAME”: “Master”,
“UPDATE_METHOD”: “background”,
“UPDATE_API”: “https://api.ionicjs.com”,
“MAX_STORE”: “2”
},
“cordova-plugin-compat”: {},
“cordova-plugin-camera”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-geolocation”: {},
“cordova-plugin-googlemaps”: {
“API_KEY_FOR_ANDROID”:
}
},
“platforms”: []
},
“config”: {
“ionic_bundler”: “webpack”,
“ionic_source_map”: “source-map”,
“ionic_copy”: “./scripts/copy-custom-libs.js”
}
}

TSCONFIG>json

{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“declaration”: false,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“lib”: [
“dom”,
“es2017”
],
“moduleResolution”: “node”,
“sourceMap”: true,
“target”: “es5”,
“typeRoots”: [“node_modules/@types”],
“baseUrl”: “src”
},
“include”: [
“src/**/*.ts”
],
“exclude”: [
“node_modules”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
},
“angularCompilerOptions”: {
“preserveWhitespaces”: false
}
}

What else should i change?

I used this https://angular-update-guide.firebaseapp.com/
by this blog https://alligator.io/angular/angular-5/

Any ideas?

Posts: 1

Participants: 1

Read full topic


How to access a value of JSON response

$
0
0

@flycoders_sourav wrote:

actually i want to get senderNewCall from the whole jsone response

below my code.

.subscribe(data => {
        let leaddetails = data.json();
        this.leaddetailsvalue =leaddetails.viewleaddetails;
        this.data = leaddetails.userMobile;
        alert(this.data)
      }, error => {
        //console.log(error);// Error getting the data
        alert("No Internet connection!")
      });

json response

{"details": [{"userID":"1","userName":"Monojit Roy","userMobile":"3232","userEmailid":"monojit
@flycoders.com","userPaswrd":"monojit","leadID":"1","senderNewCall":"55","senderGreenCall":"8","senderYellowCall"
:"5","senderFollowUpCall":"2","sendDate":""},{"userID":"1","userName":"Monojit Roy","userMobile":"3232"
,"userEmailid":"monojit@flycoders.com","userPaswrd":"monojit","leadID":"5","senderNewCall":"14","senderGreenCall"
:"3","senderYellowCall":"5","senderFollowUpCall":"6","sendDate":""},{"userID":"1","userName":"Monojit
 Roy","userMobile":"3232","userEmailid":"monojit@flycoders.com","userPaswrd":"monojit","leadID":"6","senderNewCall"
:"99","senderGreenCall":"15","senderYellowCall":"35","senderFollowUpCall":"20","sendDate":"22-11-2017"
}]}

please guide me

Posts: 1

Participants: 1

Read full topic

FormArray not working

Ionic DateTime - Word Wrap

$
0
0

@karvanj wrote:

Is there a way to apply a word-wrap/text-wrap class to the Ionic Datetime? For example:

.word-wrap {
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

Posts: 1

Participants: 1

Read full topic

Many to many video call

$
0
0

@abdosameh wrote:

Hello,

Any one know how to implement many to video and voice call like hangout in my ionic app ?

Thanks,

Posts: 1

Participants: 1

Read full topic

Uncaught promise with ionic-native/ftp

$
0
0

@Alexdragneel wrote:

Hello,

I want to connect my application on a personal server to upload and download file. I see that i can do that with the ionic-native/ftb cordova plugin.

I have this error when i try to implement it :
Error: Uncaught (in promise): Error: No provider for FTP!
injectionError@http://192.168.1.56:8100/build/main.js:1739:86
noProviderError@http://192.168.1.56:8100/build/main.js:1777:12

My ftp.service.ts is :

import { Injectable } from '@angular/core';

import * as firebase from 'firebase/app'
import { FTP } from '@ionic-native/ftp';

@Injectable()
export class FtpService {

  constructor( private fTP: FTP ) {
  }

  connect(hostname: string, username: string, password: string): firebase.Promise<any> {
    return this.fTP.connect(hostname, username, password);
  }

  upload(localFile: string, remoteFile: string): firebase.Promise<any> {
    return this.fTP.upload(localFile, remoteFile);
  }

  download(localFile: string, remoteFile: string): firebase.Promise<any> {
    return this.fTP.download(localFile, remoteFile);
  }

  disconnect(): void {
    this.fTP.disconnect();
  }
}

I have not forgotten to add it in providers in app.module.ts and when i juste add “public ftpService: FtpService” in a Ionic Page even without using the functions of it, I have the error.

Thanks a lot if you have the answer :slight_smile:

Posts: 1

Participants: 1

Read full topic

What is the ideal project structure Ionic 3

$
0
0

@Zoreil wrote:

Hello everybody,

To start, sorry for my English.

I am a beginner in ionic and I wanted to know how to properly structure my application (in src folder).
I use in my application a tabcontroller with 3 tabs, and with the Ionic creator, I have the following structure :

src
app
app.component.ts

pages
folder1
page1.component.ts
page1.template.html
page1.template.css
folder2
page2.component.ts
page2.template.html
page2.template.css

I stopped using Ionic Creator, and I would like to have a good structure in case the application grows.

I know that in Angular 4, we separate the different modules as well as the services …
But is it the same for Ionic 3 app ?

If I do like for Angular 4, could I still use Navigation with NavController?

Thanks in advance.

Brice

Posts: 1

Participants: 1

Read full topic

Ionic 3 Deeplinks on emulator

$
0
0

@khrystynak wrote:

Hi all,
Can’t make work deeplinks with Ionic 3 on Android emulator. Maybe someone has an idea why?
Could launch app on emulator from link:
myapp://domain.com

package.json parts:

@angular/common”: “4.4.3”,
“ionic-angular”: “3.7.1”,
“ionic-plugin-deeplinks”: “~1.0.15”,
"@ionic/app-scripts": "3.0.1"
“ionic-plugin-deeplinks”: {
“URL_SCHEME”: “myapp”,
“DEEPLINK_SCHEME”: “https”,
“DEEPLINK_HOST”: “domain.com”,
“ANDROID_PATH_PREFIX”: “/”
}

Posts: 1

Participants: 1

Read full topic


Keyboard not working properly

$
0
0

@kennedymca wrote:

when i click input box keyboard is opening and i closed that keyboard, after i clicked the input box again keyboard was not opening.
ex:
<ion-list> <ion-item> <ion-input type="number" value="" placeholder="Mobile Number"></ion-input> </ion-item> <ion-item> <ion-input type="number" value="" placeholder="Number"></ion-input> </ion-item> <ion-item> <ion-input type="number" value="" placeholder="Number"></ion-input> </ion-item> <ion-item> <ion-input type="number" value="" placeholder="Number"></ion-input> </ion-item> </ion-list>

Posts: 1

Participants: 1

Read full topic

Retrieving multiple objects from Storage

$
0
0

@sam1408 wrote:

Hi guys I am building a page to send some user inputted information into the database of the server.

I have some product id’s in my Storage.
contact

Like I mentioned in the comments when I use for loop I am able to see every ‘id’ saved in the storage.
but when I exit from the ‘for loop’ the only value I get in my ‘this.id’ is the last id in the storage.

please give me any advice or suggestion in getting multiple id’s into a variable, so that it can be pass along to a function which sends data to the database of the server.

Posts: 2

Participants: 2

Read full topic

Ionic 3 Faceboook login with Ruby on Rails and Devise gem

$
0
0

@Antonini wrote:

Hi all,

I’ve problems with Rails Devise Facebook auth with Ionic 3. I’ve done the same with my webapp and I can login with Facebook, but I’m having problems to implement this on ionic 3.

I’ve followed this guide https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview and now I can login with Facebook on my webapp.

But on Ionic 3 I can not find any solutions.

Below the step that I’ve done in Ionic:

  1. API call from Ionic to server
return this.http.get(`${environment.apiUrl}users/auth/facebook`)
   .map((data: any) => {
   data = new User(data);
   return data;
})

The result is this message on rails server console:

Started GET “/users/auth/facebook” for 127.0.0.1 at 2017-11-22 17:16:19 +0100 I, [2017-11-22T17:16:19.074803 #1104] INFO – omniauth: (facebook) Request phase initiated.

And I have these errors in the chrome console:

Failed to load http://dev.knf.com:3000/users/auth/facebook: Redirect from ‘http://dev.knf.com:3000/users/auth/facebook’ to ‘https://www.facebook.com/v2.11/dialog/oauth?client_id=&redirect_uri=http://*k&response_type=code&scope=email&state=’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin 'http://*’ is therefore not allowed access.

No rails controllers are called.


If I use the json method:

API call from Ionic to server
return this.http.get(`${environment.apiUrl}users/auth/facebook.json`)
   .map((data: any) => {
   data = new User(data);
   return data;
})

The result is this message on rails server console:

Started GET “/users/auth/facebook.json” for 127.0.0.1 at 2017-11-22 17:19:42 +0100 Processing by Users::OmniauthCallbacksController#passthru as JSON
From: /Users/bistaff/knifeandfork/app/controllers/users/omniauth_callbacks_controller.rb @ line 55 Users::OmniauthCallbacksController#passthru:

    54: def passthru
 => 55:   binding.pry
    56:   super
    57: end
Rendering text template

Rendered text template (0.0ms)
Completed 404 Not Found in 4110ms (Views: 0.6ms | ActiveRecord: 0.0ms)
After that it does not do anymore operations.


There is someone that can help me to understand how I can do to solve this problem?

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

Center vertically items inside ion-list in side-menu

Icons color need to change based on network

$
0
0

@yogaccx wrote:

HI Guys im new to ionic …
Is there is any way to change ionic icons color based on Network Connectivity
for ex:
Icon need to turn on green color if its connects to internet, if its no network it need to turn red.

Thanks in Advance

Posts: 1

Participants: 1

Read full topic

Press gesture time option

$
0
0

@francescodist wrote:

Hi, I’m trying to edit the time option of the Press event on a Ionic 2 app.
I’ve found the “time” attribute in node_modules/ionic-angular/gestures/hammer.js at line 1517.
By the way, changing manually this value has no effect on the application. How can I effectively change it? Thanks for the help!

Posts: 1

Participants: 1

Read full topic

Facebook plugin not installed

$
0
0

@mcihak wrote:

Hi all,
I just updated all for newest version and then installed cordova-plugin-facebook4 . But if I want to use this plugin, console tell to me that:

Native: tried calling Facebook.browserInit, but the Facebook plugin is not installed. Install the Facebook plugin: 'ionic cordova plugin add cordova-plugin-facebook4'

I tried many times to reinstall platforms and node_modules. But no luck with this.

Is there something wrong?

EDIT:
Here is ionic info log:


cli packages: (/Users/martincihak/Sites/apps/mojeBaby-app/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.6.0
    npm  : 5.5.1
    OS   : macOS High Sierra

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro


Posts: 1

Participants: 1

Read full topic


Ionic view doesn't load SVG images on iOS

$
0
0

@jsanta wrote:

Hi.
I’ve testing Ionic View on both Android an iOS. While testing the same app, on iOS all SVG images are missing, but on Android I can see them without problems.
Ionic DevApp has no problems showing SVG images. When testing the compiled version of the app on iOS I can see the SVG images, so there’s something weird happening.

Anybody has faced this problem? Any workarounds that don’t require changing my SVGs to “standard” web images?

Best regards.
José Ignacio

Posts: 1

Participants: 1

Read full topic

Ionic view Error 400 in Android

$
0
0

@jsanta wrote:

Hi.
I recently published an app to share it on Ionic view. On Android it appears on my account apps, but when I click it to open the app, it shows the message “Error 400”.
Tried the same but adding the app using it’s code. Ionic view (Android) shows the app (same code) in 2 lists, My user’s apps, and an All apps list.
When clicking the new item on the All apps list, the app opens without problems (no error 400).

Can’t find where to report Ionic view issues, so that’s why I’m making these posts.
Hope somebody from the Ionic view team can take a look at these issues.

Best regards,
José Ignacio

Posts: 2

Participants: 2

Read full topic

How to build app with offline video support features same like youtube in ionic 2 or 3?

$
0
0

@amitk04 wrote:

I have a requirement where I need to download videos from my app and store them within the app so that the videos are not accessible from the folders, but can be viewed only from the App. the way youtube offline support work same functionality i want it in my app

any one have solution?

Thanks in advance :slight_smile:

Posts: 1

Participants: 1

Read full topic

Problem while building my ionic project

$
0
0

@yogaccx wrote:

Hi Every one ,

I new to ionic i am facing the problem while building my ionic project i got below error while building it in console please some one help i am waiting for help

Error: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:
:mergeDebugResources FAILED

Thanks Nd regards
Yogi

Posts: 1

Participants: 1

Read full topic

Trimming a string based on the length

$
0
0

@akr_rajkumar wrote:

Hi,

I’m having a variable value “ABCDE”. I want to split the string into “ABC” and “DE” so that “DE” will point to some value in a ion-select.

How can I split the string in the component by its length?

The variable value will always be 5 characters and I need to split it 3,2 for my case. Any ways to do it?

Posts: 1

Participants: 1

Read full topic

Viewing all 49110 articles
Browse latest View live


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