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

First Launch Modal

$
0
0

@jeff3597 wrote:

Hi,

I was wondering if it was possible to have a modal open after the first launch of an application. I would like to use it as a terms and conditions type of thing. I was not able to find what I was looking for when doing some research.

Thanks!

Posts: 1

Participants: 1

Read full topic


Ionic cordova build/run android FAIL

$
0
0

@belcsantiago wrote:

Someone knows what happen, please?

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ‘:mergeDebugResources’.

Error: Failed to crunch file C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\expl
oded-aar\com.google.android.gms\play-services-base\11.6.0\res\drawable-xxhdpi-v4\common_google_signin_btn_icon_light_normal_background.9
.png into C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\res\merged\debug\drawable
-xxhdpi-v4\common_google_signin_btn_icon_light_normal_background.9.png

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    Error: Failed to crunch file C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\explod
    ed-aar\com.google.android.gms\play-services-base\11.6.0\res\drawable-xxhdpi-v4\common_google_signin_btn_icon_light_normal_background.9.p
    ng into C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\res\merged\debug\drawable-x
    xhdpi-v4\common_google_signin_btn_icon_light_normal_background.9.png
    :mergeDebugResources FAILED

BUILD FAILED

Total time: 19.68 secs
Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ‘:mergeDebugResources’.

Error: Failed to crunch file C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\expl
oded-aar\com.google.android.gms\play-services-base\11.6.0\res\drawable-xxhdpi-v4\common_google_signin_btn_icon_light_normal_background.9
.png into C:\Users\mariasantiago\Documents\Ana InovaUFRPE\SocialSecurity\platforms\android\build\intermediates\res\merged\debug\drawable
-xxhdpi-v4\common_google_signin_btn_icon_light_normal_background.9.png

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

[ERROR] An error occurred while running cordova build android (exit code 1).

Posts: 1

Participants: 1

Read full topic

AWS CodeBuild?

$
0
0

@ComanDante wrote:

Anyone gotten build to work in CodeBuild? Maybe an example buildspec?

I’ve gotten through a few hurdles but now getting an error that rxjs lib missing but I am installing it.

Posts: 1

Participants: 1

Read full topic

Access native Ionic function within jQuery

$
0
0

@philipdring wrote:

Hi,

I am using Wayfinding (https://github.com/ucdavis/wayfinding) in my mobile app and would like to trigger an Ionic modal when the user clicks on one of the rooms. At the moment, there is a simple alert:

$('#Rooms a', el).click(function (event) {

event.preventDefault();

alert('You have clicked on room ' + $(this).prop('id'));

});

However I would like to use this.presentModal() which references a simple function outside the jQuery code:

presentModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
$('#Rooms a', el).click(function (event) {

event.preventDefault();

this.presentModal();

});

In this case, “this” isn’t the right way to access the presentModal() function. Does anyone know what is?

Thanks!

Posts: 1

Participants: 1

Read full topic

How to add a custom task to ionic-webpack?

Undefined When Navigating Back From iFrame

$
0
0

@PizzaStick wrote:

I have a requirement to load a webpage in my app and I have created a page with an iFrame that dynamically loads a URL from an API.

I can navigate to this page fine, and if I don’t click any link within the loaded webpage in the iFrame I can navigate back fine. If I click a link on the website, then hit the ionic back button, I get “Cannot GET /undefined”.

On the page that I am navigating back to, I am pulling the category buttons from an API as well.

Does anyone know why this might be happening?

Thanks a lot

Posts: 1

Participants: 1

Read full topic

Error: Type LogoutPage es parte de las declaraciones de 2 módulos: ¡AppModule y LogoutPageModule! Considere mover LogoutPage a un módulo superior que importe AppModule y LogoutPageModule

Custom component in ion-navbar

$
0
0

@Mic75 wrote:

Hi,

I 'd like to add a custom component into an ion-navbar. The component is using this template:

<ion-buttons end>
  <button ion-button (click)="toggleLang()">{{lang | uppercase}}</button>
</ion-buttons>

When adding my component in an ion-navbar, it is misaligned, like shows the following screenshot:

The component is called mc-lang-switcher, and is integrated this way in the ion-navbar:

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <mc-lang-switcher></mc-lang-switcher>
  </ion-navbar>

If I am adding the component’s template directly in the ion-navbar, I have the expected alignment though:

<ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MTL Metro Codes</ion-title>
    <ion-buttons end>
      <button ion-button (click)="toggleLang()">EN</button>
    </ion-buttons>
  </ion-navbar>

What would be the best approach to make this work ?

Posts: 2

Participants: 2

Read full topic


Tff font distorting on android devices but not ios

$
0
0

@Adam1234 wrote:

I’m using a custom tff font in my app and it seems to destort the text on androids but not ios.
Here is the ios outcome:

And here is the android outcome:

As you can see the bottom of the text is cut out in the second photo.

here is the tff font code:

@font-face {
    font-family: "Nunito-med";
    src: url("../assets/fonts/Nunito-Medium.ttf") format("ttf");
}

and here is the css code:

.popover-type-button {
    color: black;
    font-family: "Nunito-med";
    text-align: center;
}

Placing padding or margins on the bottom of the text dont work.

please help.
Thank you

Posts: 1

Participants: 1

Read full topic

Web page and mobile app using the same code

$
0
0

@loki9182 wrote:

I’m curious to know if anyone has had experience building a web page and mobile app using the same code base. By this I mean building an adaptive UI where you can compile it as an Android/iOS App but also able to build is as a web page. What approach and method did you use? Any recommendations?

I’ve read the following page: https://ionicframework.com/docs/developer-resources/desktop-support/ and understand that you can enable/disable calls to native APIs based on the condition if(this.platform.is(‘cordova’)) but I’m more interested in how to build the app as a production web page. Can it be compiled AOT just like a pure Angular project? Any input on your experience is welcome.

Posts: 1

Participants: 1

Read full topic

Tabs Disappearing After Navigating Away (Side Menu + Tabs)

$
0
0

@eferrer23 wrote:

I have an app that uses a side menu and tabs based off the Ionic Conference App. The app works as expected at the start and the tabs and side menu are both shown but when you go to a non-tabs page and then back to a tabs page via the side menu the tabs disappear. Here’s my relevant. Any one have any ideas why this may not be working as expected? :x

export class MyApp {


  // Reference to the app's root nav
  @ViewChild(Nav) nav: Nav;

  rootPage: any;


  pages: PageInterface[] = [
    { title: 'Applications', pageName: 'HomePage',  index: 0, icon: 'home' },
    { title: 'New Entries ', pageName: 'JobEntryPage',  index: 1, icon: 'map' },

    { title: 'Statistics', pageName: 'StatisticsPage', index: 2, icon: 'stats'},

  ];

  socialPages: PageInterface[] = [

    { title: 'Company List', pageName: 'CompaniesPage', component: 'CompaniesPage', icon: 'log-out'}



  ];

  accountPages: PageInterface[] = [
    { title: 'Profile', pageName: 'ProfilePage', component: 'ProfilePage', icon: 'person' },

    { title: 'Logout', pageName: 'LogoutPage', component: 'LogoutPage', icon: 'log-out'}



  ];

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
                private afAuth: AngularFireAuth, public fb: FirebaseProvider,
              public menu: MenuController) {

    this.initializeApp();

    this.afAuth.authState.subscribe(auth => {
      if(!auth)
        this.rootPage = 'LoginPage';
      else
        this.rootPage = 'TabsPage';
    });


  }

  initializeApp() {
    this.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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }


  openPage(page: PageInterface) {
    let params = {};

        // the nav component was found using @ViewChild(Nav)
        // setRoot on the nav to remove previous pages and only have this page
        // we wouldn't want the back button to show in this scenario
        if (page.index) {
          params = { tabIndex: page.index };
        }

        // If we are already on tabs just change the selected tab
        // don't setRoot again, this maintains the history stack of the
        // tabs even if changing them from the menu
        if (this.nav.getActiveChildNavs().length && page.index != undefined) {
          this.nav.getActiveChildNavs()[0].select(page.index);
          // Set the root of the nav with params if it's a tab index
        } else {
          console.log(page.pageName)
          this.nav.setRoot(page.pageName, params).catch((err: any) => {
            console.log(`Didn't set nav root: ${err}`);
          });
  }
}

  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNavs()[0];

    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
    return;
  }
}

Posts: 1

Participants: 1

Read full topic

Missing gradle stuff in the platform/android folder

$
0
0

@hosagot wrote:

Hi,

When I run the command ionic cordova emulate android command, i get the following error :

> cordova emulate android
ANDROID_HOME=~/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home
Error: spawn EACCES

[ERROR] An error occurred while running cordova emulate android (exit code 1).

So I compared the platform/android folder with one of the projects that works and I notice it is missing .gradle, gradle, gradlew and gradlew.bat

Any idea as to why those are missing? If I copy those over, it works … but only on an emulator running Nougat.

I had an error

Error: Cannot read property 'replace' of undefined

When the emulator was running Oreo …

Thanks

Posts: 1

Participants: 1

Read full topic

Reduce apk size

I want to find nearby location

$
0
0

@flycoders_sourav wrote:

Hi Guys,
I want to do that.when user click on a button then going to the next page and showing the near by location to the user.but i’m try like this but not working properly.

Home.html

<ion-content padding>
  <button (click)="bank($event)" id="bank" value="bank" ion-button color="secondary">Hospital</button>
</ion-content>

Home.ts

bank(event) {

  this.isType = event.target.value;
  alert(this.isType);


	this.navCtrl.push(MapPage,{
         isType:this.isType
  })
}

Below my map.html

<ion-content padding>
  <div #map id="map"></div>
</ion-content>

map.ts


export class MapPage {

  @ViewChild('map')
  mapElement: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  isKM:any=500;
  isType:any="";

  constructor(public navCtrl: NavController,private ngZone: NgZone, private geolocation : Geolocation,public navParams: NavParams) {

            this.isType= navParams.get('isType');
  }

  ionViewDidLoad() {
    this.loadMap()
  }
ionViewWillEnter(){
 //this.nearbyPlace();
}
  loadMap(){
    this.geolocation.getCurrentPosition().then((position) => {
      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     //alert(this.latLng)
      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
      //this.nearbyPlace();
      this.showMyLocation();
      this.nearbyPlace();
    }, (err) => {
      alert('err '+err);
    });
  }
  showMyLocation(){
    let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: this.map.getCenter()
    });
    let markerInfo = "<h4>You are here!</h4>";

    let infoModal = new google.maps.InfoWindow({
        content: markerInfo
    });

    google.maps.event.addListener(marker, 'click', () => {
        infoModal.open(this.map, marker);
    });
}
 /*-----------------Find Nearby Place------------------------*/
nearbyPlace() {

  //alert(this.LatLng)
    alert(this.isKM);
    alert(this.isType);
    this.loadMap();
    this.markers = [];
    let service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch({
              location: this.latLng,
              radius: this.isKM,
              types: [this.isType]
            }, (results, status) => {
                this.callback(results, status);
            });
  }
  callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        this.createMarker(results[i]);
      }
    }
  }
  createMarker(place){
    var placeLoc = place;
    console.log('placeLoc',placeLoc)
    this.markers = new google.maps.Marker({
        map: this.map,
        position: place.geometry.location
    });

    let infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(this.markers, 'click', () => {
      this.ngZone.run(() => {
        infowindow.setContent(place.name);
        infowindow.open(this.map, this.markers);
      });
    });
  }



}

just showing the current location. not showing nearby location. how can i fix.please helpme anyone .

Posts: 1

Participants: 1

Read full topic

Building Ionic Web App to Production

$
0
0

@jetav8r99 wrote:

I used to use this command to build my app for production:

ionic cordova build browser --prod

This no longer works with the new app scripts for building. If I do use that I get an error that says browser isn’t a supported variable

Tried to used the new app scripts build, but get a bunch of tslint errors which aren’t actually errors. Is there a way to either bypass the tslint errors when making a production build, or can anyone help me with this?

Thank you!

Posts: 2

Participants: 2

Read full topic


How to know if user clicks outside of a specific div in ionic2?

$
0
0

@saty932 wrote:

                           <ion-row *ngIf="!favouritesorshare" >
								<ion-col col-8 >
									<p (click)="addToFavourites(item)">
										&nbsp;&nbsp;&nbsp;&nbsp;
										<i class="fa fa-star-o" style="font-size:15px;" [style.color]="favouriteButtonColor" aria-hidden="true"></i>
										&nbsp;&nbsp;
										<span [style.color]="favouriteButtonColor" class="favorites" >Add to Favourites</span>
									</p>
								</ion-col>
							</ion-row>
							<ion-row *ngIf="favouritesorshare" class="socialcolumn socialcol">
								<ion-col col-12  >
									<ion-segment [(ngModel)]="icons" >
										<ion-segment-button value="facebook">
											<i class="fa fa-facebook-square fashare" style="color: #3b5998;" aria-hidden="true"></i>
										</ion-segment-button>
										<ion-segment-button value="googleplus">
											<i class="fa fa-google-plus-square fashare" style="color: #d34836;" aria-hidden="true"></i>
										</ion-segment-button>
										<ion-segment-button value="whatsapp">
											<i class="fa fa-whatsapp fashare" style="color: #075e54;" aria-hidden="false"></i>
										</ion-segment-button>
										<ion-segment-button value="twitter">
											<i class="fa fa-twitter-square fashare" style="color: #0084b4;" aria-hidden="true"></i>
										</ion-segment-button>
										<ion-segment-button value="instagram">
											<i class="fa fa-instagram fashare" style="color:#fb3958;
											"  aria-hidden="true"></i>
										</ion-segment-button>
										<ion-segment-button value="email">
											<i class="fa fa-envelope fashare" style="color: black;" aria-hidden="true"></i>
										</ion-segment-button>
										<ion-segment-button value="linkedin">
											<i class="fa fa-linkedin fashare" style="color: blue;" aria-hidden="true"></i>
										</ion-segment-button>
									</ion-segment>
								</ion-col>
							</ion-row>

right now based favouritesorshare property i am showing different divs but i want to know if user clicks out side of second div.because i need to show first div instead of second one?

Posts: 1

Participants: 1

Read full topic

Field 'browser' doesn't contain a valid alias configuration - on ionic build

$
0
0

@charlesskariah wrote:

On running ionic cordova build android --prod --release I am getting the following error.Commands in dev mode are working fine without any issues.

Error: ./src/app/main.ts
Module not found: Error: Can’t resolve ‘./app.module.ngfactory’ in '/home/charlesskariah/wl/tug-frontend/src/app’
resolve ‘./app.module.ngfactory’ in '/home/charlesskariah/wl/tug-frontend/src/app’
using description file: /home/charlesskariah/wl/tug-frontend/package.json (relative path: ./src/app)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /home/charlesskariah/wl/tug-frontend/package.json (relative path: ./src/app)
using description file: /home/charlesskariah/wl/tug-frontend/package.json (relative path: ./src/app/app.module.ngfactory)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/home/charlesskariah/wl/tug-frontend/src/app/app.module.ngfactory doesn’t exist
.ts

cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

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

System:

Android SDK Tools : 26.1.1
Node              : v8.2.1
npm               : 5.3.0
OS                : Linux 4.4

Environment Variables:

ANDROID_HOME : /home/charlesskariah/Android/Sdk

Misc:

backend : pro

Posts: 2

Participants: 2

Read full topic

Ionic 3.18.0 - App crashes When uploading Picture

$
0
0

@jmmaguigz wrote:

Hello Everyone, i have an iframe of my site and almost all things works smoothly excluding the uploading part, when i try to upload image the app crashes/stopped. I’m using dropzone in uploading picture in my site. I’ve build the app and tested it in my Grand Prime. Is there any workaround for this?
Your help is much appreaciated.

Thanks,
JM

Posts: 1

Participants: 1

Read full topic

iPhone X via Xcode 8, layout problems

$
0
0

@vaistardom wrote:

Hello, We have been struggling to resolve this issue in a project using Xcode 8.x… unsuccessfully. Now, I am simply trying out these solutions on a bare and fresh project in the latest Xcode 9.x. I am unable to get rid of the black bars.

The white bars have disappeared, but the black remain. Many days have been spent already trying to make our ionic app fit an iPhone x. Can somebody help?

I have tried modifying the cordova-plugin-splashscreen so it detects an iPhone X screen, but it keeps on detecting the 667 height, iPhone 6.

On my simple cordova starter project, the viewport mod does not seems to work as you can see in this attached image.

I can send you the example project, it is tiny as it is simply the hello world Xcode 9 project from the cordova instructions.

Posts: 12

Participants: 3

Read full topic

Fiebase phone authenication ionic3 platform android error

$
0
0

@ashokr wrote:

de: “auth/operation-not-supported-in-this-environment”, message: “RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment.”}
code
:
"auth/operation-not-supported-in-this-environment"
message
:
"RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment."
proto
:
Error

Posts: 1

Participants: 1

Read full topic

Viewing all 49109 articles
Browse latest View live


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