DEV Community: Oleksandr

Inject() over constructor DI cases in Angular

Oleksandr — Mon, 14 Apr 2025 13:53:55 +0000

This article is created by heavily using Claude.ai.

The article banner is a picture of Graphue

Angular's Dependency Injection (DI) system is powerful, but knowing when to use constructor injection versus the newer inject() function can significantly improve your code quality. With the introduction of runInInjectionContext(), we now have even more control over dependency resolution.

In this article, we'll explore five key scenarios where inject() (sometimes with runInInjectionContext) provides better solutions than traditional constructor injection.

1. Standalone Functions (Route Guards, Interceptors)

Problem: Constructor injection requires class wrappers for simple functions.

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    return this.authService.isLoggedIn() || this.router.navigate(['/login']);
  }
}

Solution: inject() enables dependency access in functions.

import { inject } from '@angular/core';
import { Router } from '@angular/router';

export function authGuard(): boolean {
  const router = inject(Router);
  const authService = inject(AuthService);

  return authService.isLoggedIn() || router.navigate(['/login']);
}

Key Benefits:

less boilerplate code
No artificial class creation
Better tree-shakability
Now the Angular-recommended approach.
As you may notice it is used with functional route guards.

2. Factory Functions (Creating Customized Services)

As for me - this case is similar to previous one but have different application point - creating configurable service instances in functional way.

import { inject, InjectionToken } from '@angular/core';

// Token for different logger instances
export const USER_LOGGER = new InjectionToken<Logger>('user.logger');
export const SYSTEM_LOGGER = new InjectionToken<Logger>('system.logger');

// A factory that creates specialized logger instances
export function createLogger(category: string, minLevel: 'debug'|'info'|'error') {
  const configService = inject(ConfigService);

  return {
    debug: (msg: string) => {
      if (minLevel === 'debug' && configService.isDebugEnabled) {
        console.log(`[${category}][DEBUG] ${msg}`);
      }
    },
    info: (msg: string) => {
      if (minLevel === 'debug' || minLevel === 'info') {
        console.log(`[${category}][INFO] ${msg}`);
      }
    },
    error: (msg: string) => {
      console.error(`[${category}][ERROR] ${msg}`);
    }
  };
}

// Creating provideFunction
export function provideUserLogger(minLevel: 'debug'|'info'|'error') {
  return {
    provide: USER_LOGGER,
    useFactory: () => createLogger('USER', minLevel)
  }
}

export function provideSystemLogger(minLevel: 'debug'|'info'|'error') {
  return {
    provide: SYSTEM_LOGGER,
    useFactory: () => createLogger('SYSTEM', minLevel)
  }
}

// Register in config file which will be used for Angular pp bootstrapping
export const appConfig: ApplicationConfig = {
  providers: [
    // Other providers...
    ConfigService,
    provideUserLogger('info'),
    provideSystemLogger('error')
  ]
};

Well, remembering to provide ConfigService to be able to use SYSTEM_LOGGER and USER_LOGGER providers is not very convenient, so better to modify provideSystemLogger and provideUserLogger to do that for us:

export function provideUserLogger(minLevel: 'debug'|'info'|'error') {
  return [
    ConfigService,
    {
    provide: USER_LOGGER,
    useFactory: () => createLogger('USER', minLevel),
  }]
}

export function provideSystemLogger(minLevel: 'debug'|'info'|'error') {
  return [
    ConfigService,
    {
    provide: SYSTEM_LOGGER,
    useFactory: () => createLogger('SYSTEM', minLevel),
  }]
}

Here is a playground.

3. Lazy Injection (On-Demand Service Loading)

Constructor injection instantiates all services upfront, even if they’re rarely used. inject() allows delayed injection.

It work by using the runInInjectionContext function. This function lets you create an injection context at runtime, allowing inject() to be called outside the component initialization.

import { Component, inject, Injector, runInInjectionContext } from '@angular/core';
import { HeavyDataService } from './services';

@Component({
  selector: 'app-heavy',
  template: '...'
})
export class HeavyComponent {
  // Store the injector itself
  private injector = inject(Injector);

  // Service is not injected at initialization

  private loadHeavyData() {
    // Create injection context when needed
    return runInInjectionContext(this.injector, () => {
      // Now we can safely use inject()
      const heavyService = inject(HeavyDataService);
      return heavyService.fetchData();
    });
  }

  onUserAction() {
    // Heavy service only injected when this is called
    const data = this.loadHeavyData();
    // Process data...
  }
}

Looks good, doesn't it? Until my friend told me that to make HeavyDataService really lazy we need to use import O_o:

  private loadHeavyData() {
    // Create injection context when needed
    return runInInjectionContext(this.injector, () => {
      // Now we can safely use inject()
      return import('./services').then(({ HeavyDataService }) => {
      const heavyService = inject(HeavyDataService);
      return heavyService.fetchData();
    });
  }

4. Multi-Level Inheritance (Avoiding Constructor Hell)

TBH I am not a fan of inheriting component classes in Angular (composition over inheritance). I think it brings more mess than DRY benefits. But if you like it:

@Component({...})
export class BaseComponent {
  protected readonly router = inject(Router);
}

@Component({...})
export class MiddleComponent extends BaseComponent {
  protected readonly userService = inject(UserService);
}

@Component({...})
export class ChildComponent extends MiddleComponent {
  // Has access to both `router` and `userService`
  // No complex constructor chaining needed!
}

Benefits:

No super() boilerplate.
Cleaner, more maintainable inheritance.
A child class can override a parent’s injected service by using inject() with the same token, creating its own instance.

5. Dynamic Providers (Runtime Dependency Switching)

Constructor injection requires static dependencies. inject() enables dynamic service selection
This case is very close to example #3 with Lazy service instantiation but brings more conditional logic to the previous example.

import { Component, inject, Injector, runInInjectionContext } from '@angular/core';
import { FeatureFlagService, NewImplementationService, LegacyImplementationService } from './services';

@Component({
  selector: 'app-dynamic',
  template: '...'
})
export class DynamicComponent {
  private injector = inject(Injector);
  private featureFlag = inject(FeatureFlagService);

  // Don't inject services yet
  private service: any;

  constructor() {
    // Get the right service based on feature flag
    this.service = this.getService();
  }

  private getService() {
    return runInInjectionContext(this.injector, () => {
      // Now we can conditionally inject
      if (this.featureFlag.isNewFeatureEnabled) {
        return inject(NewImplementationService);
      } else {
        return inject(LegacyImplementationService);
      }
    });
  }

  doSomething() {
    this.service.method();
  }
}

6. Type Inference with inject() vs Constructor DI

When using InjectionTokens with constructor DI, you need to manually specify the type. Even more: you can get the type annotation wrong. Angular/TypeScript doesn't check whether the type annotation matches the type of the InjectionToken/class.

// Define a token with a type
const CONFIG = new InjectionToken<AppConfig>('app.config');

@Component({...})
class MyComponent {
  constructor(
    // Must manually specify the type here
    @Inject(CONFIG) private config: AppConfig
  ) {}
}

Moreover, Constructor parameter decorators are not part of the ECMAScript Decorators standard. They will be unsupported once the experimentalDecorators option is removed from the TypeScript compiler

The inject() function automatically infers the correct type from the token:

typescript// Define a token with a type
const CONFIG = new InjectionToken<AppConfig>('app.config');

@Component({...})
class MyComponent {
  // Type is automatically inferred as AppConfig
  private config = inject(CONFIG);

  ngOnInit() {
    // TypeScript knows this is AppConfig
    console.log(this.config.apiUrl);
  }
}

7. Changes in ES2022 and future deprecation of 'useDefineForClassFields' compiler option in typescript.

This info was introduced by Jeremy Elbourn (team lead of Angular team) in github issue comment:

Additionally, we're adding one new recommendation: Prefer the inject function over constructor parameter injection

We're adding this new recommendation in light of the introduction of class fields in ECMAScript 2022.

Next text is copied from Jeremy Elbourn's github comment:

Here is a basic example:

@Component({ /* ... */ })
export class UserProfile {
  private user = this.userData.getCurrent();

  constructor(private userData: UserData) { }
}

This example works just fine when TypeScript emits ECMAScript versions less than ES2022. In these versions, the compiled JavaScript looks like this:

// Emitting ES2017
export class UserProfile {
    constructor(userData) {
        // The field initializer is inlined into the constructor
        this.userData = userData;
        this.user = this.userData.getCurrent();
    }
}

However, in ES2022 with the useDefineForClassFields option, the output looks like this:

// Emitting ES2022
export class UserProfile {
    userData;
    user = this.userData.getCurrent(); // Error! userData is not yet initialized!
    constructor(userData) {
        this.userData = userData;
    }
}

This output throws an error because the field initializer runs before the constructor and tries to use the injected dependency before it's available. To work around this with constructor injection, you would write your code like this:

@Component({ /* ... */ })
export class UserProfile {
  // Field declaration is separated from initialization.
  private user: User;

  constructor(private userData: UserData) {
    this.user = userData.getCurrent();
  }
}

Many developers find the separation of field declaration and initialization to be undesirable. Fortunately, the inject function neatly sidesteps this problem:

@Component({ /* ... */ })
export class UserProfile {
  private userData = inject(UserData);
  private user = this.userData.getCurrent();
}

Appendix: Situations Where inject() Won't Work in Angular

1. Outside Injection Context (more here)

Here are particular cases:

a) In Asynchronous Code

@Component({...})
class MyComponent {
  constructor() {
    // This will fail
    setTimeout(() => {
      const service = inject(MyService); // ERROR
    }, 1000);
  }
}

b) In Event Handlers

@Component({
  template: '<button (click)="handleClick()">Click</button>'
})
class MyComponent {
  handleClick() {
    // ERROR: No injection context in event handler
    const service = inject(MyService);
  }
}

c) In Subscription Callbacks

@Component({...})
class MyComponent {
  constructor() {
    const observable = inject(DataService).getData();

    observable.subscribe(data => {
      // ERROR: No injection context in subscription callback
      const logger = inject(LoggerService);
      logger.log(data);
    });
  }
}

d) In Standalone Functions Without runInInjectionContext

// Standalone utility function
export function formatData(data: any) {
  // ERROR: No injection context
  const formatter = inject(FormatterService);
  return formatter.format(data);
}

e) inject(...) won't work in ngOnInit method without runInInjectionContext.

  // doesn't work
  ngOnInit(): void {
    // We need to use runInInjectionContext here
    this.serviceB = inject(MyService);
  }

// works  
  ngOnInit(): void {
    runInInjectionContext(this.injector, () => {
      this.serviceB = inject(MyService);
    });
  }

Actually, all the cases above are solved by wrapping in runInInjectionContext helper function.

2. In Regular (Non-Angular) Classes

// Regular class, not managed by Angular DI
class RegularClass {
  constructor() {
    // ERROR: No injection context
    const service = inject(SomeService);
  }
}

Final Verdict

Use constructor injection for standard component/service DI but consider moving to inject() if you plan to migrate to es2022.
Use inject() for edge cases like functions, factories, lazy loading, inheritance, and dynamic providers

How I cleaned my MacBookPro 2015 and released 50Gb of disk space

Oleksandr — Thu, 24 Oct 2024 13:11:42 +0000

Introduction

One perfect day I noticed that my system disk is out of space although I did not expect it to happen so fast (7 years is not a long time, no-no).
Here is how you can check your disk as well:

But anyway, after googling and applying some tips and tricks I decided to share my way of mac disk cleanup.

Hadi gidelim (Let's go - turkish)

Plz apply at your own risk. It may harm your laptop, be sure you are not deleting crucial system or personal files.

1. Outdated node_modules

If you do not delete old projects which you git-cloned, npm-installed and ran on your computer - you may be surprised how much space to may take.
To find out open Finder and run search with such statement:

kind:Folders node_modules

After search finish, select all folders, right click with mouse and chose "Get [summary] info" to calculate total space:

And 4Gb - is not that small.

After that you can check each of them by right-clicking and selecting "Show in enclosing folder"

and delete if it is a project you don't plan to run anymore.

2. npm cache cleanup

If you do not clean npm cache - it may contain may outdated packages.
So just run

npm cache clean -f

Prior to this you can check how much space it takes. Open a terminal:

cd ~/.npm
du -h

(And this is a value after cleanup was done recently).
So cleaning npm cache from time to time is not a bad idea.

3. Old Docker related files

If you use Docker some old images may stay on a disk so better to get rid of them:

docker system prune -a

4. Docker.raw file

Docker for Mac stores containers and images in a single large file named Docker.raw.
To reduce its side after prun open Docker Desctop preferences and then under 'Resources'->'Advanced' setup Disk image size (my default was 64Gb!)

5. Terraform cache files.

If you use Terraform to rollout infrastructure (or at least passed some Terraform video course) do not forget to remove .terraform cache folder in each project. It is really big

6. Microsoft OneNote cache

If you use Microsoft OneNote on Mac - it keeps local backup (although it is stored already in a cloud).
We can a) turn backup off and b) remove it.

a) How to turn it off?
Open System Preferences

Choose TimeMachine on the panel. Uncheck the checkbox "Backup Automatically"

Well, actually you just turned off the whole Mac backup, so think twice.

b) Now let's remove the local OneNote backup
Finder -> Go -> Go to folder and enter: ~/Library/Containers

And then navigate to
/Users/oposhtaruk/Library/Containers/com.microsoft.onenote.mac/Data/Library/Application Support/Microsoft User Data/OneNote/15.0
and remove folder Backup.

7. Remove old Google Cache.

There are some old Google Cache files in a folder
/Users/oposhtaruk/Library/Application Support/Google/Chrome/Default.

Go there in a terminal

cd "/Users/oposhtaruk/Library/Application Support/Google/Chrome/Default"

And run du command to output the biggest folders there:

sudo du -h -d2 | grep G

Remove any folder that have Cache in their name (do this for your own risk, I did with no consequences)

8. Applications cache cleanup.

Check cache folders of old uninstalled programs (or even existing ones but with extra-large outdated cache) with such terminal commands:

cd ~/Library/Caches
sudo du -h -d2 | grep G

Delete the biggest folders or folders of applications that you uninstalled.

9 Edge Updater Files

Btw I don't why it makes so much space.
But here we are:

cd ~/Library/Application Support/Microsoft/EdgeUpdater/apps/
sudo du -h -d2 | grep G

I just deleted all subfolders in ./EdgeUpdater/apps/msedge-canary

And here we are! Some GB's of space are freed and we can continue ~~wasting~~ using it again.

This article is a part of my own learning process. If you found some wrong or partially wrong statement — feel free to correct me in comments.

Let’s keep in touch on Twitter!

Cheers!

Angular CLI flows. Big picture.

Oleksandr — Fri, 01 May 2020 06:01:11 +0000

Builders, custom typescript transformers, custom tslint rules, schematics — how not to be overwhelmed and lay it all out in your head?

I don't know how about you but I got confused with a variety of tools that Angular CLI provides for some not straightforward Angular environment tasks. Builders, schematics, typescript transformers, custom tslint rules, AST — what are these all about, why do we need them and when do we have to use them? My brain was bleeding…

At last, I found a time to dig deeper and sort information about these tools (Hooray!)

Let's review them one by one.

(Angular CLI 9.x codebase is used).

Builders

What are builders in Angular?

In Angular builders are used to do some routine tasks: build code, run lint, run unit tests, deploy code to host-provider.

A number of Angular CLI commands run a complex process on your code, such as linting, building, or testing. The commands use …builders, which apply another tools to accomplish the desired task.

Angular provides … builders that are used by the CLI for commands such as ng build, ng test, and ng lint. Default target configurations … can be found (and customized) in the "architect" section of the workspace configuration file, angular.json.

You can also extend and customize Angular by creating your own builders, which you can run using the ng run CLI command.

https://angular.io/guide/cli-builder

Let’s start with understanding what builders are used for and then explore how they are implemented.

If you run ng build command — Angular CLI actually runs the builder handler function ( build in our case). Let’s go step by step and see what actually goes on behind the scenes.

*Don't forget that your monorepo project can have a few applications, and in angular.json you specify builder for each specific project. And to start builder for a concrete project with Angular CLI you should add project name to the command, for example: ng build app1 (you can read more in my monorepo article here)

Read config in angular.json and find respective builder (projects->projectName->architect-> build-> builder)

"builder": "@angular-devkit/build-angular:browser", // original

OR

"builder": "@angular-builders/custom-webpack:browser", // custom

Here is code of build-angular:browser builder.

Create a builder instance and run it

export default createBuilder<json.JsonObject & BrowserBuilderSchema>(buildWebpackBrowser);

The builder runs its standard tasks:

a) assertCompatibleAngularVersion

b) buildBrowserWebpackConfigFromContext and runWebpack (webpack starts typescript compiler for your code)

c) copyAssets

d) generateBundleStats

e) generate index.html

f) Apply service worker if needed

and we get bundle files (index.html, css, js files in ./dist folder)

So what are builders used for?

Actually, they can be used for everything about your codebase: build, dev-server, run unit tests, run linter, etc

Now you can assume what ng add command does — among many other things it adds new records to angular.json file (adding a new builder) — we will talk about ng add a bit later.

Let's run ng add @angular/fire in our project and check how angular.json is changed:

deploy builder was added

As you can see — a new deploy builder was added (so we can do ng deploy now for our project to upload bundled files to FireBase hosting).

Angular CLI standard builders

As you can see from picture above — standard Angular CLI builders are located in @angular-devkit package which contains build-angular collection.

Here you can find all builders like build, karma, browser, dev-server, etc and their implementations.

Custom builders

Also, you can create your own builder for custom purposes:

To add extra Webpack config options (custom-webpack builders by JeB Barabanov )
Concat bundled JS files (ngx-build-plus builder by Manfred Steyer)
Automate other routine tasks for you (configure and run source-map-explorer — by Santosh Yadav)

Conclusion

Builders are used to do some routine tasks: build code, run lint, run unit tests, deploy code to host-provider. Also, you can create your own builders to automate some operations and add some new possibilities: add Webpack configs, run scripts, concatenate bundled files, etc.

Schematics

Schematics transform your project: update files, install packages, add new component/modules/directives/etc files.

The Angular CLI uses schematics to apply transforms to a web-app project (modify or create project files).

Schematics are run by default by the commands ng generate , and ng add.

If you create a new version of your library that introduces potential breaking changes, you can provide an update schematic to enable the ng update command to automatically resolve any such changes in the project being updated (to do automatically changes in project code so code uses new API).

https://angular.io/guide/schematics

and

Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project

Schematics — An Introduction

Ok, too vague as for me. Let's make it more specific.

Do you remember how we added the possibility to deploy to FireBase hosting in the previous section with ng add @angular/fire command? We use schematics.

What did this schematics do for us?

I am preparing my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course): http://eepurl.com/gHF0av

Like this article? Follow me on Twitter!

5 things I miss after switching from Windows laptop to MacBookPro.

Oleksandr — Sat, 11 Apr 2020 10:47:47 +0000

How I tried to substitute missed functionality.

A while ago I was employed and what was new for me — I got MacBookPro as a work laptop. It was a new experience for me (since the last 20 years I've been using only Windows 95/../10).

Whilst overall I am quite satisfied with the Mac experience, but I have a few small things that I still miss on Mac that was possible on Windows.

Feel free to advise your favorite Mac apps that may cover these gaps — I would appreciate it.

So let's go 😎

When you ask the community how to do that on Mac :-D

#1. I cannot stretch the application window on two screens.

I often work with Chrome Dev Tools. And on Windows computer I placed DelTools panel to the right and stretched window so panel appeared on another monitor.

One window stretched to two screens

Unfortunately, I didn't find the way to do this on Mac. The only solution is to open Chrome Dev Tools as a separate window and then move DevTools window to another monitor screen. But it is not the same experience.

Chrome Dev Tools as separate window

#2. There is no shortcut ‘Minimize all windows’ 😢

There are often many open apps on my screen. Some sometimes I just want to minimize them all and open the one I need. But there is no 'Minimize all windows (Show Desktop)' button like on Windows 7 taskbar. I miss it a lot.

I did find such a button in Windows 10 but:

"In Windows versions prior to Windows 7, there was a button which minimized all opened Windows and showed the desktop. In Windows 10, there is no such button. Instead, to minimize all open windows and show the Desktop, you need to move the mouse pointer to the right edge of the taskbar (or the bottom edge if your taskbar is vertical) and click a tiny invisible button."

Add the Show Desktop button next to Start in Windows 10

I didn't find such a shortcut in macOS. But to archive a bit similar experience you can use:

1.Use Mission Control button to see all open windows and switch between them

Mission Control button

How apps look after pressing Mission Control

2.Show Mac Desktop with Command + F3

But it doesn't work the same way as in Windows. Yes, you see the Desktop but once you press any app on a Dec — all the apps windows will return to its screen positions. While in Windows they become minimized and you can maximize the app you want to work with.

#3. Dock only visible on one screen at the moment

In Windows, you see the taskbar on each screen while in MacOS you have to choose on which screen you have it. Maybe for someone, it is a benefit but for me, it is not convenient to make it appear each time I need to maximize other apps.

You should choose the screen for Dec to be shown

You can adjust taskbar multi-display appearance

#4. No 'Delete' button on a keyboard

Actually there is but it works as BackSpace on PC (deleting character before the cursor).

You can achieve this behavior by pressing fn+Delete button but not the same experience.

#5. PuntoSwitcher (keyboard layout input language correction) works for 2 languages only

I am a native speaker for Ukrainian and Russian language (what is quite usual in Ukraine). And also uses the English language quite often too. Sometimes if you forget to switch languages — you get some abracadabra (Jabberwocky) text.

Not to erase it and then input again I used to use PuntoSwitcher. It works quite good and by hotkey press changes language layout for last edited work so you don't have to re-type it again:

Press Shortkey (Option for Mac, Break for Windows) and Punto will change keyboard layout for the last word entered

If you have 3 languages — then in windows just press twice to convert to a language you need. But not on Mac — you cannot convert to language 1, then 2 and then 3 — just 1 and 2. And you should choose in options (in Punto for Mac) which two languages you will be able to switch between 😭.

Conclusion

Well. All these imperfections are not a disaster for me. And after being fired from my last job I still continue using MacBookPro (I was allowed to buy my work laptop for a good price). But these are things I definitely would like to have:-) Do you have such staff you miss too? Share in comments!

BTW usually I write articles on Angular and RxJS! So if you are interested -let’s keep in touch on Twitter .

Cheers!

ngRx/Store and 5 silly mistakes

Oleksandr — Tue, 03 Mar 2020 13:02:02 +0000

In this article, I will tell you how to avoid simple pitfalls while working with ngRx to improve your family-work balance:-)

Introduction

If you work with Angular you definitely know about the most popular state management system for Angular applications ngRx/Store.

Let's recall what it is to be on the same page:

@ngrx/store

… is RxJS powered 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.

Here is the flow diagram from official documentation describing how it works:

Components send Actions that is an object with a mandatory property type and optionally other properties with data to be stored to the central object — a Store. Actions are being handled by reducers , a special functions that make data from actions and put them to Store (or modify Store). Other components can subscribe to Store updates (to a specific part of the Store) with selectors (actually selectors determines which part of the Store updates you want to monitor). In simple cases, selectors receive state object as an argument and return you some property of the state object:

(state) => state.prop1

Before I start to keep your time let's review the simplest example. Not to re-invent the bicycle I will use the simplified example from the official doc.

We will create a Store with counter value, and action/reducer that increases that counter value.

Let's create an action:

// src/app/counter.actions.ts

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');

Reducer:

//src/app/counter.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { increment } from './counter.actions';

export const initialState = 0;
const _counterReducer = createReducer(initialState,
   on(increment, state => state + 1)
);

export function counterReducer(state, action) {
   return _counterReducer(state, action);
}

Add StoreModule module to app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { StoreModule } from '@ngrx/store';

import { counterReducer } from './counter.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

You can see that we specify our reducer in this line

StoreModule.forRoot({ count: counterReducer })

To read count value we just need to use select function in a component:

// in some component
import { Store, select } from '@ngrx/store'
...

constructor(private store: Store<{ count: number }>) {

this.count$ = store.pipe(select('count')); 
// now we have observable that will emit values on each count update

// old school approach
//this.count$ = store.pipe( select(state => state.count));

}

What if we don't want to keep count in the main app module?

We can put it to a feature module.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({}),
    StoreModule.forFeature('featureName', { count: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Now our selector to grab the value from feature-branch of the Store state will be:

// count.selectors.ts
export const selectFeature = createFeatureSelector<FeatureState>('featureName');

export const countSelector = createSelector(selectFeature, (state) => state.count);


// And in some component
this.count$ = store.pipe( **select** (countSelector));

Now let's check how all this works:

One component increments state.count, another component displays state value.

All our actions and Store state changes we can observe with nice Chrome plugin: Redux DevTools:

Install a plugin in Chome
install @ngrx/store-devtools module to your Angular app: — ng add @ngrx/store-devtools
Or npm i @ngrx/store-devtools (in that case you should add StoreDevtoolsModule to AppModule manually)
monitor your Store in Chrome Dev Tools (Redux tab)

Simple, right?

At that place, you may ask yourself why do we need an article that just represents the official documentation example? Because even with these simple flows you can spend hours on debugging if something doesn't work as expected.

I revealed 5 often mistakes in my (and my fellow developers) practice.

#1. Redux-DevTools doesn't display undefined props in actions

Say we have an action that sends not the only type of message but also some additional info:

{
 type: SOME_TYPE,
 value: this.someProp
}

For that purpose lets modify a bit our code:

// counter.actions.ts
...
export const increment = createAction('[Counter Component] Increment', props<{value: number}>());

// counter.reducer.ts
const counterReducerFunc = createReducer(initialState,
  on(increment, (state, {value}) => state + 1 + value)
);

//app.component.ts
public value;
...

increment() {
// provide additional value to actionCreator function this.store.dispatch(increment({value: this.value})); 
}

Now our reducer should increase state value by 1 and add value.

But, something goes wrong and you want to debug the actions in Redux Dev Tools.

Debugging issue

Ok, count got NAN value, this is not correct. And why don't we see value prop in action tab content in ReduxDevTools? Only type field is present.

The answer is that a) we forgot to assign some number to value property, b) Chrome plugins cannot get undefined values since it cannot be stringified.

Let's assign value with 0 .

//app.component.ts
public value = 0; // or other number value

Now we can observe this prop in ReduxDevTools:

I spend an hour to reveal it. Maybe you will waste less time after reading this:)

You can take a look at code in this branch of the article GitHub repo. Or check it in a ng-run.com playground.

Take away: better to use null if you need to specify empty value since null can be stringified and can be shown in ReduxDevTools.

#2. StoreDevModule may slow down the app

Once upon a time, I had a big list of objects in a Store. And some user operations modified data on the specific Action type and put them back to Store and then components displayed that data.

What our testers observed that starting from a few hundreds of items in a list each user operation caused small but noticeable UI update lags. And this was not rendering but JS issue.

After checking with ChromeDevTools on Performance tab (you can read more about it here) I got this picture:

7.8% of Javascript activity is grabbed by stringify function

Do you remember why it may happen? Yes, because we send data to our ReduxDevTools plugin to be able to monitor Store Actions and state.

Since we added StoreDevToolsModule manually to the AppModule — we missed an option to turn it off for prod builds:

imports: [
  StoreModule.forRoot({}),
  StoreModule.forFeature(featureKey, {items: itemsReducer}),
  BrowserModule,
  StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }), // missed logOnly option
  EffectsModule.forRoot([AppEffects])
],

After I added it — UI started to feel much better:-)

Takeaway: do not forget logOnly option when you use StoreDevtoolsModule to monitor your ngrx/Store activities. Actually, if you install it with ng add @ngrx/store-devtools then this option will be added automatically. You can read more about logOnly here.

You can play with the code in GitHub repo branch. Or start this branch on ng-run.com Angular playground by Alexey Zuev. For that just copy GitHub branch link and add ng-run.com/github/ like this:

Branch link:
https://github.com/kievsash/ngrx-store-and5sillyMistakes/tree/pitfall_2_StoreDevtoolsModule_slow_down

Now let's start it on ng-run.com by this link (copy it to browser address bar):

https://ng-run.com/github/kievsash/ngrx-store-and5sillyMistakes/tree/pitfall_2_StoreDevtoolsModule_slow_down

#3. You import feature module but it doesn't work

a) Ok, So you have nice feature Angular module where you put:

// feature.module.ts

...

imports: [
   StoreModule.forFeature(featureKey, {items: itemsReducer}),
...

You expect it should work when you added it to app.module.ts AppModule imports. But… it doesn't) You open a ChromeDevTools console and see:

Ok, so we go to ngrx/platform GitHub repo and search for 'ReducerManager' entity. And see that it is provided as REDUCER_MANAGER_PROVIDERS by StoreModule.forRoot(…) call here.

Answer is obvisous: we forgot to include StoreModule.forRoot({}) in out AppModule.

// app.module.ts
imports: [
  StoreModule.forRoot({}),
  StoreModule.forFeature(featureKey, {items: itemsReducer}),

Now it works well.

b) I found one more interesting behavior but with StoreDevtoolsModule

Ok, so you added it to AppModule:

imports: [
  StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
  StoreModule.forRoot({}),
  StoreModule.forFeature(featureKey, {items: itemsReducer}),

But when you open Redux tab in ChromeDevTools you see this:

No Store found.

Why??

Because I just put StoreDevtoolsModule in imports array BEFORE StoreModule.forRoot. So it seems like Angular tries to instantiate it before any Store is created. Just put StoreDevtoolsModule AFTER StoreModule.forRoot in AppModule decorator imports array to fix the issue.

imports: [
  StoreModule.forFeature(featureKey, {items: itemsReducer}),
  StoreModule.forRoot({}),
  StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),

Now it works good:

Interesting that in Angular 9 putting StoreModule.forFeature BEFORE StoreModule.forRoot doesn't create any issue.

You can find the code to play with here.

#4. Exported reducer function is necessary as function calls are not supported by the AOT compiler (in Angular 8).

The title of this pitfall sounds not clear but actually it is very simple. You have reducer:

export const counterReducer = createReducer(initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, state => 0),
);

@NgModule({
  declarations: [],
  imports: [
    StoreModule.forRoot({ count: counterReducer })
  ],
  providers: [],
})
export class CounterStateModule { }

And it works quite well…until we try to build the production code:

ERROR in Error during template compile of 'CounterStateModule'
  Function calls are not supported in decorators but 'createReducer' was called in 'counterReducer'
    'counterReducer' calls 'createReducer' at app/counter.state.ts

This is a well-know issue, you can read more about it here.

Fortunately, when I tested it on Angular 9 project with Ivy (ngRx/Store 8.6) — it was already solved! You can read more details in this issue.

You can check the code here.

Takeaway: update to Angular 9 😎

#5. Action creator is a function but if you forget to put parentheses — ngRx keeps silence.

Here is a possible pitfall reproduce code:

constructor(private store: Store<{ count: number }>) {
}

selectAll() {
  this.store.dispatch(select);//should be select() but no type error
}
unselectAll() {
  this.store.dispatch(unselect()); // correct
}

Typescript will not help you here. But fortunately, you will find a hint in ChromeDevTools console:

Takeaway: Do not put all eggs in typescript basket 🎓 Sometimes it may not help you.

Conclusion

Ok, so what we have learned in this article?

Use null instead of undefined as noValue to be able to observe it in ReduxDevTools Chrome plugin.
StoreDevModule may slow down the app. To prevent it — set logOnly option as true.
Do not forget to put StoreModule.forRoot({}) in AppModule when you connect other ngrx/Store feature modules.
Exported reducer function is not necessary in Angular 9.
Do not forget to put parentheses in your call action creator function.

Now you can spend more time with your family but not in debugging sessions⛷

Let’s keep in touch on Twitter!

BTW. I started a video tutorial series “Angular can waste your time” on Youtube. There I will be publishing videos about resolving tricky cases with Angular and RxJS. Take a look!

Cheers!

[Angular] How to get a moment after *ngFor DOM update

Oleksandr — Mon, 24 Feb 2020 20:19:04 +0000

I have *ngFor generated list in Angular and need to fire event on a list updates but after angular render all the elements.

How to do that?

Watch the video to find out.

This video series will become a part of my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course): http://eepurl.com/gHF0av

Angular ElementSchemaRegistry for “dummies”

Oleksandr — Fri, 07 Feb 2020 13:21:18 +0000

How does Angular know I made an error in a component template?

Let's find out (CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, etc).

*Angular 8.2 source code is used for this article.

I bet every Angular developer met such an error message in ChromeDevTools console:

<some-custom-tag></some-custom-tag>

Usually, this means you forgot to add a component to the module — so Angular doesn’t know anything about it.

Sometimes this error is shown on native HTML tags:

You can watch these errors by running article demo project here.

Yes, we can solve it by using [addr.someAttr]=”someValue” notation, but how does Angular know that button doesn’t have such an attribute? And can we somehow omit Angular checking for our specific cases (custom elements our of Angular or some specific attributes)?

This is time to introduce ElementSchemaRegistry from ‘@angular/compiler’ package.

A more elaborate version of this article is available here .

Prolog

Angular uses two ways to check component templates to be good:

Generating Type Checking Blocks — you can read more about it in Alexey Zuev article here.
Angular compiler instance uses TemplateParser which runs DomElementSchemaRegistry (implementation of ElementSchemaRegistry ) methods for checking of template AST (Abstract syntax tree) nodes validity.

ElementSchemaRegistry is an abstract class that defines an interface for schema class for Angular to check its component templates (if there is such an element or if such attr exists for a specific element, etc). Here it is:

import {SchemaMetadata, SecurityContext} from '../core';

export abstract class ElementSchemaRegistry {

abstract hasProperty (tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean;

abstract hasElement (tagName: string, schemaMetas: SchemaMetadata[]): boolean;

abstract securityContext(elementName: string, propName: string, isAttribute: boolean): SecurityContext;

abstract allKnownElementNames(): string[];

abstract getMappedPropName(propName: string): string;

abstract getDefaultComponentElementName(): string;

abstract validateProperty(name: string): {error: boolean, msg?: string};

abstract validateAttribute(name: string): {error: boolean, msg?: string};

abstract normalizeAnimationStyleProperty(propName: string): string;

abstract normalizeAnimationStyleValue(camelCaseProp: string, userProvidedProp: string, val: string|number): {error: string, value: string};

}

As you can see that it has specific methods to check if some element or some attribute exists: hasElement and hasAttribute.

How does it work under-the-hood?

DomElementSchemaRegistry extends ElementSchemaRegistry

For browser elements checking we have a special class DomElementSchemaRegistry. All DOM entities and its respective attributes are defined there. Here it is:

const SCHEMA: string[] = ['[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop,slot' + /* added manually to avoid breaking changes */      
...
' **base** ^[HTMLElement]|href,target', 

'**body**^[HTMLElement]|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
 'button^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value', 

'canvas^[HTMLElement]|#height,#width', 'content^[HTMLElement]|select', 

'dl^[HTMLElement]|!compact', 'datalist^[HTMLElement]|', 

'details^[HTMLElement]|!open', 'dialog^[HTMLElement]|!open,returnValue', 

'dir^[HTMLElement]|!compact', 'div^[HTMLElement]|align', 

'embed^[HTMLElement]|align,height,name,src,type,width', 

'fieldset^[HTMLElement]|!disabled,name',
...

'span^[HTMLElement]|', 

'style ^[HTMLElement]|!disabled,media,type', 

'caption^[HTMLElement]|align', 

'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width', 

'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width', 

'**table**^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width', 

' **tr** ^[HTMLElement]|align,bgColor,ch,chOff,vAlign', 

'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign', 

'template ^[HTMLElement]|', 
'textarea ^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap', 

'title^[HTMLElement]|text', 

'track^[HTMLElement]|!default,kind,label,src,srclang', 

'ul^[HTMLElement]|!compact,type', 'unknown^[HTMLElement]|', 

'video^media|#height,poster,#width',
...

And the list is created by exporting browser IDL (interface description language) as we can see from compiler-cli/src/ngtsc/typecheck/src/dom.ts file comments (one of the places where DomElementSchemaRegistry is instantiated).

`DomElementSchemaRegistry`, a schema * maintained by the Angular team via extraction from a browser IDL.

OK, so we have a list of DOM entities and set of methods for checking where an HTML template is valid. How does Angular use it?

How is DomElementSchemaRegistry used?

a) AotCompiler (angular/packages/platform-browser-dynamic/src/compiler_factory.ts)

Typescript ts.createProgram starter needs compiler instance from compiler factory function
compiler_factory (lets review AOT) creates schemaParser and feed it to new TemplateParser(…) statement and then templateParser instance are fed to compiler instance constructor (here)

export function createAotCompiler (

compilerHost: AotCompilerHost, options: AotCompilerOptions,

errorCollector?: (error: any, type?: any) =>

void): {compiler: AotCompiler, reflector: StaticReflector} {

...

const elementSchemaRegistry = new DomElementSchemaRegistry();

const tmplParser = new TemplateParser(

config, staticReflector, expressionParser, **elementSchemaRegistry** , htmlParser, console, []);

...

const compiler = new AotCompiler (

config, options, compilerHost, staticReflector, resolver, **tmplParser** ,

new StyleCompiler(urlResolver), viewCompiler, typeCheckCompiler,

new NgModuleCompiler(staticReflector),

new InjectableCompiler(staticReflector, !!options.enableIvy), new TypeScriptEmitter(),

summaryResolver, symbolResolver);

return {compiler, reflector: staticReflector};

}

a) Сompiler instance has two(actually more but we review these two) methods _compileComponent and _createTypeCheckBlock. b) These methods call _parseTemplate where templateParserInstance.parse is performed.

c) And it starts template parsing process (btw visitor pattern is used to iterate over AST nodes) where our DomElementSchemaRegistry instance and TemplateParseVisitor instance are used to check whether AST node (which represents template element) is valid.

For example here and here you can see code that represents messages at the beginning of the article:

private _assertElementExists(matchElement: boolean, element: html.Element) {

const elName = element.name.replace(/^:xhtml:/, '');

if (!matchElement && !this._schemaRegistry.hasElement(elName, this._schemas)) {

let errorMsg = `'${elName}' is not a known element:\n`;

errorMsg +=

`1. If '${elName}' is an Angular component, then verify that it is part of this module.\n`;

if (elName.indexOf('-') > -1) {

errorMsg +=

`2. If '${elName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.`;

} else {

errorMsg +=

`2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;

}

this._reportError(errorMsg, element.sourceSpan !);

}

b) JIT compiler (angular/packages/platform-browser-dynamic/src/compiler_factory.ts)

AOT compiler creates an instance for TemplateParser explicitly (you remember that parser then uses schemaRegistry (instance of DomElementSchemaRegistry)).

//angular/angular/blob/8.2.x/packages/compiler/src/aot/compiler_factory.ts

...
const elementSchemaRegistry = new DomElementSchemaRegistry();

const tmplParser = new TemplateParser(config, staticReflector, expressionParser, elementSchemaRegistry, htmlParser, console, []);
...

For instantiating JIT Compiler Angular uses Injector to create respective dependencies instances to its compiler_factory.

// angular/angular/blob/8.2.x/packages/platform-browser-dynamic/src/compiler_factory.ts

export const COMPILER_PROVIDERS = <StaticProvider[]>[
...
{ provide: DomElementSchemaRegistry, deps: []},  
{ provide: ElementSchemaRegistry, useExisting: DomElementSchemaRegistry},
...
]

This means that for JIT build we can substitute DomElementSchemaRegistry with some custom ElementSchema class (we will talk about it later).

Now we know how it works. And? What to do with this knowledge?

Use cases

Like this article? Follow me on Twitter!

RxJS in-depth: Github repo ‘utils’ directory review (part 1)

Oleksandr — Wed, 22 Jan 2020 09:37:00 +0000

Curiosity leads to discoveries.

RxJS is quite a popular library in Angular world so for me it is always interesting to find out something new about its internals. Today I want to dig into utils folder of its GitHub repo. This article is written not for some practical usage but rather for reverse engineering enthusiasts and my curiosity.

Here is a link to RxJS 6.5 /src/internal/util/ dir. This folder is full of files. Let’s review them one by one. Some of them can bring something interesting 🔍.

#1 ArgumentOutOfRangeError.ts

The main code is next:

function **ArgumentOutOfRangeErrorImpl** (this: any) {  
 Error.call(this);  
 this.message = 'argument out of range';  
 this.name = 'ArgumentOutOfRangeError';  
 return this;
}

_ArgumentOutOfRangeErrorImpl_.prototype = Object._create_(Error.prototype);

_export const_ ArgumentOutOfRangeError : ArgumentOutOfRangeErrorCtor = _ArgumentOutOfRangeErrorImpl as any_;

What is interesting here?

a) We inherit from built-in Error class here. So we can throw calls instance with the message we need.

b) superclass constructor is called in an explicit way: Error.call(this);

Where it is used in RxJS source code?

Let's take a look at takeLast(count) operator — it should emit last count values after the source observable is complete. Of cause it cannot accept negative count — so:

 When using takeLast(i), it delivers an ArgumentOutOrRangeError to the Observer's error callback if i < 0

at line 63:

if (this.total < 0) { throw new ArgumentOutOfRangeError; }

Why should I know this?

Reading source code can help you to understand how the library works in edge cases. And sometimes it is the only way to understand why it works how it works.

#2 EmptyError.ts

It looks very similar to ArgumentOutOfRangeError

function EmptyErrorImpl(this: any) {
  Error.call(this);
  this.message = 'no elements in sequence';
  this.name = 'EmptyError';
  return this;
}

EmptyErrorImpl.prototype = Object.create(Error.prototype);

export const EmptyError: EmptyErrorCtor = EmptyErrorImpl as any;

But the application scope is different.

Where it is used in code?

Let's review first operator — it should emit only the first value (or the first value that meets some condition) emitted by the source Observable.

But what is sequence is empty? We can find an answer at line 69 of rxjs/src/internal/operators/first.ts

 Delivers an EmptyError to the Observer's `error` callback if the Observable completes before any `next` notification was sent.

And this happens in lines 86–90:

return (source: Observable<T>) => source.pipe(
    predicate ? filter((v, i) => predicate(v, i, source)) : identity,
    take(1),
    hasDefaultValue ? defaultIfEmpty<T | D>(defaultValue) : throwIfEmpty(() => new **EmptyError** ()),
  );

*Interesting remark: you can use take(1) instead of first() with almost the same result:

source$.pipe(take(1))
vs
source$.pipe(first())

The only difference that take operator will not emit EmptyError if source$ completes before producing value.

Why should I know this?

Since first operator uses EmptyError — a final code bundle should contain EmptyError.ts file too. So when you use first operator — a final bundle size will be a bit bigger. You can read more about it here.

Like this article? Follow me on Twitter!

Angular Material matInput form control with thousands separator (excerpt)

Oleksandr — Thu, 26 Dec 2019 15:26:29 +0000

Customizing an Angular Material directive by adding commas to digit groups in matInput numbers and support reactive Angular forms.

Every Angular developer knows Angular Material (You don't know it? Then definitely take a look). Like many other UI libraries it provides a set of form controls and among them matInput.

It is a regular text input with the possibility to display placeholder in a nice way, to add a clear button, provide custom error messages, text length hint, and even suffixes and prefixes to improve user experience. You can look at examples here.

The problem

The task I got from a customer was to display input values in digit groups for account amount form field, like this:

Surprisingly searching though the internet didn't provide some solid solutions so I decided to create my own one. I found only two things that may help:

This interesting paragraph is on the matInput API page:

MAT_INPUT_VALUE_ACCESSOR
This token is used to inject the object whose value should be set into MatInput. If none is provided, the native HTMLInputElement is used. Directives like MatDatepickerInput can provide themselves for this token, in order to make MatInput delegate the getting and setting of the value to them

Angular Material’s MatDatePicker expects to be applied on top of matInput so we can use its code as an example of extending matInput.

Solution

Like this article? Follow me on Twitter!

"Angular[/RxJS] can waste your time" series. Pitfall #7 - forkJoin vs zip

Oleksandr — Wed, 11 Dec 2019 12:18:20 +0000

So you use RxJS zip function to combine multiple observables.
But zip can have a pitfall. Which one?

Watch the video "forkJoin vs zip RxJS operators differences" to find out!

"Angular[/RxJS] can waste your time" series. Pitfall #6 - RxJS fromFetch vs ajax

Oleksandr — Fri, 06 Dec 2019 13:36:22 +0000

You decided to omit Angular HttpINterceptor and use RxJS functions to make a network call, like fromFetch or ajax. But there is a possible pitfall here as well.

Which one? Watch the video ;-)

"Angular can waste your time" series. Pitfall #5 - Low performance issue.

Oleksandr — Tue, 03 Dec 2019 13:20:47 +0000

So you are not expecting some big performance issues in your application and run a performance test just to comply with the formalities. But the performance test shows some strange behavior...

Why? Watch this video!

This video series will become a part of my future video-course with advanced techniques of mastering Angular. Want to get a notification when it is done? Subcribe here: http://eepurl.com/gHF0av

Buy me a coffee ☕️🤓

DEV Community: Oleksandr

Inject() over constructor DI cases in Angular

1. Standalone Functions (Route Guards, Interceptors)

Key Benefits:

2. Factory Functions (Creating Customized Services)

3. Lazy Injection (On-Demand Service Loading)

4. Multi-Level Inheritance (Avoiding Constructor Hell)

Benefits:

5. Dynamic Providers (Runtime Dependency Switching)

6. Type Inference with inject() vs Constructor DI

7. Changes in ES2022 and future deprecation of 'useDefineForClassFields' compiler option in typescript.

Appendix: Situations Where inject() Won't Work in Angular

1. Outside Injection Context (more here)

a) In Asynchronous Code

b) In Event Handlers

c) In Subscription Callbacks

d) In Standalone Functions Without runInInjectionContext

e) inject(...) won't work in ngOnInit method without runInInjectionContext.

2. In Regular (Non-Angular) Classes

Final Verdict

More to read:

How I cleaned my MacBookPro 2015 and released 50Gb of disk space

Introduction

1. Outdated node_modules

2. npm cache cleanup

3. Old Docker related files

4. Docker.raw file

5. Terraform cache files.

6. Microsoft OneNote cache

7. Remove old Google Cache.

8. Applications cache cleanup.

9 Edge Updater Files

Angular CLI flows. Big picture.

Builders

So what are builders used for?

Angular CLI standard builders

Custom builders

More to read

Conclusion

Schematics

5 things I miss after switching from Windows laptop to MacBookPro.

#1. I cannot stretch the application window on two screens.

#2. There is no shortcut ‘Minimize all windows’ 😢

#3. Dock only visible on one screen at the moment

#4. No 'Delete' button on a keyboard

#5. PuntoSwitcher (keyboard layout input language correction) works for 2 languages only

Conclusion

ngRx/Store and 5 silly mistakes

Introduction

#1. Redux-DevTools doesn't display undefined props in actions

#2. StoreDevModule may slow down the app

Conclusion

[Angular] How to get a moment after *ngFor DOM update

Angular ElementSchemaRegistry for “dummies”

Prolog

DomElementSchemaRegistry extends ElementSchemaRegistry

How is DomElementSchemaRegistry used?

a) AotCompiler (angular/packages/platform-browser-dynamic/src/compiler_factory.ts)

b) JIT compiler (angular/packages/platform-browser-dynamic/src/compiler_factory.ts)

Use cases

RxJS in-depth: Github repo ‘utils’ directory review (part 1)

#1 ArgumentOutOfRangeError.ts

#2 EmptyError.ts

Angular Material matInput form control with thousands separator (excerpt)

The problem

Solution

"Angular[/RxJS] can waste your time" series. Pitfall #7 - forkJoin vs zip

"Angular[/RxJS] can waste your time" series. Pitfall #6 - RxJS fromFetch vs ajax

"Angular can waste your time" series. Pitfall #5 - Low performance issue.