Angular Architecture using a Facade

An ‘easy to use’ architecture without NgRx:

Let’s break it down:

Input & Generated Output


This is a file (in yaml, json, xml,..) that contains an OpenAPI Specification (OAS), it defines a standard, language-agnostic interface to RESTful APIs.
This file can be interpreted by packages such as OpenAPI Generator or Orval.

To create a file in .NET you can use Swagger.


The generator will create the Data Transfer Objects’s (DTO’s) and the Services to communicate with the API.
This is a real time saver because it’s quick and error-free.
There is also no reason the commit these files to the repository because they can be generated instantly.



Facade is a structural design pattern that provides a simplified interface to a library, a framework, or any other complex set of classes.


The facade is the ‘heart’ of this setup.
It will:

  • use the facade utils
  • communicate with the generated services
  • get injected to components that need data from the API
  • get injected into the FormServices

Facade Utilities

The facade utils transform DTO’s to Entities (objects we can easily work with), by omitting null/undefined values etc.

Testing Facade (Utilities)

You can Jest test:


The Reactive Form is the main responibilty of this service.

It will:

  • keep track of the values
  • keep track of it’s state (dirty, valid,..)
  • get injected into a component that uses this form



It contains a list of items, it will:

  • use the facade directly


It contains details of a specific item, it will:

  • use the formservice
  • use the facade

Testing Facade (Utilities)

You can test these component using Cypress.