A generator for Ionic Apps, Components, Directives, Modules, Pages, Pipes and Services

A generator for Ionic Apps that uses Angular Schematics


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

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, Directives, Modules, Pages, Pipes and Services

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

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


1 Like

Perhaps you could explain the advantages of using the Angular Schematics over the Ionic layout.

What does for example “home.page.spec.ts” do?

Tests written in Jasmine are called specs. The filename extension must be .spec.ts, the convention adhered to by karma.conf.js and other testing tools.

See: https://robferguson.org/blog/2017/11/28/testing-your-ionic-3-app/

@ionic-angular/schematics provides a standardised project structure aligned with Angular’s style guide. The Angular style guide presents preferred conventions and, as importantly, explains why:


Thanks @robinyo it will be interesting to see what Ionic approach will be with Ionic 4 - will it include a testing system?