A generator for Ionic Apps that uses Angular Schematics
Goals
- A standardised Ionic project structure aligned with the Angular style guide’s:
├── <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
-
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.
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 |
See: