@ionic-angular/schematics


Table of Contents

* Goals
* Installation
* Generating a new Project
* Generating Components, Directives, Modules, Pages, Pipes and Services

Goals

- A standardised Ionic project structure aligned with the Angular style guide's:
- [X] Overall structural guidelines
- [X] Folders-by-feature structure
- [X] App Module
- [X] Core Feature Module
- [X] Shared Feature Module

``
├──
└── /src
└── /app - App Module
├── app.component.ts
├── app.html
├── app.module.ts
├── app.scss
├── main.ts
└── /core - Core Feature Module (e.g., Singleton Services/Providers)
├── core.module.ts
├── module-import-guard.ts
└── /logger
├── console-logger.service.ts
├── logger.service.ts
└── /pages - Page (Component) Modules
└── /home
├── home.page.html
├── home.page.module.ts
├── home.page.scss
├── home.page.spec.ts
├── home.page.ts
└── /shared - Shared Feature Module (shared Components, Directives and Pipes)
├── shared.module.ts
└── /assets
└── /environments - Environment specific configuration
├── environment.dev.ts
├── environment.ts
└── /theme
├── facebook-messenger-theme.scss
├── gradient-mixins.scss
├── gradient.scss
├── green-and-blue-theme.scss
├── variables.scss
├── index.html
├── manifest.json
├── service-worker.js
└── /config - Webpack Configuration
├── webpack.config.json
└── /e2e - E2E Test Configuration
├── app.e2e-spec.ts
├── app.po.ts
├── tsconfig.e2e.json
└── /resources - Default Resources (e.g., Icon and Splash)
└── /www - Ionic's 'dist' directory
└── /assets
└── /build
├── index.html
├── manifest.json
├── service-worker.js
├── .editorconfig
├── .gitignore
├── config.xml
├── ionic.config.json
├── karma.conf.json
├── package.json
├── protractor.conf.json
├── README.md
├── tsconfig.json
├── tsconfig.ng-cli.json
├── tslint.json
`

- Code scaffolding
- [X] Application
- [X] Component
- [X] Directive
- [X] Enum
- [X] Interface
- [X] Module
- [X] Page
- [X] Pipe
- [X] Service
- [X] Aliases
- [X] Environment specific configuration
- [X] Dynamic Themes
- [X] Logging
- [X] Unit and E2E Testing
- [X] Baked in best practices that have been discovered by the community over time

Note: See this post re Shared Feature Module (Shared Common Modules) v Encapsulated Modules.

Installation

$3

Install Schematics globally using npm:

`bash
npm install -g @angular-devkit/core
npm install -g @angular-devkit/schematics
npm install -g @schematics/schematics
npm install -g rxjs
`

Install the Angular CLI globally using npm:
`bash
npm install -g @angular/cli
`

$3

#### Globally

To install @ionic-angular/schematics globally using npm:

`bash
npm install -g @ionic-angular/schematics
`

To set @ionic-angular/schematics as the default collection:

`bash
ng set defaults.schematics.collection @ionic-angular/schematics --global
`

To reset the default collection:

`bash
ng set defaults.schematics.collection @schematics/angular --global
`

Note: There is currently an issue with Schematics use of require.resolve() however there is a known workaround:

`bash
cd /usr/local/lib/node_modules/@angular/cli/node_modules
mkdir @ionic-angular
cp -R /usr/local/lib/node_modules/@ionic-angular/* @ionic-angular/
`

#### Locally

To add @ionic-angular/schematics to a project using npm:

`bash
npm install @ionic-angular/schematics@latest --save-dev
`

You also need to add the Angular CLI to your project's devDependencies:

`bash
npm install @angular/cli@latest --save-dev
`

The set @ionic-angular/schematics as the default collection update your project's .angular-cli.json:

`json
"defaults": {
"schematics": {
"collection": "@ionic-angular/schematics"
}
}
`

$3



You can use the ng new command to generate a new Ionic project:

`bash
ng new --collection=@ionic-angular/schematics my-app
cd my-app
ionic serve
`

If you have set @ionic-angular/schematics as the default collection:

`bash
ng new my-app
cd my-app
ionic serve
`

You can also use the Schematics CLI to generate a new Ionic project:

`bash
schematics @ionic-angular/schematics:application --directory my-app --name MyApp
cd my-app
npm install
ionic serve
`

$3

You can use the ng generate (or just ng g) command to generate Ionic pages:

`bash
ng generate page --collection=@ionic-angular/schematics pages/my-page --skip-import
ng g page --collection=@ionic-angular/schematics pages/my-page --skip-import # using the alias
ng g page pages/my-page --skip-import # if @ionic-angular/schematics is the default collection
`

Note: Pages are lazy loaded by default.

You can also use the Schematics CLI to generate Ionic pages:

`bash
schematics @ionic-angular/schematics:page --name my-page
`

Sample page:





You can find all possible blueprints in the table below:

Scaffold | Usage
--- | ---
Component | ng g component my-new-component --spec
Directive | ng g directive my-new-directive --spec
Enum | ng g enum my-new-enum
Interface | ng g interface my-new-interface
Module | ng g module my-new-module --spec
Page | ng g page pages/my-new-page --skip-import
Pipe | ng g pipe my-new-pipe --spec
Service | ng g service my-new-service --spec`

Resources

Blog Posts

* The Future of the Ionic CLI

Angular

* Angular docs: Angular Style Guide
* GitHub: Angular CLI
* GitHub: Angular CLI Stories

Ionic

* Ionic docs: Ionic CLI
* Ionic docs: Ionic Starters
* Ionic docs: ionic generate
* Ionic docs: Configuring Ionic
* Ionic blog: Ionic and Lazy Loading - Part 1
* Ionic blog: Ionic and Lazy Loading - Part 2
* Ionic: Progressive Web Apps

npm

* npm docs: How to Create Node.js Modules
* npm docs: How to Publish a Package
* npm docs: Verdaccio - A lightweight private npm proxy registry