@ionic-angular/schematics

Schematics for Ionic Angular

Stats

StarsIssuesVersionUpdatedCreatedSize
@ionic-angular/schematics
3301.1.44 years ago4 years agoMinified + gzip package size for @ionic-angular/schematics in KB

Readme

@ionic-angular/schematics

MIT license

Table of Contents

Goals

    ├── <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             

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

Angular

Ionic

npm

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.