Category: Angular

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):

<configuration>
  <system.webServer>
    <!-- These rewrite rules requires the IIS Rewrite module -->
    <rewrite>
      <rules>
        <!-- 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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
        <!-- Adds https scheme if missing for all URLs -->
        <rule name="FQDN to SSL" stopProcessing="true">
          <match url="^(.*)$" />
          <conditions>
            <add input="{HTTPS}" pattern="^OFF$" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" />
        </rule>
      </rules>
    </rewrite>
    <!-- Mime type fix for woff2 font file type -->
    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>

  <!-- 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) -->
  <system.webServer>
    <caching enabled="true">
      <profiles>
        <add extension=".svg" policy="CacheUntilChange"/>
        <add extension=".ico" policy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange"/>
        <add extension=".css" policy="CacheUntilChange"/>
      </profiles>
    </caching>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="5.00:00:00" />
    </staticContent>
  </system.webServer>

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

</configuration>

 

Rxjs debugging subscribers

I wanted to see how many listeners there was for a certain subject, and where they reside in the source code.
Here is how in chrome devtools, put a breakpoint before the subjects .next() call. And inspect the subject:

observers array count = number of “listeners”
FunctionLocation = source code reference

(Context: Angular v11, rxjs)

Introduction to Angular Storybook – a tool for component UI development

Introduction to Storybook for Angular Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Source: Introduction to Storybook

A simpler and smaller Angular starter project

A lot of complaints I heard when starting with Angular are about the sheer amount of files you get even on simple apps. When looking at the default starter template you get from Angular CLI’s ng new command, it’s true that it can be a bit overwhelming if you’re not used to it.

But it doesn’t have to always be that way. In this article, we’ll explore how we can create a smaller and simpler template that’s also easier to grasp for beginners, following the YAGNI principle.

(Angular version 14)
Source: A simpler and smaller Angular starter with ngLite – DEV Community