Kata: Angular, TypeScript, Flux

Project setup

Using an iframe show the Angular bundle. This requires a front-end build, so it cannot be iterated on using literate markdown. Project setup is described in the readme in the angular project .

load the bundle directly or load the dev server version (locally running only) handy if using Angular dev tools or Redux dev tools.

html

<iframe
  id="angular-frame"
  title="Embedded Angular Kata"
  width="500"
  height="500"
  src="angular/my-project/bundle/index.html">
</iframe>

Angular bundles TypeScript and usually Material Design. We add NgRx which is an implementation of the Flux architectural pattern bundled with RxJs, a reactive library. (Note that I have a separate rxjs kata which is embedded directly with no build required, allowing faster iteration.)

Angular is very heavy on structure. After your mockup you sketch out your module and component structure and generate. In this case, we add options to keep the number of files to a minimum (-s uses inline styles, -t inline templates, --flat doesn't create a directory and --skip-tests skips creating the test file.) The Angular module system is unique. It uses TypeScript annotations to finely control what is available to components at runtime. The modules operate as a dependency injector, using constuctors to put examples in there.

# Create the simplest possible scaffold for an Angular app after initial `ng new my-project`
# For timing, `npm install -g gnomon` and then pipe to gnomon like `./gen.sh | gnomon`

# Global components
ng g c home -s -t --flat --skip-tests
ng g c navbar -s -t --flat --skip-tests

# Create a todos module with components
ng g m todos
ng g c todos/todos -m todos -s -t --flat --skip-tests
ng g c todos/todo-add -m todos -s -t --flat --skip-tests
ng g c todos/todo-edit -m todos -s -t --flat --skip-tests

Build with the following command, and serve the bundle:

ng build --output-path bundle

Sudden, massive ng slowdown on Windows/WSL2

I'm experiencing a massive slowdown of all ng commands that I execute my Windows/WSL2/Ubuntu VM. This happened suddenly, and I'm not sure what changed to cause it. The same commands execute quickly on my Ubuntu laptop.

While it's interesting that WSL1 is more performant when working with Windows filesystems, this seems unlikely, but not impossible. The number of dependencies in node_modules has exploded. However, ng seems to hang before doing anything so I'm not convinced that is the problem.

Create a WSL1 version of the VM and see if that helps. wsl --export Ubuntu c:\ubu then wsl --import C:\ubu --version 1 This change took ~1 hr and resulted in a 2x speedup. But it's still slow.
Another possible culprit is IntelliJ, at least indirectly. It's possible that it's done something at the project level and generated another node_modules somewhere that is confusing ng.

Fonts

Angular Material (ng add @angular/material) wants to control typography, but the code it generates requires that the client browser access Google's site at runtime, which is unacceptable:

html

  <!--- DO NOT EXECUTE --->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

The best solution is to not use their fonts, and rely on what's built-in to the browser. This avoids the download (~170KB!), the code complexity, and the FOUT that makes the site worse. If fonts matter so much that the browser fonts aren't good enough, use PDF.

The next best solution is to self-host the fonts (you can download them manually there) and icons (download them here) and add the following css. See Google's guide to using web fonts and how to customize fonts

css

/*** DO NOT EXECUTE ***/
  @font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(./angular/my-project/bundle/material.woff) format('woff');
  }

  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  }

Fontsource

Manual self-hosting is problematic. Treat fonts like a dependency. Enter fontsource. We'll use variable fonts, which is widely supported by modern browsers. We'll use the Fontsource Angular guide.

The Angular Material components want Roboto and Material Symbols. Let's start with Roboto.

npm install @fontsource-variable/open-sans
npm install @fontsource-variable/roboto-flex

Then in app.component.css

css

/*** DO NOT EXECUTE ***/
@import "~@fontsource-variable/open-sans/wght.css";
@import "~@fontsource-variable/roboto-flex/wght.css";


/* in the component */
.open-sans-variable {
  font-family: "Open Sans Variable", sans-serif;
}
.roboto-flex {
  font-family: "Roboto", sans-serif;
}

This worked pretty well! Angular magically includes the woff2 files in the bundle. It remains to be seen if Angular Material picks up Roboto.

The other font we need is material symbols which have slightly different install instructions:

npm install @fontsource-variable/material-symbols-rounded

css

/*** DO NOT EXECUTE ***/
@import "~@fontsource-variable/material-symbols-rounded/wght.css";

.material-symbols-outlined {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

Note that Material Symbols font file is a whopping 665KB over the wire!!! To avoid this there's an svg angular symbols package. But I've spent enough time on this!

Material Components

Google made components. Comes with their own schematics. Install and generate a nav comoponent like so:

ng add @angular/material
ng g @angular/material:navigation material-nav