Angular13 and .NET 6 – Getting started

We would need to install Visual Studio 2022.

https://visualstudio.microsoft.com/

Install .NET 6 SDK

This can be downloaded either from Microsoft official URL;

https://dotnet.microsoft.com/en-us/download/dotnet/6.0

Or from the GitHub official release page;

https://github.com/dotnet/core/tree/main/release-notes/6.0

Check the SDK version by opening a command prompt;

> dotnet –help
> dot net –version

Install NVM

If we need to work with different Node.js version, we would need to install nvm.

To prepare for angular development, we would need following components;

  1. Nvm – Node Version Manager. Its is a tool that allows us to download install Node.js. It allows us to pick and choose the Node.js version.
  2. Node.js – Its is a platform for running Javascript applications.

To install node version manager for windows (nvm), click here;

https://github.com/coreybutler/nvm-windows/releases

Scroll to Assets tab and download either nvm-setup.zip or nvm-setup.exe.

If download is for nvm-setup.zip, Unzip download zip file and run nvm-setup.exe. Select Symlink for Node.js. When finished, run this command;

> nvm –version

To install node.js, use this;

//installs the latest version of node.js
> nvm install latest              

//this will install specific version of node.js
> nvm install <<version number>> 

If we have multiple versions of node.js and wanted to use a specific version in our environment, try this in elevated command prompt;

> nvm use 18.8.0

Install Angular CLI;

npm is alredy installed with Visual Studio 2022 installation. Time to install Angular CLI;

> npm install -g @angular/cli@13.0.1

When finished, run following command to check the version;

> ng –version

In my case, I got this error message;

Since I have installed node.js latest version v18.8.0 but Angular 13 doesn’t’ support this. To resolve, head to this link;

https://nodejs.org/en/

So version 16.17.0 is the LTS version. Download and use this version using nvm;

> nvm install 16.17.0
> nvm use 16.17.0

I tried to use ng –version command on my computer but it didn’t work. I needed to re-run this command for angular cli installation;

> npm install -g @angular/cli@13.0.1

restart your computer and run this command again to check Angular CLI version;

> ng --version

This time installation is successful with this message;

Path Variables

If nvm doesn’t work, add it to the environment variable. Press win+I on windows 11. Under About -> “Device specifications” box, click on “Advanced system settings” and select environment variables.

Add nvm.exe to “User variables for admin” section. Here are the values;

Restart your computer. Open command window and run following command any where;

> nvm --version

This should work.

Check All versions

> nvm –-version
> npm –-version
> node –version
> ng –version</p>

If all commands run successfully, We are ready to rock-n-roll with Angular 13 and .NET 6.

Creating test project using Visual Studio 2022

Microsoft has a template, ASP.NET Core with Angular, to create .NET core project with Angular. It’s a single project template with front-end and back-end project. We will not be using this template for our test project. We will create two projects, front-end and back-end and connect those projects.

Create front-end project, e.g. Foo, using “Standalone Typescript Angular Project” template. Create back-end web API project, e.g. FooAPI, within same solution. Double click on launchsettings.json file and change ports to 5001 for https and 5000 for http.

On front-end project, under /src/proxy.conf.js, make sure the port is configured to be 5001. This is the port kestrel web server is listening for incoming requests.

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
    ],
    target: "https://localhost:5001",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

Angular development port configuration are in /.vscode/launch.json file. If you don’t see it, it might be hidden. Usually it’s mapped to HTTPS on port 4200.

Last step is to setup startup project for this multi-project solution. Right click on solution and click on “Set startup project”. Change startup project from “single startup project” to “multiple startup projects” and select “start” for each project. Move FooAPI project on top so it can start first.

Do a quick test run of these multi-projects in Debug mode by pressing F5. Visual Studio will launch 3 process;

  1. ASP.NET Core Server (Kestral or IIS Express)
  2. Angular Live Development Server (using “ng serve” command from the Angular CLI)
  3. Web Server (Google or Edge)

We will be seeing this basic page;

Angular component performing a simple data fetching task from ASP.NET Core Web API project. A small but good working example without any boilerplate code / extra fluff.

A sample diagram how these 3 process interact with each other;

All components are working as expected.

Angular walks through in ASP.NET Core project

Some notes about Angular application structure created using ASP.NET core template in Visual Studio;

ClientApp/src

This folder contains all the TypeScripts files related to Angular app. The whole client-side application source code is here.

The /ClientApp/src/app/assets/ folder keep application images and other asset files. These files will be copied over as-is in the /wwwroot/ folder upon application rebuild.

The /ClientApp/src/app/environment/ folder keep configuration files that target specific environments. For development, it’s environment.ts file and for production it’s environment.prod.ts.

Other root level files are;

1-index.html

The main HTML page that is served when someone visits the site.  The CLI automatically adds all JavaScript and CSS files when app is built. Therefore, we don’t’ see any <script> or <link> tags here.

2-karma.conf.js

This is application specific Karma configuration. Karma is a tool used to run Jasmine-based tests.

3-main.ts

The main entry point for application. Compiles the application with the JIT compiler and bootstraps the application’s root modules (AppModule) to run in the browser.

4-polyfills.ts

This provides polyfill scripts for browser support.

5-styles.css

A list of CSS files that supply styles for a project

6-test.ts

The main entry point for the project’s unit tests.

7-tsconfig.*.json

Project specific configuration options for various aspects of app. app.json for application-level, server.json for server level, and specs.json for tests. These options will override tsconfig.json file in the workspace root.

8-tslint.json

The TSLint configuration for the current project.

The ClientApp/src/app/ folder

This contains all of project’s logic and data and includes all Angular modules, services, components, templates and styles.

The basic building blocks of an Angular application is NgModules, which provides compilation context for Components. The role of NgModules is to collect related code into functional sets. Usually the whole Angular app is defined by a set of one or more NgModules.

An Angular app requires a root module, conventionally called AppModule. This tells Angular how to assemble the applications. This enables bootstrapping and starting the initialization life cycle. The remaining modules are known as feature-modules and serve a different purpose. This root module also contains a reference list of all available components.

This is a schema of the standard Angular Initialization Cycle. This can help us better visualize;

The main file bootstraps app.module.ts (AppModule), which then load the app.component.ts file (AppComponent), and later all other components whenever the application needs them.

The /ClientApp/src/app/ folder has the root module of any Angular app. This module is defined within the app.module.ts file. It is listed with a bunch of import statements and some arrays refrencing Components, other modules, providers an so on. We can see all of them here because root module is basically a reference file.

Server-side AppModule for SSR

The /ClientApp/src/app/app.module.ts file contains a BrowserModule.

import { BrowserModule } from '@angular/platform-browser';

This is used to enable the Angular Universal Server-Side Rendering (SSR).

imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' })

This is a technology that renders Angular applications on the server, provided that the back-end framework support it. .NET Core natively supports such convenient features. This is how the improved Angular initialization schema using SSR;

AppComponent

Angular app is basically a tree of Components working together. Components define views and use services to leverage. Service providers can be injected into Components as dependencies which makes the app code modular, reusable, and efficient. All of these components are conventially located in AppComponent.ts file. This file is located in /app/ root folder according to Angular folder structure conventions. All other components can be placed in sub-folder.

Usually there are three AppComponent files;

1-app.component.ts

This defines the component logic.

2-app.component.html

This defines the HTML templates associated with the AppComponent. Angular component can have an optional HTML file containing its UI layout. This is a good practice unless the component comes with a very minimal UI.

3-app.component.css

This defines all styles.

Install Angular9 or latest version using PowerShell

For fresh start, Uninstall Node.js and npm

Uninstall node.js and npm using Windows Installer (msi)

To uninstall node.js and npm, Open Windows “Control Panel” -> “Uninstall a program”, select Node.js and click on uninstall to uninstaill both node.js and npm

Cleanup directories

After the uninstall, look for the following folders and delete them if exists
* Nodejs installed directory
* npm and npm-cache directories from %appdata% directory
* npmrc directory from user home directory ( C:\Users\{User} )

Now to re-install

Go to Node.js page and install current version

https://nodejs.org/en/download/current/

Check node and npm version;

node -v

npm -v

Open PowerShell in admin mode;

If you want to uninstall angular;

npm uninstall -g @angular/cli

npm cache clean –force

npm cache verify

Install a specific version of angular;

npm install -g @angular/cli@9.0.0

If you see this error, don’t worry. Angular is installed.

ng –v

You might get PowerShell digitally signed error; run these commands;

To check current execution policy, Get-ExecutionPolicy. A convenient method is to change the Execution policy using this cmdlet.

PS C:\ Set-ExecutionPolicy unrestricted

Press Y to confirm. The policy change is updated in the registry and remains this way, at least until you change it again. The unrestricted means loading absolutely all configuration files and running all scripts.

If you don’t want to unrestrict policy but to bypass the policy for current process, run this command;

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Now running ng -v will work.

If you want to Install latest version of angular;

npm install -g angular/cli

This is the Location where angular package are stored;

C:\Users\[UserName]\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng

Resources

https://windowsreport.com/powershell-not-digitally-signed/

ngTemplate, ng-Content, ngContainer, *ngTemplateOutlet

<ng-template>

It’s a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives).

These template elements only work in the presence of structural directives. Angular wraps the host element (to which the directive is applied) inside <ng-template> and consumes the <ng-template> in the finished DOM by replacing it with diagnostic comments.

Resources

https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/