@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:

ng new my-app
cd my-app 
ionic serve

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

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