DEV Community: Mitch Lamers

TS: Remove dead code

Mitch Lamers — Mon, 17 Oct 2022 15:00:10 +0000

Quick tip for anyone that wants to clean up unused Typescript code.

In your project folder run:

npm install ts-prune -g

Followed by:

ts-prune

You now get an overview of code that is not used, it still has a few issues when using barrel imports (index.ts files) so make sure to double check references using VSCode or your favourite editor before removing code.

Happy cleaning! for more info see: https://github.com/nadeesha/ts-prune

Angular async pipe

Mitch Lamers — Sat, 08 Oct 2022 17:35:31 +0000

The Angular async pipe is used to show values of an observable in the html of a component. The big advantage is that Angular will handle subscribing and unsubscribing to the observable and you will not have unused subscriptions.

Without async pipe

Imagine we are building a component to show some quotes

export class QuotesComponent implements OnInit {
  quotes: string[] = [];

  ngOnInit(): void {
    of([
      'Amor fati',
      'Memento mori',
      'Summum Bonum'
    ]).subscribe((values) => {
      this.quotes = values;
    });
  }
}

<div *ngFor="let quote of quotes">
{{quote}}
</div>

Now to handle the unsubscription we would also have to implement the onDestroy method, make the observable$ a class level variable and unsubscribe onDestroy of the component. Thats where the async pipe comes in.

With async pipe

export class QuotesComponent {
  quotes$: string[] = of([
      'Amor fati',
      'Memento mori',
      'Summum Bonum'
    ]);
}

Here we use | async to handle the subscription

<div *ngFor="let quote of quotes$ | async">
{{quote}}
</div>

Besides the advantage of not having to handle the subscriptions manually it also cleans up the code quite a bit

Using the catchError pipe

Mitch Lamers — Sat, 08 Oct 2022 17:14:52 +0000

The old way of catching errors in RxJS was a method per subscription like so. Imagine an app using a http service to get some data

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint');
  }
}

yourHttpClient.get().subscribe(() => {
    // Your logic
  },
  (error) => {
    console.log(error);
  }
);

The downside to this is that every subscription needs to catch the errors and handle them accordingly.

The catchError pipe

Instead we can use the catchError pipe in the HttpClient itself to handle our errors. As you can see in the catchError RxJS pipe the error is logged and returned and you no longer need error logic when creating the subscriptions

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint').pipe(
      catchError((error) => {
        console.log(error);
        return error;
      })
  }
}

yourHttpClient.get().subscribe(() => {
    // Your logic
  }
);

Looking at this example we can improve it a bit more, we know we only get a single result from the get method. So we can add the first() operator to the get request to close the subscription

class yourHttpClient {
  get<T>() : Observable<T> {
    return this.http.get<T>('endpoint').pipe(
      catchError((error) => {
        console.log(error);
        return error;
      }),
      first()
  }
}

Angular crash on iOS devices toLocaleDateString()

Mitch Lamers — Fri, 02 Sep 2022 19:26:49 +0000

Issue

In case you are having issues of an Angular app crashing only on iOS devices check if you are using toLocaleDateString().

In case of calling this method many times it will use up all of the javascript resources and the app will be shit down.

Solutions

If possible find a way to call the method less often. Use the onPush change detection option to control the components updates.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})

If you are using toLocaleDateString() to compare dates consider using a library that handles this more efficient like date-fns https://date-fns.org/