guide file structure

Table of Contents

• File Structure
  • Top-level
  • Feature Modules
  • Components Layer

File Structure

Top-level

The top-level file structure is defined by Angular CLI. You might put this "top-level file structure" into a sub-directory to facilitate your build, but this is not relevant for this guide. So the applications file structure relevant to this guide is the folder /src/app inside the part managed by Angular CLI.

Listing 1. Top-level file structure shows feature modules

    /src
    └── /app
        ├── /account-management
        ├── /billing
        ├── /booking
        ├── /core
        ├── /shared
        ├── /status
        |
        ├── app.module.ts
        ├── app.component.spec.ts
        ├── app.component.ts
        └── app.routing-module.ts

Besides the definition of app module the app folder has feature modules on top-level. The special modules shared and core are present as well.

Feature Modules

A feature module contains the modules definition and two folders representing both layers.

Listing 2. Feature module file structure has both layers

    /src
    └── /app
        └── /account-management
            ├── /components
            ├── /services
            |
            ├── account-management.module.ts
            ├── account-management.component.spec.ts
            ├── account-management.component.ts
            └── account-management.routing-module.ts

Additionally an entry component is possible. This would be the case in lazy loading scenarios. So account-management.component.ts would be only present if account-management is lazy loaded. Otherwise, the module’s routes would be defined Component-less (see vsavkin blog post).

Components Layer

The component layer reflects the distinction between Smart Components and Dumb Components.

Listing 3. Components layer file structure shows Smart Components on top-level

    /src
    └── /app
        └── /account-management
            └── /components
                ├── /account-overview
                ├── /confirm-modal
                ├── /create-account
                ├── /forgot-password
                └── /shared

Every folder inside the /components folder represents a smart component. The only exception is /shared. /shared contains Dumb Components shared across Smart Components inside the components layer.

Listing 4. Smart components contain Dumb components

    /src
    └── /app
        └── /account-management
            └── /components
                └── /account-overview
                    ├── /user-info-panel
                    |   ├── /address-tab
                    |   ├── /last-activities-tab
                    |   |
                    |   ├── user-info-panel.component.html
                    |   ├── user-info-panel.component.scss
                    |   ├── user-info-panel.component.spec.ts
                    |   └── user-info-panel.component.ts
                    |
                    ├── /user-header
                    ├── /user-toolbar
                    |
                    ├── account-overview.component.html
                    ├── account-overview.component.scss
                    ├── account-overview.component.spec.ts
                    └── account-overview.component.ts

Inside the folder of a Smart Component the component is defined. Besides that are folders containing the Dumb Components the Smart Component consists of. This can be recursive - a Dumb Component can consist of other Dumb Components. This is reflected by the file structure as well. This way the structure of a view becomes very readable. As mentioned before, if a Dumb Component is used by multiple Smart Components inside the components layer it is put inside the /shared folder inside the components layer.

With this way of thinking the shared module makes a lot of sense. If a Dumb Component is used by multiple Smart Components from different feature modules, the Dumb Component is placed into the shared module.

Listing 5. The shared module contains Dumb Components shared across Smart Components from different feature modules

    /src
    └── /app
        └── /shared
            └── /user-panel
                |
                ├── user-panel.component.html
                ├── user-panel.component.scss
                ├── user-panel.component.spec.ts
                └── user-panel.component.ts

The layer folder /components is not necessary inside the shared module. The shared module only contains components!