@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

├── <PROJECT_ROOT>
    └── /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

Prerequisites

Install Schematics globally using npm:

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:

npm install -g @angular/cli

Install @ionic-angular/schematics

Globally

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

npm install -g @ionic-angular/schematics

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

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

To reset the default collection:

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:

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:

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

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

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

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

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

Generating a new project

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

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

Generating Components

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

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:

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