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/