Building a cross-platform app with Apache Cordova, Ionic 3, AngularFire 2, Angular 4 and Google Firebase

After reading about 50234 different tutorials, I decided to write down the steps for a development environment on Ubuntu 16.

Install node.js. Minimum version 6. Here for Ubuntu.

The first two commands to reset/cleanup your global installation. Also make sure, there is no old binary in /usr/local/bin/.

$ sudo aptitude purge nodejs
$ sudo rm -r /usr/lib/node_modules
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo aptitude install nodejs

Also install the SDKs for your target platforms. Android or iOS.

Install the needed packages (-g for global installation).
$ sudo npm install -g ionic@latest cordova typescript typings

Your system should look anything like this:

$ ionic info
Your system information:
Cordova CLI: 7.0.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.3
Xcode version: Not installed

Create a new Ionic project. This will also create the project folder.
$ ionic start hybridapp blank --v2

where hybridapp is the name of the app and blank is a starter template layout (See $ ionic start –list for more examples). –v2 is needed to build the newest ionic version. Change into the project folder. This is your home now.

Install the needed npm packages (inside your project folder).

$ npm install firebase angularfire2 –save

Following this guide, I edited the package.json file. Not needed when using the correct ionic cli version.

Go to https://firebase.google.com/ and create an account. Create a new project and select „Add Firebase to your web app“. Edit the file src/app/app.module.ts and add your details.


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { AngularFireModule } from 'angularfire2';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

export const firebaseConfig = {
apiKey: "your api key",
authDomain: "your domain",
databaseURL: "your url",
storageBucket: "your id",
messagingSenderId: "your id"
};

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Try starting the setup with

$ npm run ionic:serve

If everything works, backup your files, commit to your git so you have a working base installation.

You can now start developing. Have fun.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.