Posts

Showing posts from November, 2016

Combine an ion-tabs with an ion-nav in Ionic 2

If you'd like to present a tabular login flow during the user's sign up and log in phase and a tabbed application flow for the day-to-day use of your app, you can use Angular 2's templating functionality to provide multiple view layouts in your root component (app.html): In the above code snippet, we have a menu and tabs layout if the user is logged in and a navigation controller if a user is not. For the above to work, we need to   import { User, Auth } from '@ionic/cloud-angular'; ... and make instances of these providers available to our template, e.g. through our constructor:   constructor(     public user: User,     public auth: Auth   ) Controlling the tabs In the app I'm currently working on, some menu options activates a certain tabs, whereas other menu options open a page in a modal view. To control the tabs, I    import { Component, ViewChild } from '@angular/core';   import { Platform, MenuController,

Error: No component factory found for ... Angular 2 / Ionic 2

The error EXCEPTION: Uncaught (in promise): Error: No component factory found for YourPageHere   in Ionic 2 RC1 most likely mean that you have forgotten to declare your newly created page inside your app.module:     ...     import { LoggedInPage } from '../pages/logged-in/logged-in';     ...     @NgModule({         ...         declarations: [             ...             LoggedInPage         ],         ...         entryComponents: [             ...             LoggedInPage         ],         ...     })

Missing ionicons in Ionic 2 RC1

If your Ionicons are not showing up in your Ionic 2 app (after you've recently upgraded the ionic runtime, for example), it might be because they are no longer linked with your distribution. Here's how you can go ahead and fix that: Pre-requisite: npm install ionicons In your copy.config.js , ensure that you copy the ionicon fonts from your node modules:     ...     {       src: 'node_modules/ionicons/dist/fonts/',       dest: '{{WWW}}/fonts/'     }     ... In your src/app/app.core.scss , make sure that you include ionicon's sass:     @import "../../node_modules/ionicons/dist/scss/ionicons"; With those two changes, you should be back in the game!