It schedules callbacks to be able to be executed.

Topics involved

• The call stack: When a function is executed (synchronous code or callbacks), it enters the call stack. The call stack contains all the current executing functions, starting for the root (anonymous).

  

  

• The task queue: Its a queue where asynchronous tasks are queued when they are completed.

• The microtask queue: It’s a queue where asynchronous microtasks are queued when they are completed.

How event loop works?

The event loop checks continuosly the call stack. If it is empty, it will check if any microtask is in the microtasks queue. If any, it will execute the callback and as soon as executed, it will enter the call stack. Then, it will check the task queue and if there is any task, it will execute the callback and as and as soon as executed, it will enter the call stack. This is a process that happens continuously as the name suggests.

Small diagram

Small example

// Synchronous code
console.log(1);

// Microtask
Promise.resolve().then(() => {
  console.log(2);
});

console.log(3);

// Task
setTimeout(() => {
  console.log(4);
}, 0);

Promise.resolve().then(() => {
  console.log(5);
});

console.log(6);

Example output

1
3
6
2
5
4

This is a demo of the application functionality:

With the arrival of Angular Signals, achieving reactivity and handling change detection have become much simpler than when using Zone.js.

To explore this assertion, we will configure our application to run without Zone.js—thereby removing its automatic change detection mechanism—and rely solely on Signals for reactivity:

import {
  ApplicationConfig,
  provideExperimentalZonelessChangeDetection,
} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideExperimentalZonelessChangeDetection()],
};

Then, we will create the interface for our fetched data:

export interface Data {
  imageUrl: string;
  title: string;
}

Next, the we will create the service that fetches and modifies the data. We have asigned 1 second delay in fetchData method to simulate a request and we have added a reverseData method to modify data and see how the modification is shown instantly in the app, showing the reactive capabilities of signals (switching effect of images and titles, as shown in the video):

import { Injectable, signal } from '@angular/core';
import { Data } from '../models/data.interface';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private readonly data = signal<Data[]>([]);

  get dataSignal() {
    return this.data.asReadonly();
  }

  // request simulation
  fetchData() {
    const newData: Data[] = [
      {
        imageUrl:
          'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a97cc6bd-3b7b-44aa-b03d-90717569e29b/dxnwwo-95a4dba9-a6a5-4c73-a567-4c3f00c24607.jpg/v1/fill/w_1024,h_768,q_75,strp/pupy_dogs__3_by_little_drunk_jesus_dxnwwo-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzY4IiwicGF0aCI6IlwvZlwvYTk3Y2M2YmQtM2I3Yi00NGFhLWIwM2QtOTA3MTc1NjllMjliXC9keG53d28tOTVhNGRiYTktYTZhNS00YzczLWE1NjctNGMzZjAwYzI0NjA3LmpwZyIsIndpZHRoIjoiPD0xMDI0In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.ShrBRJlt9X27CrEkj8EZr1s6tkjqhIAIMvV1fN8Kdwk',
        title: 'Brown pupy',
      },
      {
        imageUrl:
          'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a97cc6bd-3b7b-44aa-b03d-90717569e29b/dxnwso-a8ad02ba-f373-470f-baeb-bebfda554aaa.jpg/v1/fill/w_1024,h_768,q_75,strp/pupy_dogs__2_by_little_drunk_jesus_dxnwso-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzY4IiwicGF0aCI6IlwvZlwvYTk3Y2M2YmQtM2I3Yi00NGFhLWIwM2QtOTA3MTc1NjllMjliXC9keG53c28tYThhZDAyYmEtZjM3My00NzBmLWJhZWItYmViZmRhNTU0YWFhLmpwZyIsIndpZHRoIjoiPD0xMDI0In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.xHFQ2oacJqg1pyqs9Ax4bQw7CtIt0f0Af3zxWWyUi1U',
        title: '2 pupies',
      },
    ];
    setTimeout(() => {
      this.data.set(newData);
    }, 1000);
  }

  reverseData() {
    this.data.update((data) => {
      const reversedData = data.reverse();
      return reversedData.slice();
    });
  }
}

And then we will create 2 components to reflect the changes in the UI

import { Component, computed, inject, Signal } from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-image',
  standalone: true,
  imports: [],
  templateUrl: './image.component.html',
  styleUrl: './image.component.sass',
})
export class ImageComponent {
  private readonly dataService = inject(DataService);

  readonly imageUrls!: Signal<string[]>;

  constructor() {
    this.imageUrls = computed(() => {
      return this.dataService.dataSignal().map((item) => item.imageUrl);
    });
  }
}

<h1>IMAGE</h1>

<ul>
  @for (url of imageUrls(); track url) {

  <div>
    <img [src]="url" width="200" />
  </div>
  }
</ul>

import { Component, computed, inject, Signal } from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-list',
  standalone: true,
  imports: [],
  templateUrl: './list.component.html',
  styleUrl: './list.component.sass',
})
export class ListComponent {
  private readonly dataService = inject(DataService);

  readonly titles!: Signal<string[]>;

  constructor() {
    this.titles = computed(() => {
      return this.dataService.dataSignal().map((item) => item.title);
    });
  }
}

<h1>LIST</h1>

<ul>
  @for (title of titles(); track title) {

  <li>{{ title }}</li>
  }
</ul>

As you can see using “root” services and Signals together, we can maintain a Signal holding the fetched data and create multiple computed Signals, each serving its own purpose in its respective component.

This is a demo of the application functionality:

Angular elements package, allows transforming angular components into custom elements. This transformation automatically maps the components view change detection and data binding with the corresponding HTML built-in equivalents.

Custom elements bootstrap themselves when are added to the DOM and are automatically destroyed when removed from the DOM. On the demo video you can see on logs that dynamic component is initialized and destroyed when tooltip is shown or hidden.

The component is transformed into a custom element, then is registered in the CustomElementRegistry and then we can use it when needed.

The mapping between the component and the custom element takes care of:

• Input properties: Defines corresponding attributes in the custom element. Transforms the property names to attributes using dash separated lower case, because custom elements don't recognize case distinctions.

  E.g. @Input('myInputName') inputName => my-input-name

• Output properties are dispatched as HTML custom events with the name of the custom event matching the output name.
  E.g. @Output('myEventName') myEvent => myEventName

Previously to create a dynamic component you need to take care of multiple steps that now are not necessary anymore with angular elements.

Angular advises against using the component selector as the custom element tag name.

To add the package to your project run the command:

npm install @angular/elements --save

The AppComponent imports ProductComponent and instantiates it in the template:

// app.component.ts
import { Component } from '@angular/core';
import { ProductComponent } from './product/product.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, ProductComponent],
})
export class AppComponent {}

<!-- app.component.html -->
<app-product></app-product>

ProductComponent shows an image of the product and the real time price. It adds the DynamicPriceComponent to the CustomElementsRegistry and passes an instance of it to the MatTooltipTemplateDirective.

// product.component.ts
import {
  Component,
  EnvironmentInjector,
  OnDestroy,
  OnInit,
} from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { matTooltipComponentText } from '../constants/constants';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import {
  NgElement,
  WithProperties,
  createCustomElement,
} from '@angular/elements';
import { DynamicPriceComponent } from './components/dynamic-price/dynamic-price.component';
import { BehaviorSubject, Subject, interval, noop, takeUntil, tap } from 'rxjs';
import { MatTooltipTemplateDirective } from '../directives/mat-tooltip-template.directive';

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss'],
  imports: [
    CommonModule,
    FormsModule,
    // We input MatTooltipModule 
    MatTooltipModule,
    // We input MatTooltipTemplateDirective 
    MatTooltipTemplateDirective,
  ],
})
export class ProductComponent implements OnInit, OnDestroy {
  matTooltipComponentText = matTooltipComponentText;

  // We define price as a BehaviorSubject to get a reactive behavior
  // and see real time changes on template.
  price = new BehaviorSubject<number>(20);

  private _destroyed = new Subject<void>();

  constructor(private injector: EnvironmentInjector) {
    // Here we add the DyanicPriceComponent to the CustomElementRegistry
    // using the tag name 'dynamic-price-element'
    this.defineCustomElement();
  }

  ngOnInit(): void {
    // We update the price every second to see price changes on real time
    interval(1000)
      .pipe(
        tap(() => this.makeOffer()),
        takeUntil(this._destroyed)
      )
      .subscribe(noop);
  }

  ngOnDestroy(): void {
    this._destroyed.next();
    this._destroyed.complete();
  }

  private defineCustomElement() {
    const dynamicPriceElement = createCustomElement(DynamicPriceComponent, {
      injector: this.injector,
    });
    // We check if component has been added previously to the registry
    if (!customElements.get('dynamic-price-element')) {
      customElements.define('dynamic-price-element', dynamicPriceElement);
    }
  }

  createCustomElement() {
    const dynamicPriceEl: NgElement & WithProperties<DynamicPriceComponent> =
      document.createElement('dynamic-price-element') as any;

    // We assign input properties of 'DynamicPriceComponent'
    dynamicPriceEl.dynamicPrice$ = this.price;
    return dynamicPriceEl;
  }

  private makeOffer() {
    const newPrice = this.price.value + this.generateRandomNumber(-10, 10);
    if (newPrice < 0) {
      this.price.next(this.generateRandomNumber(0, 10));
    }
    this.price.next(newPrice);
  }

  private generateRandomNumber(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
}

<!-- product.component.html -->
<div class="product">
<!-- In this div we set the matTooltip value because is required. we will 
remove it in the 'MatToolipTemplateDirective'. We also ad the matToolipTemplate,
and we pass to it the 'templateGenerator' function that returns the instance
of the real time generated component -->
  <div
    class="product-img"
    matTooltip="{{ matTooltipComponentText }}"
    matToolipTemplate
    [templateGenerator]="createCustomElement.bind(this)"
  >
    <p class="product-title">Dog biscuits</p>
    <img src="assets/img/biscuit.jpeg" />
  </div>
  <div class="product-price">
    <p>Real time price: {{ price.asObservable() | async }} $</p>
  </div>
</div>

The MatTooltipTemplateDirective appends the dynamically created component to the tooltip, after removing textContent:

// mat-tooltip-template.directive.ts
import {
  AfterViewInit,
  Directive,
  ElementRef,
  Input,
  OnDestroy,
  OnInit,
  Renderer2,
  ViewChild,
} from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';
import { Subject, delay, fromEvent, noop, takeUntil, tap } from 'rxjs';

@Directive({
  selector: '[matToolipTemplate]',
  standalone: true,
})
export class MatTooltipTemplateDirective implements OnInit, OnDestroy {
  @Input() templateGenerator!: () => Node;

  private _destroyed = new Subject<void>();

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private matTooltip: MatTooltip
  ) {}

  ngOnInit(): void {
    // We need to be aware of when the tooltip is shown to add the
    // dynamically created component to it.
    this.listenToTooltipVisibility();
  }

  ngOnDestroy(): void {
    this._destroyed.next();
    this._destroyed.complete();
  }

  private listenToTooltipVisibility() {
    // When the mouse enter into the div that has the 'MatTooltipDirective'
    fromEvent(this.el.nativeElement, 'mouseenter')
      .pipe(
        // This delay is required to allow 'MatTooltipDirective' to show the 
        // tooltip first.
        delay(0),
        tap(() => {
          this.addTemplate();
        }),
        takeUntil(this._destroyed)
      )
      .subscribe(noop);
  }

  // We get the dynamically created component, we remove the 'MatTooltipDirective' 
  // required text. and append the dynamic component as child to the deepest 
  // div inside the tooltip. 
  private addTemplate() {
    const nodes =
      this.matTooltip._tooltipInstance?._tooltip.nativeElement.querySelectorAll(
        'div'
      );
    const mostDeep = nodes?.item(nodes.length - 1);
    if (!!mostDeep) {
      mostDeep.textContent = null;
      this.renderer.setStyle(mostDeep, 'max-width', 'unset');
      this.renderer.appendChild(mostDeep, this.templateGenerator());
    }
  }
}

The DynamicPriceComponent shows the real time price:

// dynamic-price.component.ts
import { CommonModule } from '@angular/common';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { Observable, finalize, noop, tap } from 'rxjs';

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './dynamic-price.component.html',
  styleUrls: ['./dynamic-price.component.scss'],
  imports: [CommonModule],
})
export class DynamicPriceComponent implements OnInit, OnDestroy {
  @Input() dynamicPrice$!: Observable<number>;

  ngOnInit(): void {
    console.log('DYNAMIC PRICE ONINIT');
  }

  ngOnDestroy(): void {
    console.log('DYNAMIC PRICE ONDESTROY');
  }
}

<!-- dynamic-price.component.html -->
<div class="dynamic-price">
  <img src="assets/img/weim.jpeg" class="dynamic-price-img" />
  <p class="dynamic-price-title">
    Welcome, the real time price is {{ dynamicPrice$ | async }} $. We hope that
    you like it!
  </p>
</div>

Bibliography:

• https://angular.io/guide/elements

This is a demo of the application functionality:

Sometimes we will find that our production application doesn't behave as we expect despite doing well in the development environment.

If we try to debug code using a debugger line in code, the production build will delete that line, the same with comments, etc. This is due to the process of minification and uglification. Furthermore, if we try to inspect our code inspecting the bundle we will see that the code differs from our original code, and sometimes will be hard to find what we want. The solution to this problem is the use of source maps. In the end, what source maps do is give us access to the original files and allow us to debug them.

// This is the source map that belongs to the bundle of the team component
{
  "version": 3,
  "file": "972.d5590aab453d0da7.js",
  "mappings": "wKAIA,MAAMA,EAAiB,CACrB,CACEC,KAAM,GACNC,UCAJ,MAAM,MAAOC,EAGXC,cAAgB,CAEhBC,WACEC,KAAKC,OAAS,CAAC,6BAA8B,6BAC7CD,KAAKE,MAAQF,KAAKC,OAAO,EAC1B,CAEDE,gBACEH,KAAKE,MAAQF,KAAKC,OAAOG,KAAMF,GAAUA,GAASF,KAAKE,MACxD,+CAZUL,EAAa,0BAAbA,EAAaQ,0FCP1BC,cAAIA,SAAWA,QACfA,oBAAQA,gCAASC,iBAAe,GAAED,wBAAYA,eAD1CA,4BDOST,CAAb,MDEE,CACEF,KAAM,KACNa,UAAW,OACXC,WAAY,KAQT,IAAMC,EAAb,MAAM,MAAOA,kDAAiB,0BAAjBA,gCAHDC,cAAsBjB,GACtBiB,QAECD,CAAb,KGJaE,EAAb,MAAM,MAAOA,kDAAU,0BAAVA,gCAJTC,KACAH,KAGSE,CAAb",
  "names": [
    "routes",
    "path",
    "component",
    "TeamComponent",
    "constructor",
    "ngOnInit",
    "this",
    "titles",
    "title",
    "onChangeTitle",
    "find",
    "selectors",
    "i0",
    "ctx",
    "pathMatch",
    "redirectTo",
    "TeamRoutingModule",
    "RouterModule",
    "TeamModule",
    "CommonModule"
  ],
  "sourceRoot": "webpack:///",
  "sources": [
    "./src/app/team/team-routing.module.ts",
    "./src/app/team/team.component.ts",
    "./src/app/team/team.component.html",
    "./src/app/team/team.module.ts"
  ],
  "sourcesContent": [
    "import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { TeamComponent } from './team.component';\n\nconst routes: Routes = [\n  {\n    path: '',\n    component: TeamComponent,\n  },\n  {\n    path: '**',\n    pathMatch: 'full',\n    redirectTo: '',\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule],\n})\nexport class TeamRoutingModule {}\n",
    "import { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-team',\n  templateUrl: './team.component.html',\n  styleUrls: ['./team.component.scss'],\n})\nexport class TeamComponent implements OnInit {\n  title: string | undefined;\n  titles: string[];\n  constructor() {}\n\n  ngOnInit(): void {\n    this.titles = ['Teams Component - Original', 'Teams Component - Changed'];\n    this.title = this.titles[0];\n  }\n\n  onChangeTitle() {\n    this.title = this.titles.find((title) => title != this.title);\n  }\n}\n",
    "<h1>{{ title }}</h1>\n<button (click)=\"onChangeTitle()\">Change title</button>\n",
    "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { TeamRoutingModule } from './team-routing.module';\nimport { TeamComponent } from './team.component';\n\n\n@NgModule({\n  declarations: [\n    TeamComponent\n  ],\n  imports: [\n    CommonModule,\n    TeamRoutingModule\n  ]\n})\nexport class TeamModule { }\n"
  ],
  "x_google_ignoreList": ["import { NgModule }"]
}

A source map is represented by a .map file and it is an object that contains the next properties:

• version: File version (always the first entry in the object) and must be a positive integer.
• file: An optional name of the generated code that this source map is associated with.
• mappings: A string with the encoded mapping data
• names: A list of symbol names used by the “mappings” entry
• sourceRoot: An optional source root, useful for relocating source files on a server or removing repeated values in the “sources” entry. This value is prepended to the individual entries in the “source” field
• sources: A list of original sources used by the “mappings” entry
• sourcesContent: An optional list of source content, useful when the “source” can’t be hosted. The contents are listed in the same order as the sources in line 5. “null” may be used if some original sources should be retrieved by name
• x_google_ignoreList: An optional list of user-specified ignore list regular expressions, as well as source map hints.

To run this example we need to follow the next steps:

1. npm run start:prod
2. Go to chrome browser, open DevTools, and open the Sources tab
3. Under localhost:4200 cloud, open the file we want to add the source map to.
4. Right-click on the code and click on "Add source map..."
5. Enter the source map URL as "file://myAbsolutePathToMatchingSourcemap"

// package.json
{
  "name": "source-maps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration=production",
    "delete:sourcemaps:prod": "rimraf ./dist/*.map",
    "build:sourcemaps": "ng build --configuration=production --output-path=localSourceMaps",
    "serve:prod": "http-server ./dist --proxy http://localhost:4200? -a localhost -p 4200",
    "start:prod": "run-s build:prod delete:sourcemaps:prod build:sourcemaps serve:prod",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,

We see that "npm run start:prod" uses npm-run-all library to run secuentially the production build process, the deletion of generated source maps, a new production build process with a new output path to have the source maps locally and finally exposes the built application on a local server with the http-server library.

Bibliography:

• https://developer.chrome.com/blog/sourcemaps/
• https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.djovrt4kdvga
• https://docs.google.com/document/d/1xi12LrcqjqIHTtZzrzZKmQ3lbTv9mKrN076UB-j3UZQ/edit?hl=en_US
• https://chromium.googlesource.com/devtools/devtools-frontend/+/41804897510b880826cdf051ffcc1e37845a23e2
• https://medium.com/angular-in-depth/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85
• https://medium.com/swlh/optimizations-by-angular-54cb80add6d4
• https://angular.io/guide/workspace-config

This is a demo of the application functionality:

On chrome devtools Console tab, we can see when the guards are being called thanks to the logs.

Guards allow or disallow routing. All of them are services that implement an interface as we will see. There are some available route guards in angular:

• CanActivate: Allows or disallows reaching a component.
• CanActivateChild: Allows or disallows reaching a child component.
• CanDeactivate: Allows or disallows leaving a component.
• CanLoad: Allows or disallows fetching a module.
• Resolve: Ensures that some data is gathered before route activation. If used with guards, guards will be executed first. If resolves an error we can navigate to an error page.

CanActivate:

We create a guard with the CanActivate interface using the command:

ng generate guard profile/can-activate

or

ng g g profile/can-activate

We add a console.log to be aware of when we are using the guard:

// can-activate.guard.ts
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class CanActivateGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    console.log('CanActivate');
    return true;
  }
}

As we told earlier the class implements the CanActivate interface which has the canActivate method. We can return a boolean, a Promise, an Observable or a UrlTree. If the boolean is true we allow the navigation to the requested route, if it is false we disallow it. If we return UrlTree we will be redirected to the specified URL. We can also define the constructor and inject a service.

We then provide (as a service) the guard in the module that imports the RoutingModule that uses the guard, in this case, ProfileModule:

// profile.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './profile.component';
import { ProfileRoutingModule } from './profile-routing.module';
import { CanActivateGuard } from './can-activate.guard';
import { CanActivateChildGuard } from './can-activate-child.guard';
import { PhotoModule } from './photo/photo.module';

@NgModule({
  declarations: [ProfileComponent],
  imports: [CommonModule, PhotoModule, ProfileRoutingModule],
  providers: [CanActivateGuard, CanActivateChildGuard],
})
export class ProfileModule {}

And then we use it in the RoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanActivateChildGuard } from './can-activate-child.guard';
import { CanActivateGuard } from './can-activate.guard';
import { PhotoComponent } from './photo/photo.component';
import { ProfileComponent } from './profile.component';

const routes: Routes = [
  {
    path: '',
    component: ProfileComponent,
    canActivate: [CanActivateGuard],
    canActivateChild: [CanActivateChildGuard],
    children: [{ path: 'photo', component: PhotoComponent }],
  },
  {
    path: '**',
    redirectTo: '',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ProfileRoutingModule {}

Here we are using also CanActivateChild guard but we will discuss it later.

The result is the first shown in the demo video. If we change the return boolean of the guard to false the result is this:

As we see on the log each time we click on Profile menu option we are using the CanActivate guard but the view is not rendered. This is the result we expected.

A possible real use case for this guard is disallowing the access to a part of the navigation based on a role (e.g. if the user is not an admin is not allowed to navigate to the "files" URL. In this practical example we simply set a true allowing always the navigation but you can clone the code and make changes to see how it works.

CanActivateChild:

We create a guard with the CanActivateChild interface using the command:

ng generate guard profile/can-activate-child

or

ng g g profile/can-activate-child

We add a console.log to be aware of when we are using the guard:

// can-activate-child.guard.ts
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  CanActivateChild,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class CanActivateChildGuard implements CanActivateChild {
  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | boolean
    | UrlTree
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree> {
    console.log('CanActivateChild');
    return true;
  }
}

As in the previous guard, the class implements an interface, in this case the CanActivateChild interface which has the canActivateChild method. We can return a boolean, a Promise, an Observable or a UrlTree. Again if the boolean is true we allow the navigation to the requested route, if it is false we disallow it. If we return UrlTree we will be redirected to the specified URL. We can also define the constructor and inject a service.

We then provide (as a service) the guard in the module that imports the RoutingModule that uses the guard, in this case, ProfileModule:

// profile.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './profile.component';
import { ProfileRoutingModule } from './profile-routing.module';
import { CanActivateGuard } from './can-activate.guard';
import { CanActivateChildGuard } from './can-activate-child.guard';
import { PhotoModule } from './photo/photo.module';

@NgModule({
  declarations: [ProfileComponent],
  imports: [CommonModule, PhotoModule, ProfileRoutingModule],
  providers: [CanActivateGuard, CanActivateChildGuard],
})
export class ProfileModule {}

And then we use it in the RoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanActivateChildGuard } from './can-activate-child.guard';
import { CanActivateGuard } from './can-activate.guard';
import { PhotoComponent } from './photo/photo.component';
import { ProfileComponent } from './profile.component';

const routes: Routes = [
  {
    path: '',
    component: ProfileComponent,
    canActivate: [CanActivateGuard],
    canActivateChild: [CanActivateChildGuard],
    children: [{ path: 'photo', component: PhotoComponent }],
  },
  {
    path: '**',
    redirectTo: '',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ProfileRoutingModule {}

The result again is the first shown in the demo video. If we change the return boolean of the guard to false the result is this:

As we see on the log each time we click on Show photo button we are using the CanActivateChild guard but the view is not rendered. This is the result we expected.

Again, a possible real use case for this guard is disallowing access to a part of the navigation based on a role (e.g. if the user is not an admin is not allowed to navigate to the users creation URL. In this practical example, we simply set a true allowing always the navigation but you can clone the code and make changes to see how it works.

CanDeactivate:

We create a guard with the CanDeactivate interface using the command:

ng generate guard faq/can-deactivate

or

ng g g faq/can-deactivate

We add a console.log to be aware of when we are using the guard:

// can-deactivate.guard.ts
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanDeactivate,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<any> {
  canDeactivate(
    component: any,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    console.log('CanDeactivate');
    return true;
  }
}

As in the previous guard, the class implements an interface, in this case the CanDeactivate interface which has the canDeactivate method. We can return a boolean, a Promise, an Observable or a UrlTree. Again if the boolean is true we allow the navigation to the requested route, if it is false we disallow it. If we return UrlTree we will be redirected to the specified URL. We can also define the constructor and inject a service.

We then provide (as a service) the guard in the module that imports the RoutingModule that uses the guard, in this case, FaqModule:

// faq.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FaqComponent } from './faq.component';
import { FaqRoutingModule } from './faq-routing.module';
import { CanDeactivateGuard } from './can-deactivate.guard';



@NgModule({
  declarations: [FaqComponent],
  imports: [
    CommonModule,
    FaqRoutingModule
  ],
  providers: [CanDeactivateGuard]
})
export class FaqModule { }

And then we use it in the RoutingModule:

// faq-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanDeactivateGuard } from './can-deactivate.guard';
import { FaqComponent } from './faq.component';

const routes: Routes = [
  {
    path: '',
    component: FaqComponent,
    canDeactivate: [CanDeactivateGuard],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class FaqRoutingModule {}

The result again is the first shown in the demo video. If we change the return boolean of the guard to false the result is this:

As we see once we visit the faq view, we cannot visit any other view and each time we click on any other menu option we are using the CanDeactivate guard as we see on the logs. This is the result we expected.

Again, a possible real use case for this guard is making a question to an user about if is secure of navigating to other page because there is some data in the current view that has not been persisted. If the users clicks yes we return true and the navigation happens and if clicks no the navigation will not happen. In this practical example, we simply set a true allowing always the navigation but you can clone the code and make changes to see how it works.

CanLoad:

We create a guard with the CanLoad interface using the command:

ng generate guard catalog/can-load

or

ng g g catalog/can-load

We add a console.log to be aware of when we are using the guard:

// can-load.guard.ts
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  CanLoad,
  Route,
  RouterStateSnapshot,
  UrlSegment,
  UrlTree,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class CanLoadGuard implements CanLoad {
  canLoad(
    route: Route,
    segments: UrlSegment[]
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    console.log('CanLoad');
    return true;
  }
}

As in the previous guard, the class implements an interface, in this case the CanLoad interface which has the canLoad method. We can return a boolean, a Promise, an Observable or a UrlTree. In this case if the boolean is true we allow requesting the module of the requested route, if it is false we disallow it. If we return UrlTree we will be redirected to the specified URL. We can also define the constructor and inject a service.

We then provide (as a service) the guard in the module that imports the RoutingModule that uses the guard, in this case, CatalogModule:

// catalog.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CatalogComponent } from './catalog.component';
import { CatalogRoutingModule } from './catalog-routing.module';
import { CanLoadGuard } from './can-load.guard';

@NgModule({
  declarations: [CatalogComponent],
  imports: [CommonModule, CatalogRoutingModule],
  providers: [CanLoadGuard],
})
export class CatalogModule {}

And then we use it in the RoutingModule:

// catalog-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanLoadGuard } from './can-load.guard';
import { CatalogComponent } from './catalog.component';

const routes: Routes = [
  {
    path: '',
    component: CatalogComponent,
  },
  {
    path: 'product',
    loadChildren: () =>
      import('./product/product.module').then(
        (m) => m.ProductModule
      ),
    canLoad: [CanLoadGuard],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CatalogRoutingModule {}

The result again is the first shown in the demo video. We will see two different videos, in one of them we will see how the module is requested and arrives and in the second one how this will not happen. To make the example more visible on chrome devtools I will select the network tab and in the NO throttling select I will select Slow 3G (You can see how I do this on the video):

Allowing the request and getting the response:

You can see as when I click the button info to navigate to the catalog/product URL the module is requested, the spinner starts showing and when the module arrives, the spinner hides and the view is rendered.

If we don't allow the request this is the result:

No request is being done because we are returning false on the CanLoad guard.

Again, a possible real use case for this guard is disallowing modules requests depending on the user role, this way the bundle size is minimal and the application will start sooner. In this practical example, we simply set a true allowing always the request but you can clone the code and make changes to see how it works.

Resolve:

We create a resolver with the Resolve interface using the command:

ng generate resolver catalog/product

or

ng g r catalog/product

We add a console.log to be aware of when we are using the resolver. We also create a dummy method that returns a product depending on the id we pass in the URL and some dummy data (in a real case this could be a request to an backend API to get a product based on the id):

// product.resolver.ts
import { Injectable } from '@angular/core';
import {
  Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot,
} from '@angular/router';
import { Observable, of } from 'rxjs';
import { Product } from './product.model';

@Injectable()
export class ProductResolver implements Resolve<Product> {
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Product> {
    console.log('Resolver');
    return this.createProduct(route.paramMap.get('id'));
  }

  createProduct(id: any) {
    const description =
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
    const product = new Product(id, description, 'assets/images/cloud.png');
    return of(product);
  }
}

As in the previous guards, the class implements an interface, in this case the Resolve interface which has the resolve method. We can return an Observable (Instead of product we can return the model we choose). We can also define the constructor and inject a service.

We then provide (as a service) the resolver in the module that imports the RoutingModule that uses the resolver, in this case, ProductModule:

// product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductRoutingModule } from './product-routing.module';
import { ProductComponent } from './product.component';
import { ProductResolver } from './product.resolver';

@NgModule({
  declarations: [ProductComponent],
  imports: [CommonModule, ProductRoutingModule],
  providers: [ProductResolver],
})
export class ProductModule {}

And then we use it in the RoutingModule:

// product-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductComponent } from './product.component';
import { ProductResolver } from './product.resolver';

const routes: Routes = [
  {
    path: ':id',
    component: ProductComponent,
    resolve: { product: ProductResolver },
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ProductRoutingModule {}

To get the returning data from the resolver on the component we are navigating to we do it instantiating the ActivatedRoute class in the constructor of the component:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { Product } from './product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss'],
})
export class ProductComponent implements OnInit {
  actualProduct: Product;
  constructor(private activatedRoute: ActivatedRoute) {
    this.actualProduct = new Product('', '', '');
  }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe((data) => {
      this.actualProduct = data["product"];
    });
  }
}

If we get an error for example if we are requesting an endpoint that is not available to get some data, we can handle the error and return EMPTY observable and we can navigate to an error page for example using the router:

this.router.navigate(["/error"]);
return EMPTY;

Again, a possible real use case for the resolver is when we want to guarantee to access a view with displaying data previously preloaded.

Bibliography:

• https://angular.io/guide/router#preventing-unauthorized-access

Angular handles forms in two ways:

1. Reactive forms: Allow us to manipulate the form object on ts files.
2. Template-driven forms: There is no explicit form object, instead there is an implicit one manipulable with directives.

We will add some bootstrap classes that we will use to show alert styles in validation message boxes. So in the index.html we add the bootstrap cdn and it will be applied to the entire app:

// index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularForms</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular applies some classes to form elements that describe their state: ng-touched (or ng-untouched if the control hasn't been visited), ng-dirty(or ng-pristine if the control's value hasn't changed), ng-valid ( or ng-invalid if the control's value isn't valid) and ng-submitted if the form has been submitted.

To add some styles to these angular-specific classes we will do it in the styles.scss file that applies styles to the entire app:

// styles.scss
/* You can add global styles to this file, and also import other style files */
.form-control {
  border-width: 2px;
  &.ng-touched {
    border-color: rgba(30, 110, 214, 1);
  }
  &.ng-dirty {
    border-color: rgba(162, 143, 56, 1);
  }
  &.ng-invalid {
    border-color: rgba(214, 30, 30, 1);
  }
}

Reactive forms: The first thing we will do is to add ReactiveFormsModule on the module that will declare the component that uses the form to use reactive form controls:

// users-reactive.module.ts
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { UsersReactiveComponent } from './users-reactive.component';
import { SharedModule } from '../shared/shared.module';



@NgModule({
  declarations: [UsersReactiveComponent],
  imports: [
    ReactiveFormsModule,
    SharedModule
  ]
})
export class UsersReactiveModule { }

Second, we create a FormGroup in the ts file to associate with the form in the html file:

// users-reactive.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-users-reactive',
  templateUrl: './users-reactive.component.html',
  styleUrls: ['./users-reactive.component.scss'],
})
export class UsersReactiveComponent implements OnInit {
  userForm: FormGroup;
  videogames: string[];
  constructor() {
    this.userForm = new FormGroup({
      name: new FormControl('Juanjo', Validators.required),
      father: new FormControl('Manolo'),
      videogames: new FormControl(
        ['Metroid Prime', 'Animal Crossing'],
        Validators.required
      ),
    });
    this.videogames = [
      'Metroid Prime',
      'Super Mario',
      'Animal Crossing',
      'Assasins Creed',
    ];
  }

  ngOnInit(): void {}

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }

  onClear() {
    this.userForm.reset();
  }

  findControl(controlName: string) {
    return this.userForm.get(controlName) as FormControl;
  }
}

• The videogames variable contains the videogames displayed as options on a select element.
• On the FormGroup variable (userForm) we have defined some FormControls and on each one, we defined a default value and in two of them a required validator.
• The onSubmit function simply displays the form value if the form is valid (validation requirements are met).
• The onClear funtions resets the form.
• We also define a findControl method that takes a controlName and gives us the control itself. This allows us to access control statuses on the html to make conditions.

The html is as follows:

// users-reactive.component.html
<h1>Reactive form</h1>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">User name</label>
    <input class="form-control" type="text" id="name" formControlName="name" />
    <app-validation-message
      [message]="'User name is required'"
      [hidden]="findControl('name').valid"
    ></app-validation-message>
  </div>
  <div class="form-group">
    <label for="father">User Father</label>
    <input
      class="form-control"
      type="text"
      id="father"
      formControlName="father"
    />
  </div>
  <div class="form-group">
    <label for="toys">Videogames</label>
    <select
      class="form-control"
      id="videogames"
      formControlName="videogames"
      multiple
    >
      <option *ngFor="let videogame of videogames" [value]="videogame">
        {{ videogame }}
      </option>
    </select>
    <app-validation-message
      [message]="'Videogame is required'"
      [hidden]="findControl('videogames').valid"
    ></app-validation-message>
  </div>
  <div class="form-group row mt-3">
    <div class="col-sm-1">
      <button type="button" class="btn btn-primary" (click)="onClear()">
        Clear
      </button>
    </div>
    <div class="col-sm-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

• We assing the FormGroup variable (userForm) to the [formGroup] one-way data binding available from ReactiveFormsModule. With this, we tell input elements the control name they have to use to asssign themselves the apropiated control.
• The formControlName directive value must coincide with the FormGroup name defined in the FormGroup object in the ts file (name, father, and videogames).
• We also see that app-validation-message component is shown if the control is invalid.
• Clear button calls the onClear functions that resets the form as we see earlier.
• Submit button triggers ngSubmit event and this calls the obSubmit functions which logs the form value.

This is the form shown by default:

This is the form if some of the fields are touched (blue color on borders):

This is the form if some of the fields are modified:

This is the form if some of the required fields are empty:

And this is the result of submitting the form on console:

Template-driven forms:

These forms rely on directives defined in the FormsModule: NgModel, NgForm and NgModelGroup. The first thing we will do is import FormsModule on the module that will declare the component that uses the form, this way we will be able to use mentioned directives:

// pets-template-driven.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PetsTemplateDrivenComponent } from './pets-template-driven.component';
import { SharedModule } from '../shared/shared.module';



@NgModule({
  declarations: [PetsTemplateDrivenComponent],
  imports: [
    FormsModule,
    SharedModule
  ]
})
export class PetsTemplateDrivenModule { }

With all the needed styles in place we create the template-driven form html file:

// pets-template-driven.component.html
<h1>Template-driven form</h1>
<form #petForm="ngForm" (ngSubmit)="onSubmit(petForm.form)">
  <div class="form-group">
    <label for="name">Pet name</label>
    <input
      class="form-control"
      type="text"
      id="name"
      name="passedName"
      [(ngModel)]="actualPet.name"
      #nameModel="ngModel"
      required
    />
    <app-validation-message
      [message]="'Pet name is required'"
      [hidden]="nameModel.valid"
    ></app-validation-message>
  </div>
  <div class="form-group">
    <label for="owner">Pet owner</label>
    <input
      class="form-control"
      type="text"
      id="owner"
      name="owner"
      [(ngModel)]="actualPet.owner"
    />
  </div>
  <div class="form-group">
    <label for="toys">Pet toys</label>
    <select
      class="form-control"
      id="toys"
      name="toys"
      [(ngModel)]="actualPet.toys"
      #toysModel="ngModel"
      multiple
      required
    >
      <option *ngFor="let toy of toys" [value]="toy">{{ toy }}</option>
    </select>
    <app-validation-message
      [message]="'Pet toy is required'"
      [hidden]="toysModel.valid"
    ></app-validation-message>
  </div>
  <div class="form-group row mt-3">
    <div class="col-sm-1">
      <button type="button" class="btn btn-primary" (click)="petForm.reset()">
        Clear
      </button>
    </div>
    <div class="col-sm-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

We are going to examine the form directives, attributes, bindings, and events.

• The form tag:
  • It has a template reference variable called #petForm assigned to the ngForm directive, this way we can access the form from the template.
    • We are using it on (ngSubmit) event to pass the FormGroup to the onSubmit function when the user submits the form.
    • We also use it in the clear button to allow resetting the form when clicking it.
• Two input tags:
  • First one:
    • Has id attribute related to for attribute from the label tag.
    • Has name attribute that must be defined when we use [(ngModel)] with and element. When we submit our form value on onSubmit function, the value property name will coincide with the value set on this attribute.
    • [(ngModel)] two-way data binding allows us to have an object on ts file bound directly to our form, so we can not access the form value only from the petForm template reference variable but also from this object. In this case, the previously mentioned name attribute won't have an effect on the form value property name because it will be defined on the object itself as we will see.
    • nameModel template reference variable assigned to the ngModel directive so we can access the implicit input-control.
      • We use it to display the app-validation-message component or not depending on if the control value is valid (nameModel.valid).
    • required attribute tells angular that this field is required so when the field is empty the ng-invalid class will be attached to the field and the defined classed on the styles.scss file will be shown. As we define the app-validation-message component it will be shown also if this control is empty.
    • app-validation-message component that shows the passed message when one of the mentioned conditions is met.
  • The second is similar to the first. Don't have anything special.
• The select tag:
  • It has the multiple attribute that allows selecting multiple values at a time.
• Clear button previously explained.
• Submit button that when is clicked it triggers the ngSubmit event and the form calls onSubmit function where we pass the form.value.

This is the result if the name control is empty (red color on input border and the app-validation-message component visible):

This is the result if any form-control value has changed (brown color on input border):

This is the result if the control has been visited (blue color on the input border):

The ts file related to this html file is the next:

// pets-template-driven.component.ts
import { Component, OnInit } from '@angular/core';
import { Pet } from './pet.model';

@Component({
  selector: 'app-pets-template-driven',
  templateUrl: './pets-template-driven.component.html',
  styleUrls: ['./pets-template-driven.component.scss'],
})
export class PetsTemplateDrivenComponent implements OnInit {
  actualPet: Pet;
  toys: string[];
  constructor() {
    const pet = new Pet('Toby', ['ball', 'teddy'], 'Tom');
    this.actualPet = pet;
    this.toys = ['ball', 'teddy', 'cord', 'bone']
  }

  ngOnInit(): void {}

  onSubmit(petForm: FormGroup) {
    if (petForm.valid) {
      // Two ways of getting form values

      // First one passing as parameter from html. Property names coincide with name attribute of html tags.
      // Check that name property name appears as passedName con console
      console.log(petForm.value);

      // Second one getting the binded model to the form
      console.log(this.actualPet)

      // Property values must coincide but property names can vary depending on the name attributes
    }
  }
}

On the constructor we define the select available options (toys) and a default pet to be displayed when the application is started based on a defined model:

We also see the onSubmit function that will be called when the user clicks the submit button. Here we are accessing the form value in two ways, with the [(ngModel)] two way data binding access (actualPet object) and the value passed on the function as we mentioned earlier. We can use the one we prefer depending on what is our purpose. The only difference will be that two way data bound object won't show the name attribute value as the property name of the form value and the form value passed on the onSubmit function yes. The console.log will be shown when the form validations are met.

This is the result of clicking the submit button:

Bibliography:

• https://angular.io/guide/forms-overview
• https://angular.io/guide/reactive-forms
• https://angular.io/guide/forms

Angular applications can be launched in multiple environments. Most commons are development and production. When we want to launch our application in the development environment we have to type on our console:

ng serve

or

ng serve --configuration=development

If we want to launch it in the production environment we can do it in two ways:

ng build

or

ng build --configuration=production

Angular offers us the customizable scripts object in the package.json file. We can execute previously commented commands running others shorter. When we execute these commands placed in the package.json file, angular looks into the angular.json file to know what has to do with each command.

// This is package.json file
{
  "name": "application-environment",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:prod": "ng serve --configuration=production",
    "build:serve:prod": "ng build --configuration=production; http-server -p 4200 ./dist/application-environment",
    "build:serve:pre": "ng build --configuration=preproduction; http-server -p 4200 ./dist/application-environment",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
...

So let's start with npm run start. On the above piece of code, we see that npm run start executes the command ng serve.

// This is the angular.json file
...
"architect": {
        ...
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "application-environment:build:production"
            },
            "development": {
              "browserTarget": "application-environment:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
...

The builder property targets a development server that provides live reloading. We have two configurations: production and development. Each one has a browserTarget property that points to the architect/build/configurations property of the angular.json file. The default configuration is development so this will be the configuration used. We can use the production configuration by changing the defaultConfiguration property to production or by using the package.json command npm run build:serve:prod.

Next is the architect property of the angular.json file:

// This is angular.json file
...
"architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              ...
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "preproduction": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.pre.ts"
                }
              ],
              ...
            }
          },
          "defaultConfiguration": "production"
        },

When we select the development environment, there is no fileReplacements property in its configuration so by default angular will take the enviroments.ts file located at src/enviroments folder and launch the development server. If we launch the application with production configuration, the command will find the fileReplacements property and instead of using the default environment file it will use the enviroment.prod.ts file.

// This is enviroment.ts file
export const environment = {
  type: "DEVELOPMENT",
  url: "https://swapi.dev/api/people/1"
};

// This is enviroment.prod.ts file
export const environment = {
  type: "PRODUCTION",
  url: "https://swapi.dev/api/people/2"
};

Now if we analyze "npm run build:serve:prod" we see that it executes the command "ng build --configuration=production; http-server -p 4200 ./dist/application-environment". These are two separate commands that will be executed one after each other. The first to execute is "ng build --configuration=production". As with the "npm run start" command let's look into the angular.json file to know what this command does:

// This is angular.json file
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          },
          "configurations": {
            "production": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "preproduction": {
              ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.pre.ts"
                }
              ],
              ...
            }
          },
          "defaultConfiguration": "production"
        },
...

Now instead of looking into the serve property, we look into the build property. In this case the builder property targets [the browser value](Build an Angular application targeting a browser environment) that builds an Angular application targeting a browser environment. As we used the --configuration=production, production will be the configuration used from the angular.json file, and as we see there will be a file replacement with the environment.prod.ts file. The same would occur if we use the --configuration=preproduction but angular would replace the default file with environment.pre.ts file.

The second part of the command is "http-server -p 4200 ./dist/application-environment". This serves the built application in a development server.

Next are some different results depending on the command executed, try yourself:

npm run start

npm run start:prod

npm run build:serve:prod

npm run build:serve:pre

Bibliography:

• https://angular.io/guide/build
• https://www.npmjs.com/package/@angular-devkit/build-angular