Iniciar Ionic 3 y Angular 4, tutorial paso a paso

Antes de comenzar, debemos tener instalado Node.js, en su sitio web podemos encontrar su archivo, instrucciones de descarga e instalación.

Ya una vez instalado Node.js, nos disponemos a instalar Ionic, para ello abrimos nuestra terminal y escribimos el comando sudo npm install -g cordova ionic 

A continuación creamos nuestro proyecto de Ionic, así que elegiremos un nombre al gusto. Para este caso yo elegiré "ionicProject". En la terminal escribimos ionic start ionicProject blank , aunque si estás usando el último Ionic CLI, escribe ionic start ionicProject blank --type ionic-angular 

Ya creado nuestro proyecto de Ionic, entramos a la carpeta del proyecto con cd ionicProject


Ya una vez  hecho esto, modificaremos algunos archivos predeterminados para implementar páginas de carga lenta. Abrimos "src / app / app.module.ts" y eliminamos las importaciones, NgModule-declaration y NgModule-entryComponents de la página Home. Por lo tanto, este archivo debe verse así:

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';

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

Después agregamos un archivo, llamado module.ts, con dirección en 'src/pages/home/home.module.ts'.

Se puede hacer fácil y directamente en la consola, con el comando touch
El comando completo sería: touch src/pages/home/home.module.ts

Bien,  nos situamos en el archivo que acabamos de crear (module.ts) y lo editamos de tal manera que luzca así:

import { NgModule } from '@angular/core';
import { HomePage} from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)],
  entryComponents: [HomePage]
})
export class HomePageModule { }

Ahora, nos situamos en home.ts, que se ubica en 'src/pages/home/home.ts' y ahí agregamos este import:

import { IonicPage } from 'ionic-angular';

Ahí mismo, (en home.ts) agregamos la siguiente anotación: @IonicPage()

Ojo, tiene que ir antes de la anotación @Component, y quedaría así:

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})


A continuación, abrimos app.component.ts, situado en 'src / app / app.component.ts' y  eliminamos la importación de HomePage y cambiamos la referencia al componente HomePage para que sea 'HomePage'.

Una vez concluido este paso, luciría de la siguiente manera:

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: string = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

El último paso hasta aquí, es correr nuestra app. Esto lo hacemos con el comando

ionic serve -l

Ahora deberíamos ver corriendo la app en nuestro navegador, veríamos algo como:

Y ya tenemos nuestra app.
Fuente: https://www.djamware.com/post/58f4da2080aca7414e78a638/step-by-step-tutorial-of-ionic-3-angular-4-and-google-maps-directions-service