Angular on bradleycarey.com

From Many Repos to One: An Honest Nx Monorepo Migration Retrospective

Sat, 21 Feb 2026 00:00:00 -0500

Migrating a standalone Angular app to Nx is a one-liner: npx nx@latest init. Migrating many Angular repos to an integrated monorepo is not. We consolidated several large enterprise Angular apps and libraries into a single Nx monorepo in late 2023. Here’s what that actually looked like.

Problem Statement Link to heading

To share components across multiple frontend surfaces (a main web app, a Microsoft Office add-in, and a mobile app), we maintained multiple Angular libraries. Every time we needed to change a shared component, the workflow looked like this:

Nx Angular Component Generation Schematic: Path Does Not Exist

Sun, 06 Oct 2024 15:48:48 -0500

A few years back, I successfully migrated several Angular libraries and applications from individual projects to a monorepo using Nx. Nx is a great tool for managing multiple projects and libraries in a single repository.

Nx provides many schematics to generate code and migrate existing code. One of the most common tasks is generating a new Angular component. However, I encountered an issue where the schematic was unable to resolve the path where it was supposed to generate the code.

Handling Case-Insensitive Query Parameters in Angular

Fri, 15 Dec 2023 13:42:39 -0500

After searching through Google and StackOverflow and finding nothing, I decided to write my own reusable class to handle case-insensitive query parameters in Angular. I hope this helps someone else!

How to Use It Link to heading

Using it is as easy as:

import { ActivatedRoute } from '@angular/router';
import { CaseInsensitiveParamMap } from '../case-insensitive-param-map';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  // subscribe to query params changes:
  this.activatedRoute.queryParams.snapshot.paramMap
    .subscribe((params) => this.handleQueryParamsChanged(new CaseInsensitiveParamMap(params)));
}

private handleQueryParamsChanged(paramMap: CaseInsensitiveParamMap): void {
  const returnUrl = paramMap.get('returnUrl');
  // Returns the value of the first query param named 'returnUrl' case-insensitively
  // See the test suite below for more examples
}

Or if you don’t want to subscribe to changes, you can use the snapshot:

Safely migrate from hash-based routing to modern routing in Angular

Fri, 15 Sep 2023 17:45:40 -0400

If you have an old angular app that is still using hash-based routing via the HashLocationStrategy, you can safely migrate to modern PathLocationStrategy routing without breaking existing bookmarks or SEO.

Add this snippet to your AppComponent > ngOnInit:

this.router.events
  .pipe(filter((event) => event instanceof NavigationStart && /^\/#/.test(event.url)))
  .subscribe((event: NavigationStart) => this.router.navigateByUrl(event.url.replace('/#', '')));

Note that router.navigate will strip any query params. I used router.navigateByUrl instead.

You can now safely turn off useHash:

RouterModule.forRoot(routes, { useHash: false })

Now, if you hit a URL like https://example.com/#/foo/bar, the router will automatically redirect to https://example.com/foo/bar. This will allow you to incrementally migrate your app to modern routing without breaking existing links.

Serving an Angular CLI App over HTTPS Made Easy

Thu, 24 Aug 2023 10:49:47 -0400

I’ve discovered a simpler method than those discussed in this Stack Overflow post for serving an Angular CLI app over HTTPS using office-addin-dev-certs. Don’t be fooled by the name, these certs work for any local development!

Generate the certificates by running the following command and click “Yes” to trust them when prompted:
- npx office-addin-dev-certs install --days 365
You’ll find the generated certificates (localhost.crt and localhost.key) in your home folder ~\.office-addin-dev-certs
- Copy them to your angular project: cp ~\.office-addin-dev-certs\localhost.* .
- Don’t forget to add them to your .gitignore
Use these certificates with Angular by running:
- Run ng serve --ssl --ssl-key localhost.key --ssl-cert localhost.crt

Alternatively, add them to your angular.json so you can run ng serve as usual:

Bypass Angular interceptors using HttpContext factory + HttpContextTokens

Tue, 15 Aug 2023 00:37:53 +0000

If the HttpClient is being used within a dependency outside of your control (such as a 3rd party lib) you can still use the HttpContextTokens that were added in Angular v12 by using a HttpClient factory provider. You can scope this to individual modules or components using the providers array:

1. Add DisableInterceptorHandler + token (disable-interceptor.handler.ts) Link to heading

import { HttpContextToken, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

export const DISABLE_INTERCEPTORS = new HttpContextToken<boolean>(() => false);

@Injectable()
export class DisableInterceptorHandler extends HttpHandler {
  constructor(private httpHandler: HttpHandler) {
    super();
  }

  handle(req: HttpRequest<unknown>) {
    return this.httpHandler.handle(
      req.clone({
        context: req.context.set(DISABLE_INTERCEPTORS, true),
      }),
    );
  }
}

2. Provide the handler in either your `component`/`module`/`service`/whatever `providers` array Link to heading

  providers: [
    DisableInterceptorHandler,
    {
      provide: HttpClient,
      useFactory: (handler: DisableInterceptorHandler) => new HttpClient(handler),
      deps: [DisableInterceptorHandler],
    },
  ],

3. Enforce the HttpContextToken in your interceptor Link to heading

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { DISABLE_INTERCEPTORS } from './disable-interceptor.handler';

@Injectable()
export class AuthenticationInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (request.context.get(DISABLE_INTERCEPTORS) === true) {
      return next.handle(request);
    }

    return next.handle(request).pipe(
      // add your typical interceptor logic
    );
  }
}

Make dynamic PrimeNG table columns conditionally editable

Tue, 10 May 2022 16:11:00 -0400

The PrimeNG table component is a powerful data visualization tool and is a great free alternative to AG Grid.

Table columns can be defined dynamically using the *ngFor directive. However, if you do this there is no apparent way to conditionally mark a column as editable!

There is actually an undocumented pEditableColumnDisabled boolean directive that can be used to control if a cell is editable or not. The only documented directives are pEditableColumn and pEditableColumnField.

NgBootstrap Datepicker - US Date Formatter - Improved edition

Fri, 18 Sep 2020 00:00:00 +0000

In a previous post, I outlined my strategy of using the ng-bootstrap datepicker with a formatter for US dates (mm/dd/yyyy).

In this post, I will provide an updated version. Check the specs below for specifics on improvements. Among these are:

Allows basically any separator (including none at all!)
Works with or without zero padding months or days
Allows entry of double digit years, which will then assume 19XX or 20XX depending on the breakpoint that is set (40 is used below - check tests for details)

us-date-parser-formatter.ts Link to heading

import * as _ from 'lodash-es';
import { NgbDateStruct, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class DateParserFormatter extends NgbDateParserFormatter {
  private shortYearBreakpoint = 40;

  parse(value: string): NgbDateStruct {
    if (!value) { return null; }

    let dateParts: string[];
    if (/^(?:\d{6}|\d{8})$/.test(value)) {
      dateParts = /(\d{2})(\d{2})(\d{2}|\d{4})$/.exec(value).slice(1, 4);
    } else if (/^\d{1,2}[-\/]\d{1,2}[-\/](?:\d{2}|\d{4})$/.test(value)) {
      dateParts = value.split(/[-\/]/);
    } else {
      return null;
    }

    let year = _.toInteger(dateParts[2]);
    if (year < 100) {
      year += year <= this.shortYearBreakpoint ? 2000 : 1900;
    }
    return { year, month: _.toInteger(dateParts[0]), day: _.toInteger(dateParts[1]) } as NgbDateStruct;
  }

  format(date: NgbDateStruct): string {
    return date ? `${_.padStart(date.month.toString(), 2, '0')}/${_.padStart(date.day.toString(), 2, '0')}/${date.year}` : '';
  }
}

us-date-parser-formatter.spec.ts Link to heading

import { DateParserFormatter } from './date-parser-formatter';

describe('DateParserFormatter', () => {
  let parser: DateParserFormatter;

  beforeEach(() => {
    parser = new DateParserFormatter();
  });

  describe('When a string of the format m/d/yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1/2/34')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mm/dd/yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01/02/1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m/d/yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1/2/1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m-d-yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1-2-34')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mm-dd-yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01-02-1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m-d-yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1-2-1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmddyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('010234')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmdd19yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01021934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmdd20yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01022034')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When an invalid string with alpha characters', () => {
    it('it returns null.', () => {
      expect(parser.parse('abc')).toBeNull();
    });
  });
  describe('When a valid string with additional invalid chars', () => {
    it('it returns null.', () => {
      expect(parser.parse('123456abc')).toBeNull();
    });
  });
  describe('When an invalid string with numeric characters', () => {
    it('it returns null.', () => {
      expect(parser.parse('12345')).toBeNull();
    });
  });
  describe('When a struct is formatted', () => {
    it('it returns a string in the format mm/dd/yyyy', () => {
      expect(parser.format({ year: 1934, month: 1, day: 2 })).toBe('01/02/1934');
    });
  });
  describe('When a falsy value is formatted', () => {
    it('it returns an empty string.', () => {
      expect(parser.format(undefined)).toBe('');
    });
  });
  describe('When a short year is greater than 40', () => {
    it('it assumes 1900s.', () => {
      expect(parser.parse('1/2/41')).toEqual({ year: 1941, month: 1, day: 2 });
    });
  });
  describe('When a short year is less than or equal to 40', () => {
    it('it assumes 2000s.', () => {
      expect(parser.parse('1/2/40')).toEqual({ year: 2040, month: 1, day: 2 });
    });
  });
});

NgBootstrap Datepicker - US Date Formatter mm/ff/yyyy

Thu, 18 Jun 2020 00:00:00 +0000

If you have used Angular and Bootstrap then you are probably familiar with ng-bootstrap.

The default formatter that the datepicker uses is the ISO8601 format (yyyy-mm-dd). The docs have a sample that show you how to format the date as dd/mm/yyyy. I have adapted that sample to use the format that is the most widely used in the US (mm/dd/yyyy). Hope you find it useful!

us-date-parser-formatter.spec.ts Link to heading

import { UnitedStatesDateParserFormatter } from './us-date-parser-formatter';

describe('UnitedStatesDateParserFormatter', () => {
  let sut: UnitedStatesDateParserFormatter;

  beforeEach(() => { sut = new UnitedStatesDateParserFormatter(); });

  describe('Parsing', () => {
    it('should parse null undefined and empty string as null', () => {
      expect(sut.parse(null as any)).toBeNull();
      expect(sut.parse(undefined as any)).toBeNull();
      expect(sut.parse('')).toBeNull();
      expect(sut.parse('   ')).toBeNull();
    });

    it('should parse valid date', () => {
      expect(sut.parse('05/12/2016')).toEqual({ year: 2016, month: 5, day: 12 });
    });

    it('should parse non-date as null', () => {
      expect(sut.parse('foo/bar/baz')).toBeNull();
      expect(sut.parse('2014/bar')).toBeNull();
      expect(sut.parse('2014/11/12/15')).toBeNull();
      expect(sut.parse('5/7')).toBeNull();
    });
  });

  describe('Formatting', () => {
    it('should format null and undefined as an empty string', () => {
      expect(sut.format(null)).toBe('');
      expect(sut.format(undefined as any)).toBe('');
    });

    it('should format a valid date', () => {
      expect(sut.format({ year: 2016, month: 10, day: 15 })).toBe('10/15/2016');
    });

    it('should format a valid date with padding', () => {
      expect(sut.format({ year: 2016, month: 10, day: 5 })).toBe('10/05/2016');
    });

    it('should return empty string for invalid dates', () => {
      expect(sut.format({ year: 2016, month: NaN, day: undefined } as any)).toBe('');
      expect(sut.format({ year: 2016, month: null, day: 0 } as any)).toBe('');
      expect(sut.format({ year: null, month: null, day: 1 } as any)).toBe('');
    });
  });
});

us-date-parser-formatter.ts Link to heading

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import * as _ from 'lodash-es';

@Injectable()
export class UnitedStatesDateParserFormatter extends NgbDateParserFormatter {

  parse(value: string): NgbDateStruct | null {
    if (value != null) {
      const parts = value.split('/');
      if (parts.length === 3 && this.isNumber(parts[0]) && this.isNumber(parts[1]) && this.isNumber(parts[2])) {
        return { month: _.parseInt(parts[0]), day: _.parseInt(parts[1]), year: _.parseInt(parts[2]) };
      }
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date && this.isNumber(date.day) && this.isNumber(date.month) && this.isNumber(date.year)
      ? `${this.padNumber(date.month)}/${this.padNumber(date.day)}/${date.year}`
      : '';
  }

  private isNumber(value: any): value is number {
    return !isNaN(_.parseInt(value));
  }

  private padNumber(value: number) {
    if (this.isNumber(value)) {
      return `0${value}`.slice(-2);
    } else {
      return '';
    }
  }
}

2023 Update Link to heading

Note the usage of the lodash parseInt function in the above code. This can be replaced by the ES5 version of parseInt in modern browsers.

Angular on bradleycarey.com

From Many Repos to One: An Honest Nx Monorepo Migration Retrospective

Problem Statement Link to heading

Nx Angular Component Generation Schematic: Path Does Not Exist

Handling Case-Insensitive Query Parameters in Angular

How to Use It Link to heading

Safely migrate from hash-based routing to modern routing in Angular

Serving an Angular CLI App over HTTPS Made Easy

Bypass Angular interceptors using HttpContext factory + HttpContextTokens

1. Add DisableInterceptorHandler + token (disable-interceptor.handler.ts) Link to heading

2. Provide the handler in either your component/module/service/whatever providers array Link to heading

3. Enforce the HttpContextToken in your interceptor Link to heading

Make dynamic PrimeNG table columns conditionally editable

NgBootstrap Datepicker - US Date Formatter - Improved edition

us-date-parser-formatter.ts Link to heading

us-date-parser-formatter.spec.ts Link to heading

NgBootstrap Datepicker - US Date Formatter mm/ff/yyyy

us-date-parser-formatter.spec.ts Link to heading

us-date-parser-formatter.ts Link to heading

2023 Update Link to heading

2. Provide the handler in either your `component`/`module`/`service`/whatever `providers` array Link to heading