Tips & Tricks – Andreas Plahn Blog

Angular automated migration from ngIf and ngFor directives markup to control blocks

Directives such as *ngIf and *ngFor will soon get deprecated to favor the new control flow blocks.

E.g. old directives:

<ng-container *ngIf="isLoggedIn">...</ng-container>

Can now be replaced with the new syntax:

@if (isLoggedIn) {
   ...
}

An automated migration CLI command is available

C# to TypeScript – Visual Studio Code Extension

Convert C# Models, ViewModels and DTOs into their TypeScript equivalents.
Source: C# to TypeScript – Visual Studio Marketplace

Configure Prettier and ESLint with Angular

Everyone wants to write code in a fast bug-free way without thinking about its style most of the time. That’s why in this post I will talk about configuring ESLint and Prettier in an Angular project.

Source: Configure Prettier and ESLint with Angular | by Enea Jahollari | ITNEXT

Visual Studio 2022 make debugger catch more exceptions

Ctrl+Q, search for feature “exception settings” -> enable setting below

Host and deploy Angular web app using Azure and Github

I am using Angular v17 and node v18.
In simple steps;
Goto azure portal.
Create a new resource of type “Static Web App”
I choose Github as Deployment source.

Regarding Angular v17, I had problems with the github deployment build actions:

Node was configured as v16 but angular v17 needs node v18
path to index.html for dist build could not be found

After Azure has created the static web app for Github deployment the following file is pushed into the repo:

.github/workflow/azure-static-web-apps-[*].yml

I hade to set the following values correctly:

app_location: "./" # App source code path

output_location: "./dist/gps-tracker/browser" # Built app content directory - optional

The output location should point to where the index.html file is located.
You should change the ‘gps-tracker’ to your application name. To find out exactly run ‘ng build’ locally and look into the created dist folder.

Regarding setting node version to 18: I added the following in the yml file:

env:
  NODE_VERSION: '18.x'

Print screen of node version setting:

C# .NET – Generate error message when “async void” is used in code

The mentioned AsyncFixer extension and Nuget Package are super useful when dealing with async code. They both package a Roslyn analyzer that detects many async issues and provides an automatic fix for them as well in most cases. Using the .editorconfig in Visual Studio you can configure specific warnings as errors:
[*.cs] # AsyncFixer03: Fire-and-forget async-void methods or delegates dotnet_diagnostic.AsyncFixer03.severity = error
And you can set that straight from the Solution Explorer in case you’ve a

Source: c# – Generate error message when “async void” is used in code – Stack Overflow

Top 5 Tips for Angular Development With WebStorm | JetBrains

No matter how much familiarity you have with Angular, or how you feel about it, JetBrains IDEs can make your experience with this framework much better. In today’s FOMO digest, we’ll tell you about the features for working in Angular that you can find in JetBrains IDEs, such as WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider, PyCharm Professional, GoLand, and RubyMine.

Source: FOMO Digest #2: Top 5 Tips for Angular Development With JetBrains IDEs | The WebStorm Blog

Use .http files in Visual Studio 2022

The Visual Studio 2022 .http file editor provides a convenient way to test ASP.NET Core projects, especially API apps. The editor provides a UI that:

Creates and updates .http files.

Sends HTTP requests specified in .http files.

Displays the responses.

This article contains documentation for:

The .http file syntax.

How to use the .http file editor.

How to create requests in .http files by using the Visual Studio 2022 Endpoints Explorer.

The .http file format and editor was inspired by the Visual Studio Code REST Client extension. The Visual Studio 2022 .http editor recognizes .rest as an alternative file extension for the same file format.