Project Types

The Ionic CLI works with a variety of Ionic project types. The type of a project is stored in the project’s ionic.config.json file as type. Here is a list of project type values:

  • ionic-angular: Ionic Angular
  • ionic1: Ionic 1
  • custom: The CLI will not invoke anything for build or serve. See Hooks to use ionic build and ionic serve with your own build process.

Ionic Angular

Ionic Angular (ionic-angular) uses Angular 5 and @ionic/app-scripts for tooling.

You can start a new Ionic Angular app with the following command:

$ ionic start --type=ionic-angular

See Starter Templates for a list of starters for Ionic Angular.

Ionic Angular apps are written in TypeScript and Sass and are compiled and built with @ionic/app-scripts, which is a configurable build system optimized for Ionic Angular.

ionic build and ionic serve use @ionic/app-scripts out of the box, so it doesn’t need to be invoked directly. It also ships with good defaults, but can be configured in a variety of ways. See README.md for configuration details.

Project Structure

project/
├─ ionic.config.json # Ionic project config file
├─ package.json
├─ src/
│  ├─ app/
│  │  ├─ app.component.ts # root component for your app
│  │  ├─ app.html # app component template
│  │  ├─ app.module.ts # NgModule for app component
│  │  ├─ app.scss # global SCSS
│  │  └─ main.ts # bootstrap file
│  ├─ assets/ # put your images, etc. here
│  ├─ pages/ # contains the page components for your app
│  ├─ theme/
│  │  └─ variables.scss # see https://ionicframework.com/docs/theming
│  └─ index.html # main html file
└─ www/ # build output directory

Ionic 1

Ionic 1 (ionic-v1) uses AngularJS.

You can start a new Ionic 1 app with the following command:

$ ionic start --type=ionic1

See Starter Templates for a list of starters for Ionic 1.

Out of the box, Ionic 1 apps have no build process. www/index.html includes the www/css/style.css file and the three provided JS files withing www/js/.

Project Structure

project/
├─ bower.json
├─ gulpfile.js
├─ ionic.config.json # Ionic project config file
├─ package.json
├─ scss/
│  └─ ionic.app.scss # enable sass to use
└─ www/
   ├─ css/
   │  └─ style.css # vanilla CSS source file
   ├─ js/
   │  ├─ app.js # bootstrap file, contains `.config()`
   │  ├─ controllers.js # https://docs.angularjs.org/guide/controller
   │  └─ services.js # https://docs.angularjs.org/guide/services
   ├─ templates/ # AngularJS templates
   └─ index.html # main html file

Enabling Sass

You can use Sass by changing which CSS file www/index.html uses (css/style.css is the default, css/ionic.app.css is generated and includes both Ionic styles and your app’s styles).

The main Sass source file is located at scss/ionic.app.scss.

If your gulpfile.js contains the sass task, the CLI will run it automatically during the ionic build and ionic serve commands.

API

Native

General