Angular Project Structure

A mold for organizing every resource in the project: three layers, one naming pattern. Apply it to any kind of resource — the pattern is not limited to components, services, or directives.

The mold

Every file lives at:

<layer>/<resource-name>/<slice>/<name>.<type>.{ts|html|css|scss}

• <layer> — core/, features/, or shared/. These are the only root-level folders for application code.
• <resource-name> — the resource being built (e.g. checkout, http, ui).
• <slice> — a sub-domain of the resource that groups related files (e.g. cart/, payment/, interceptors/).
• <name>.<type> — file name is <name>.<type>.<ext>. <type> is free-form: component, service, directive, pipe, guard, interceptor, resolver, layout, util, anything. .ts is always present; add .html / .css / .scss for templates and styles.

Examples of the mold in practice: