Angular Architecture

Converging Concepts & Practices

echo `whoami`

M. Ahsan Ayaz

Software Architect

Key Concepts We'll Talk About

  • Architectural Considerations
  • Structuring Modules
  • Organizing Components
  • Reusing Components
  • Organizing Features

But WHY?





Lack of planning

Architecture Considerations

App Overview

App Features

Server Communication


State Management

Shared Functionality

Considerations based on your team/organization

Unit Testing

E2E Testing

CDN Server for Static Assets




Organizational Challenges




Pro Tip:

Angular Style Guide will help you understand how to:

  • Organize Modules
  • Use Angular Life Cycle Hooks
  • Follow consistent naming conventions
  • Create and use Services
  • Create and use Components
  • Follow a scalable project structure


The Fun


git checkout step-1

npm install

ng serve -o

ng new marvel-heroes --routing --style scss --prefix mh

A look at the CLI command used to create the project


What is a CoreModule usually?


  • Can contain Global Services (only provided once in the project)
  • Can contain the core layout/components for the app which are not supposed to be re-usable/shared
  • Can contain interceptors/guards etc


Pro Tip:

Use Editorconfig
for code consistency

Let's have another look at the project

Boosting App's Performance

git checkout step-2

Lazy Load Routes

git checkout step-2-final

Use Components Smartly

Smart Components

Dumb Components

  • Contain business logic
  • Can have data manipulation
  • Are just used for Presentation
  • Should only depend on the @Input()s

Use OnPush Strategy

git checkout step-3

App Structure and Organizing Modules

Follow LIFT


  • Locate the code intuitively and fast.
  • Identify by the name of the file what it contains and represents
  • Flatten the project structure as long as possible
  • Try to be DRY

Always structure your app so that you can:

Organizing Features

Create Self Contained Features

  • Multiple teams can be assigned to their on feature modules
  • Teams can work without pushing breaking changes to other modules that other teams may be working on.

Share if you care

Identify the components that will be used in multiple modules. Have them declared such that they're shareable.

git checkout step-4

Reusing a component in different modules

git checkout step-4-final


if we got enough time

Thank You !

Software Architect

Modus Create

Angular Architecture - Concept and Overview

By Muhammad Ahsan Ayaz

Angular Architecture - Concept and Overview

The session/workshop will teach you about Angular Architecture's best practices and patterns that you can use in your daily Angular projects.

  • 863
Loading comments...

More from Muhammad Ahsan Ayaz