Host and deploy Angular web app using Azure and Github

I am using Angular v17 and node v18.
In simple steps;
Goto azure portal.
Create a new resource of type “Static Web App”
I choose Github as Deployment source.

Regarding Angular v17, I had problems with the github deployment build actions:

  • Node was configured as v16 but angular v17 needs node v18
  • path to index.html for dist build could not be found

After Azure has created the static web app for Github deployment the following file is pushed into the repo:


I hade to set the following values correctly:

app_location: "./" # App source code path
output_location: "./dist/gps-tracker/browser" # Built app content directory - optional

The output location should point to where the index.html file is located.
You should change the ‘gps-tracker’ to your application name. To find out exactly run ‘ng build’ locally and look into the created dist folder.

Regarding setting node version to 18: I added the following in the yml file:

  NODE_VERSION: '18.x'

Print screen of node version setting:

Four ways of listening to DOM events in Angular (Part 2: @HostListener)

So now how about listening to events on the host element that wraps the component’s template? How can we do that properly in Angular apps? That’s the very question we will answer in this article. Before diving directly into listening to DOM events on a host element, I think we need to touch on what a host element is. The concept of host element applies not only to components but also attribute directives.

Source: Four ways of listening to DOM events in Angular (Part 2: @HostListener)

Top 5 Tips for Angular Development With WebStorm | JetBrains

No matter how much familiarity you have with Angular, or how you feel about it, JetBrains IDEs can make your experience with this framework much better. In today’s FOMO digest, we’ll tell you about the features for working in Angular that you can find in JetBrains IDEs, such as WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand, and RubyMine.

Source: FOMO Digest #2: Top 5 Tips for Angular Development With JetBrains IDEs | The WebStorm Blog

NgRx – global state management for Angular applications – Getting started

Store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

Key concepts
Actions describe unique events that are dispatched from components and services. State changes are handled by pure functions called reducers that take the current state and the latest action to compute a new state. Selectors are pure functions used to select, derive and compose pieces of state. State is accessed with the Store, an observable of state and an observer of actions.

Local state management
NgRx Store is mainly for managing global state across an entire application. In cases where you need to manage temporary or local component state, consider using NgRx ComponentStore.

Source: NgRx – @ngrx/store

Rendering cycle in Angular applications — browser, angular and zone.js interaction | Angular In Depth

Source: Rendering cycle in Angular applications — browser, angular and zone.js interaction | by Max Koretskyi | Angular In Depth | Jan, 2023 | Medium

Running Angular on an IIS web server

Step 1.
Build your angular application for “production”:
ng build –dist -> output entire site to root/dist folder copy that folder to your IIS website folder.

Step 2.
IIS uses a file called web.config to setup some configuration for a website.
Make sure you have something similar as below in a web.config file in the site root folder (a typical Angular config scenario):

    <!-- These rewrite rules requires the IIS Rewrite module -->
        <!-- Support for Angular internal url routing system (routing module) -->
        <rule name="Angular routing" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <action type="Rewrite" url="/" />
        <!-- Adds https scheme if missing for all URLs -->
        <rule name="FQDN to SSL" stopProcessing="true">
          <match url="^(.*)$" />
            <add input="{HTTPS}" pattern="^OFF$" />
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" />
    <!-- Mime type fix for woff2 font file type -->
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />

  <!-- Its okay to cache these static files, index.html will include cache busting paths for Angular js and css files. (when building with --dist param) -->
    <caching enabled="true">
        <add extension=".svg" policy="CacheUntilChange"/>
        <add extension=".ico" policy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange"/>
        <add extension=".css" policy="CacheUntilChange"/>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="5.00:00:00" />

  <!-- Make sure index.html is never cached -->
  <location path="index.html">
        <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
          <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
          <add name="Pragma" value="no-cache" />
          <add name="Expires" value="-1" />