LayZeeDK’s gists

LayZeeDK / angular-cli-node-js-typescript-rxjs-compatiblity-matrix.csv

Last active July 13, 2025 02:40

Angular CLI, Angular, Node.js, TypeScript, and RxJS version compatibility matrix. Officially part of the Angular documentation as of 2023-04-19 https://angular.io/guide/versions

Angular CLI version	Angular version	Node.js version	TypeScript version	RxJS version
~16.0.0	~16.0.0	^16.13.0 \|\| ^18.10.0	>=4.9.5 <5.1.0	^6.5.5 \|\| ^7.4.0
~15.2.0	~15.2.0	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	>=4.8.4 <5.0.0	^6.5.5 \|\| ^7.4.0
~15.1.0	~15.1.0	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	>=4.8.4 <5.0.0	^6.5.5 \|\| ^7.4.0
~15.0.5	~15.0.4	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	~4.8.4	^6.5.5 \|\| ^7.4.0
~14.3.0	~14.3.0	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.9.0	^6.5.5 \|\| ^7.4.0
~14.2.0	~14.2.0	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.9.0	^6.5.5 \|\| ^7.4.0
~14.1.3	~14.1.3	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.8.0	^6.5.5 \|\| ^7.4.0
~14.0.7	~14.0.7	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.8.0	^6.5.5 \|\| ^7.4.0
~13.3.0	~13.3.0	^12.20.2 \|\| ^14.15.0 \|\| ^16.10.0	>=4.4.4 <4.7.0	^6.5.5 \|\| ^7.4.0

LayZeeDK / angular-layout-routes.ts

Created November 15, 2018 23:31

Angular routes with layout options in route data

	const routes: Routes = [
	{
	path: '',
	redirectTo: '/dashboard',
	pathMatch: 'full',
	},
	{
	path: '',
	component: MainLayoutComponent,
	children: [

LayZeeDK / hero-search.component.ts

Created December 4, 2018 06:57

Hero search: Mixed component model

	import { Component, OnInit } from '@angular/core';
	import { Observable, Subject } from 'rxjs';
	import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

	import { Hero } from '../hero';
	import { HeroService } from '../hero.service';

	@Component({
	selector: 'app-hero-search',
	templateUrl: './hero-search.component.html',

LayZeeDK / hero-search.container.ts

Created December 4, 2018 06:59

Hero search: Container component model

	import { ChangeDetectionStrategy, Component } from '@angular/core';
	import { Observable, Subject } from 'rxjs';
	import { switchMap } from 'rxjs/operators';

	import { Hero } from '../hero';
	import { HeroService } from '../hero.service';

	@Component({
	changeDetection: ChangeDetectionStrategy.OnPush,
	selector: 'app-hero-search',

LayZeeDK / hero-search.component.ts

Created December 4, 2018 07:01

Hero search: Broken, partial implementation in mixed component model

	import { Component, OnInit } from '@angular/core';
	import { Observable } from 'rxjs';
	import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

	import { Hero } from '../hero';

	@Component({
	selector: 'app-hero-search',
	templateUrl: './hero-search.component.html',
	styleUrls: [ './hero-search.component.css' ]

LayZeeDK / hero-search.presenter.ts

Created December 4, 2018 07:02

Hero search: Presenter

	import { Observable, Subject } from 'rxjs';
	import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

	export class HeroSearchPresenter {
	private searchTerms: Subject<string> = new Subject();
	searchTerms$: Observable<string> = this.searchTerms.pipe(
	// wait 300ms after each keystroke before considering the term
	debounceTime(300),

	// ignore new term if same as previous term

LayZeeDK / hero-search.component.ts

Created December 4, 2018 07:15

Hero search: Presentational component model with UI behaviour

	import {
	Component,
	EventEmitter,
	Input,
	OnDestroy,
	OnInit,
	Output,
	} from '@angular/core';
	import { Observable, Subject } from 'rxjs';
	import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';

LayZeeDK / hero-search.component.ts

Created December 4, 2018 07:19

Hero search: Presentational component model

	import {
	ChangeDetectionStrategy,
	Component,
	EventEmitter,
	Input,
	OnDestroy,
	OnInit,
	Output,
	} from '@angular/core';
	import { Subject } from 'rxjs';

LayZeeDK / core.module.ts

Last active December 30, 2018 23:47

Pre-Angular 6 singleton service

	import { HttpClientModule } from '@angular/common/http';
	import { NgModule } from '@angular/core';

	import { PreSixModule } from './pre-six.module.ts';

	@NgModule({
	imports: [
	HttpClientModule,
	PreSixModule,
	],

LayZeeDK / pre-six.module.ts

Created December 11, 2018 00:01

The forRoot pattern for singleton services

	import { ModuleWithProviders, NgModule } from '@angular/core';

	import { MyComponent } from './my.component';
	import { PreSixSingletonService } from './pre-six-singleton.service';

	@NgModule({
	declarations: [
	MyComponent,
	],
	})

Lars Gyrup Brink Nielsen LayZeeDK