The complete guide to designing, developing, testing, and deploying enterprise applications with Angular

Angular Applications Architecture

Requirements and FAQs

Code style guide

Introduction

Start from the domain

Software architecture for Front-end

Domain, design, develop

Workspaces scenarios

Applications and Libraries

Mono repository multi project

Domain boundary with plain TypeScript

Application details with Angular

Presentational details with Angular

Domain boundary and application details

Testing big Angular solutions with ease

Narrow tests for business logic

Visual tests for the presentation layer

Wide tests for the user experience

Testing since the beginning

Configuration environment and tokens

Instrumentation measuring and logging

Security authentication and authorization

Core generic infrastructure

A library for your shared UI vocabulary

A set of basic atomic elements

Some generic composed blocks

User interface, a design system foundation

Reactive stores with Signals

API access as a commodity

Interceptors for the dirty job

Data stores, reactive access, and persistence

Features come in routes to pages

Anatomy of a Page control flow and services

Different levels of state management

Routes and pages

In this course we teach you how to design, develop, ane deploy enterprise level Angular Applications the right way. Despite the fact that Angular is an opinionated framework, specially suited to build large solutions, it requires a deep knowledge to take decisions at every step.

In almost 30 lessons we cover how to choose and use the correct tools, how to structure an application that scales and how to code some intricate solutions to common problems. It's a long course/book and comes with a complete working codebase fully tested.

It is taught by Alberto Basalo who has been working, advising, and training multinational corporations, banks, and public administrations in Angular for years.

The complete guide to design, develop, test, and deploy enterprise applications with Angular

How to design, develop and deploy big enterprise applications with Angular.

Best practices to organize your code in small reusable libraries.

Application of reactive flow patterns for better user and developer speed.

Leverage the latest Angular version features like stand-alone components.

Common functionality for any application ready to use.

Any application needs to be configured to run in a specific environment and should be configurable to behave as expected. At the first shot, you can inline some data within your code, but that is not what we learned as a good practice. Everything that can be treated as data should be out of the program. Fortunately, it is easy to use the 

 to pass those config values in an elegant way.

Configuration is the process of setting up the application to run in a specific environment. As an example, we can include things like:

To do so, first, start by defining which data you need to configure your app correctly.

/**
 * Application configuration type
 */
export type AppConfig = {
  /** Minimum log level to write */
  logLevel: LogLevel;
  /** Base URL of the API */
  apiBaseUrl: string;
  /** Whether to show alerts to the user */
  showAlertsToUser?: boolean;
};

We will treat configuration data as any other application data. The main difference is the changing rate and motivation. Typically, this kind of info is read-only, which happens only once when the app starts. It is expected to have different data sets based on when or where the application is running. It is what we call 

The environment is the context in which the application is running. This includes common scenarios like:

In Angular's early days, the CLI provided us with a folder called 

, suited explicitly to these needs. There, we could use several files with the same structure but different values, and the build process chose one of them depending on the configured environment. 

---
title: Configuration environment and tokens
isPublicLesson: false
useMdx: true
---

# Configuration, environment, and tokens

Any application needs to be configured to run in a specific environment and should be configurable to behave as expected. At the first shot, you can inline some data within your code, but that is not what we learned as a good practice. Everything that can be treated as data should be out of the program. Fortunately, it is easy to use the **Angular Dependency Injection system** to pass those config values in an elegant way.

## Configuration

Configuration is the process of setting up the application to run in a specific environment. As an example, we can include things like:

-   Setting up the API url connection string
-   Establishing the log level
-   Deal with errors

To do so, first, start by defining which data you need to configure your app correctly.

```typescript
/**
 * Application configuration type
 */
export type AppConfig = {
  /** Minimum log level to write */
  logLevel: LogLevel;
  /** Base URL of the API */
  apiBaseUrl: string;
  /** Whether to show alerts to the user */
  showAlertsToUser?: boolean;
};
```

We will treat configuration data as any other application data. The main difference is the changing rate and motivation. Typically, this kind of info is read-only, which happens only once when the app starts. It is expected to have different data sets based on when or where the application is running. It is what we call **environments**.

## Environment

The environment is the context in which the application is running. This includes common scenarios like:

-   Development
-   Staging
-   Production

In Angular's early days, the CLI provided us with a folder called `Environments`, suited explicitly to these needs. There, we could use several files with the same structure but different values, and the build process chose one of them depending on the configured environment. 

In modern versions, those files are not generated by default but are still easy to re-create using a specific _schematic_. 

```bash
ng generate environments
```

This command will generate two files (intended for development and production) and fill the `nx.json` files. All you need to do is type and fill the exported `const` with your preferred values. For example, those could be valid configurations for our app: