Scaffolding

Once an app is created by the Ionic CLI, the next step is to start building out features and components. The majority of the app will be developed in the src/app/ directory.

Project Structure

src/
├── app/
├── assets/
├── environments/
├── theme/
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

The src/ directory has items such as the index.html file, configuration files for tests, an asset folder for images, and the main app/ directory for the app's code.

src/
└── app/
    ├── app-routing.module.ts
    ├── app.component.html
    ├── app.component.spec.ts
    ├── app.component.ts
    └── app.module.ts

The src/app/ directory contains the root app component and module as well as additional directories that contain app features such as pages, components, services, etc.

Generating New Features

The Ionic CLI can generate new app features with the ionic generate command. By running ionic generate in the command line, a selection prompt is displayed which lists the available features that can be generated.

$ ionic generate
? What would you like to generate?
❯ page
  component
  service
  module
  class
  directive
  guard

After a selection is made, the Ionic CLI will prompt for a name. The name can be a path, allowing easy generation of features within an organized project structure.

note

Any level of nesting is allowed, such as portfolio/intro. You can easily scope components to pages by using ionic g component "portfolio/intro/About Me", for example.

$ ionic generate
? What would you like to generate? page
? Name/path of page: portfolio █

Alternatively, the type and name of the generated feature can be entered on the command line:

$ ionic g page "User Detail"
> ng generate page "User Detail"
CREATE src/app/user-detail/user-detail.module.ts (564 bytes)
CREATE src/app/user-detail/user-detail.page.scss (0 bytes)
CREATE src/app/user-detail/user-detail.page.html (138 bytes)
CREATE src/app/user-detail/user-detail.page.spec.ts (720 bytes)
CREATE src/app/user-detail/user-detail.page.ts (280 bytes)
UPDATE src/app/app-routing.module.ts (475 bytes)
[OK] Generated page!

The Ionic CLI uses the underlying framework tooling to stay close to best practices. For @ionic/angular, the Angular CLI is used under the hood.

After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving.

For more details, run ionic g --help from the command line or see the documentation for ionic generate.