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

Ionic 4 tabs navigation post login - Solution

November 7, 2018, 9:57 am
$
0
0

Nice, thanks for the prompt response!!

I moved the function to inside the main class, which got rid of all the issues i was having before, but I now get

{
	"resource": "/Users/nglhubbrich/projects/Sarcan/apps/earthSaverStats/src/app/home/home.page.ts",
	"owner": "typescript",
	"code": "2339",
	"severity": 8,
	"message": "Property 'route' does not exist on type 'HomePage'.",
	"source": "ts",
	"startLineNumber": 13,
	"startColumn": 10,
	"endLineNumber": 13,
	"endColumn": 15
}

I tried importing routes and routermodule thinking that was the issue, but it still has that error.

home.page.ts

import { Component } from "@angular/core";
import { async } from "q";
import { RouterModule, Routes } from "@angular/router";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage {
  async navTabs() {
    this.route.navigateByUrl("/app/tabs/dashboard:dashboard");
  }
}


> ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.5
   @angular-devkit/schematics    : 0.8.5
   @angular/cli                  : 6.2.5
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.11.2 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : macOS
↧
Search

Import lazy component on sidenav menu

November 7, 2018, 10:00 am
$
0
0

My app is using lazy loading but I have components loaded in app.module becase I need them anyway by default but most of them are loaded on different pages/components.

This is side-menu.html:

<ion-content>
  <ion-list>
    <ion-item>
      <login></login>
    </ion-item>
    <ion-item>
      <language-change></language-change>
    </ion-item>
  </ion-list>
</ion-content>

login is loaded by default because the user will have to login always so this component works on the side menu.

language-change is only loaded when I need it and it works on other pages but not here. This is side-menu.module:

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { SideMenuPage } from "./side-menu";
import { LanguageChangeComponentModule } from "../../components/language-change/language-change.module";

@NgModule({
    declarations: [SideMenuPage],
    imports: [
        IonicPageModule.forChild(SideMenuPage),
        LanguageChangeComponentModule
    ],
    exports: [SideMenuPage],
    entryComponents: [SideMenuPage]
})
export class SideMenuPageModule { }

I got the classic

‘language-change’ is not a known element

↧
↧

Related to Qr scanner

November 7, 2018, 10:00 am
↧

Error: Network error randomly on IOS

November 7, 2018, 10:54 am
$
0
0

Hey,

I have the same setup and get the exact same error on iOS only. Did you manage to find a solution for this? :confused:

↧

Bluetooth serial

November 7, 2018, 11:20 am
$
0
0

Hello, i use the plugin bluetooth serial for to send and read the information of my arduino.Actually i can send the information but i can not read the information coming from arduino.I used the method subscribe but i have an error. How used the read ?

↧
↧

Reusable Component for ion-header (and footer) Ionic v4

November 7, 2018, 11:38 am
$
0
0

This is for Ionic v4, although I think it can apply to Ionic v3 as well.

From what I can tell, the recommendation / requirement is that ion-header has to be at the same level as ion-content. Also, ion-toolbar needs to be a child (direct descendant) of ion-header, and things like ion-button and ion-title that use slots also need to be children of ion-toolbar.

This seems prevents you from creating a reusable component for ion-header.

I have many pages that have more or less the same somewhat complex header. For example:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
        *ngIf="shouldShowBackButton"
        class="back-arrow"
        (click)="goBack()"
        text="" icon="arrow-round-back" defaultHref="/">
      </ion-back-button>
      <ng-content select="[header-buttons]">
      </ng-content>
    </ion-buttons>
    <ion-title class="header-title" text-center>
      <ng-content></ng-content>
    </ion-title>
  </ion-toolbar>
</ion-header>

If I create this as its own component template it creates all kinds of issues with the header showing during navigation, among other things. Also even if I do something like <ion-header><header-component> this also doesn’t work since it seems like ion-toolbar needs to be a child of ion-header.

Is there any way to create a reusable component for the Ionic structural components such as the header and footer? Otherwise I’ll more or less have to copy this on many of my pages.

↧

Ionic v4.0.0-final Roadmap / ETA

November 7, 2018, 12:00 pm
↧

Runtime Error Module build failed: Error: ENOENT: no such file or directory,

November 7, 2018, 12:03 pm
↧
Search

Keyboard in ios doesn't type or select the inputs

November 7, 2018, 12:16 pm
$
0
0

the keyboard in ios doesn’t work or display the text I type in the input field
any help, please
my package.json

{
  "name": "Doctory",
  "version": "1.2.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "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/common": "^5.2.11",
    "@angular/compiler": "^5.2.11",
    "@angular/compiler-cli": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@angular/forms": "^5.2.11",
    "@angular/http": "^5.2.11",
    "@angular/platform-browser": "^5.2.11",
    "@angular/platform-browser-dynamic": "^5.2.11",
    "@ionic-native/call-number": "^4.17.0",
    "@ionic-native/core": "^4.17.0",
    "@ionic-native/device": "^4.17.0",
    "@ionic-native/facebook": "^4.17.0",
    "@ionic-native/geolocation": "^4.17.0",
    "@ionic-native/google-analytics": "^4.17.0",
    "@ionic-native/google-maps": "^4.15.1",
    "@ionic-native/keyboard": "^4.17.0",
    "@ionic-native/launch-navigator": "^4.17.0",
    "@ionic-native/onesignal": "^4.17.0",
    "@ionic-native/social-sharing": "^4.17.0",
    "@ionic-native/splash-screen": "^4.17.0",
    "@ionic-native/status-bar": "^4.17.0",
    "@ionic/pro": "^1.1.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/googlemaps": "^3.30.16",
    "call-number": "^1.0.1",
    "cordova-android": "7.1.1",
    "cordova-android-play-services-gradle-release": "^1.4.4",
    "cordova-android-support-gradle-release": "^1.4.5",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-facebook4": "^2.5.0",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-google-analytics": "^1.8.6",
    "cordova-plugin-googlemaps": "^2.4.6",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "cordova-sqlite-storage": "^2.5.1",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^4.13.1",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "minimist": "^1.2.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "onesignal-cordova-plugin": "^2.4.5",
    "platform": "^1.3.5",
    "rxjs": "^5.5.12",
    "sw-toolbox": "^3.6.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.2",
    "xml2js": "^0.4.19",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.0",
    "typescript": "^2.9.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      },
      "mx.ferreyra.callnumber": {},
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "25.+"
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "OKHTTP_VERSION": "3.+",
        "LOCATION_USAGE_DESCRIPTION": "Doctory requires access to your location for navigation purposes"
      },
      "call-number": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-google-analytics": {
        "GMS_VERSION": "11.0.1"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-file-transfer": {},
      "onesignal-cordova-plugin": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}
↧
↧

Ionic Cordova SQLite App for Windows Desktop

November 7, 2018, 12:19 pm
$
0
0

Any news here?
Sadly I’m facing the same problem …

↧

Keyboard in ios doesn't type or select the inputs

November 7, 2018, 12:21 pm
↧

Using trasnlates from object

November 7, 2018, 12:40 pm
$
0
0

The loader is decoupled from the core in ngx-translate, so I would concentrate on finding a loader that does what you want, and maybe writing one if that fails.

↧

*ngFor not show data (async)

November 7, 2018, 12:41 pm
$
0
0

I already did, but Discourse won’t let me say just that.

↧
↧

Ionic 3 cordova android white screen after splash android

November 7, 2018, 1:03 pm
$
0
0

The last week I also, was trying to build a app for android 4.2… Finally I give up… Today I only I’m doing apps for android 4.4 (19)

↧

I finally uploaded my first ionic app in google play!

November 7, 2018, 1:06 pm
$
0
0

Good work man, looks professional…

↧
Search

Google Analytics not showing any data

November 7, 2018, 1:18 pm
$
0
0 
    After building a basic app with two pages (quotes-list and quotes-detail) where clicking a name on the former you edit a text on the latter, run the app on a real device and go through GA, trying to get some statistics about the two tracked pages, but all I can see is nothing. Anyone could help me, please? I'd appreciate it so much...

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
//import { SplashScreen } from '@ionic-native/splash-screen';
//import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { QuotesListPage } from '../pages/quotes-list/quotes-list';
import { QuotesDetailPage } from '../pages/quotes-detail/quotes-detail';

import { HttpModule } from '@angular/http';
import { GoogleAnalytics } from '@ionic-native/google-analytics';


@NgModule({
  declarations: [
    MyApp,
    QuotesListPage,
    QuotesDetailPage
    
  ],
  imports: [
    BrowserModule,
    HttpModule,    
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    QuotesListPage,
    QuotesDetailPage    
  ],
  providers: [
    GoogleAnalytics,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

quotes-list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {QuotesDetailPage} from '../quotes-detail/quotes-detail';
import { GoogleAnalytics } from '@ionic-native/google-analytics';

/**
 * Generated class for the QuotesListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-quotes-list',
  templateUrl: 'quotes-list.html',
})
export class QuotesListPage {

  quotesList = [];
  filteredQuotes = [];
  isfiltered: boolean ;
  
    
  constructor(platform: Platform, private http:Http, public navCtrl: NavController, public navParams: NavParams, public googleanalytics: GoogleAnalytics) {
    this.isfiltered = false;
    this.http.get('quotes.json')
    .map(res => res.json())
    .subscribe(
      data => {
        this.quotesList = data.quotes;
      },
      err => console.log("error is "+err), // error
      () => console.log('read quotes Complete '+ this.quotesList) // complete
    );    
    platform.ready().then(() => {
      googleanalytics.trackView("Quotes List"); 
    });
  }

  ionViewDidLoad() {            
    console.log('ionViewDidLoad QuotesListPage');
  }

  searchQuotes(event) {
    if(event.target.value.length > 2) {
      var filteredJson = this.quotesList.filter(function (row) {
        if(row.author.indexOf(event.target.value) != -1) {
          return true
        } else {
          return false;
        }
      });
      this.isfiltered = true;
      this.filteredQuotes = filteredJson;
    }
  }

  itemTapped(event, quote) {
    console.log(quote);
    this.navCtrl.push(QuotesDetailPage, {
      quote: quote
    });
  }

}

quotes-detail.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { GoogleAnalytics } from '@ionic-native/google-analytics';

/**
 * Generated class for the QuotesDetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-quotes-detail',
  templateUrl: 'quotes-detail.html',
})
export class QuotesDetailPage {

  quoteDetail: {quote:'', author:''};  
  
  constructor(public navCtrl: NavController, public navParams: NavParams, public googleanalytics: GoogleAnalytics) {
   this.quoteDetail = navParams.get('quote');   
   googleanalytics.trackView("Quotes Detail");     
  }

  ionViewDidLoad() {    
    console.log('ionViewDidLoad QuotesDetailPage');
  }

}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
//import { StatusBar } from '@ionic-native/status-bar';
//import { SplashScreen } from '@ionic-native/splash-screen';
import { QuotesListPage } from '../pages/quotes-list/quotes-list';
import { GoogleAnalytics } from '@ionic-native/google-analytics';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = QuotesListPage;
  
  constructor(platform: Platform, googleanalytics: GoogleAnalytics) {
    platform.ready().then(() => {
      googleanalytics.debugMode();      
      googleanalytics.startTrackerWithId("UA-XXXXXXXXX-1");
      googleanalytics.enableUncaughtExceptionReporting(true).then((_success) => {
        console.log("Successful enabling of uncaught exception reporting "+_success)}).catch((_error) => {
          console.log("error occured "+_error)
      });
    });
  }  
  
}
↧

Cant build ionic 3 project whit new xcode 10 and mac mojave

November 7, 2018, 1:25 pm
$
0
0 
 ionic cordova build ios --buildFlag='-UseModernBuildSystem=0'

This works for me

↧
↧

Hide inappbrowser while splashscreen it's loading

November 7, 2018, 1:43 pm
$
0
0

Look at my “app.component.ts”:
https://mega.nz/#!kuJxXYqB!9B9ilPhwOmqkSA4Y49dtcaHB7ZGOX1_bQSe7VxS-gCU
What it does is open the inappbrowser since the application opens, without clicking any button (line 78).

My problem is that Inappbrowser loads up the splash screen, that is, the splash is not shown. Can you tell me the exact code? Please. I’m new with Ionic.

Greetings.

Note: I do not use “pages/home” only “app”. And, I don’t have “autohide” in config.xml.

↧

Hide inappbrowser while splash screen it’s loading

November 7, 2018, 2:04 pm
$
0
0

Hello.

My problem is that Inappbrowser loads up the splash screen, that is, the splash screen is not shown.

Look at my “app.component.ts”:
https://mega.nz/#!kuJxXYqB!9B9ilPhwOmqkSA4Y49dtcaHB7ZGOX1_bQSe7VxS-gCU
What it does is open the inappbrowser since the application opens, without clicking any button (line 78).

I do not use “pages/home” only “app”. And, I don’t have “autohide” in config.xml.

Greetings.

↧

Button in SearchBar [RESOLVED]

November 7, 2018, 2:46 pm
$
0
0

any updates on this?

↧
Viewing all 230983 articles
Browse latest View live
Search