Use Angular with ASP.NET Core (2023)

The ASP.NET Core with Angular project template provides a convenient starting point for ASP.NET Core applications that use Angular and the Angular CLI to implement a rich client-side user interface (UI).

A project template is equivalent to creating an ASP.NET Core project that acts as the web API and an Angular CLI project that acts as the user interface. This combination of projects offers the convenience of hosting both projects in a single ASP.NET Core project that can be built and published as a single unit.

The project template is not intended for server-side rendering (SSR).

Create a new application

Create a new project from the command line using the commanddotnet new cornerin an empty directory. For example, the following commands build the application in amy new appdirectory and navigate to this directory:

dotnet novi kutni -o my-new-application my-new-application

Run the application from Visual Studio or the .NET Core CLI:

The project template creates an ASP.NET Core application and an Angular application. An ASP.NET Core application is intended to be used for data access, authorization, and other server-side issues. Angular application, based inClientAppsubdirectory, intended to be used for all user interface issues.

Add pages, images, styles and modules

TheClientAppdirectory contains the standard Angular CLI application. See officialCorner documentationFor more information.

There are minor differences between an Angular application built from this template and one built from the Angular CLI itself (viafrom new) However, the app's features remain unchanged. The application generated by the template contains aBootstrap-based layout and basic routing example.

Run the commands

In the command line, go toClientAppsubdirectories:

cd ClientApp

Ako imatefromtool installed globally, you can run any of its commands. For example, you can runfrom fluff,testa, or any otherAngular CLI naredbe. You don't have to run awayfrom servingHowever, since your ASP.NET Core application deals with serving both server-side and client-side parts of your application. It is used internallyfrom servingunder development.

If you don't have itfromtool installed, runnpm run itInstead of that. For example, you can runnpm run lindthenpm run test.

Install npm packages

To install third-party npm packages, use the command line atClientAppsubdirectory. For example:

cd ClientAppnpm install

Publishing and development

During development, the application runs in a mode optimized for developer convenience. For example, JavaScript packages include source maps (so you can see your source TypeScript code when debugging). The application tracks changes to TypeScript, HTML, and CSS files on disk and automatically recompiles and reloads them when it sees those files change.

In production, preview a performance-optimized version of your app. This is set to happen automatically. When you publish, the build configuration emits a minified, precompiled (AoT) version of your code on the client side. Unlike the development version, the production version does not require Node.js to be installed on the server (unless you have enabled server-side rendering (SSR)).

You can use standardASP.NET Core hosting and development methods.

Start "serving" independently

The project is configured to run its own instance of the Angular CLI server in the background when an ASP.NET Core application is started in development mode. This is convenient because you don't have to manually start a separate server.

This default has a downside. Whenever you modify the C# code and the ASP.NET Core application needs to be restarted, the Angular CLI server is restarted. It takes about 10 seconds to start the backup. If you frequently edit C# code and don't want to wait for the Angular CLI to restart, run the Angular CLI server externally, independent of the ASP.NET Core process.

To run the Angular CLI server externally, go toClientAppsubdirectory on the command line and start the Angular CLI development server:

cd ClientAppnpm start

When you start your ASP.NET Core application, it will not start the Angular CLI server. A manually started instance is used instead. This allows it to start and restart faster. No more waiting for Angular CLI to rebuild your client application every time.

When the proxy is started, the URL and destination port are derived from environment variables defined by .NET,ASPNETCORE_URLSiASPNETCORE_HTTPS_PORT. To set the HTTPS URLs or port, use one of the environment variables or change the value toproxy.conf.json.

Configure proxy middleware for SignalR

For more information seehttp-proxy-middleware.

Additional funds

• Introduction to Authentication for Single-Sided Applications in ASP.NET Core

The updated Angular project template provides a convenient starting point for ASP.NET Core applications that use Angular and the Angular CLI to implement a rich client-side user interface (UI).

A template is equivalent to creating an ASP.NET Core project that acts as the API backend and an Angular CLI project that acts as the UI. The template offers the convenience of accommodating both types of projects in one application project. Consequently, an application project can be built and published as a single module.

Create a new application

Create a new project from the command line using the commanddotnet new cornerin an empty directory. For example, the following commands build the application in amy new appdirectory and navigate to this directory:

dotnet novi kutni -o my-new-application my-new-application

Run the application from Visual Studio or the .NET Core CLI:

The project template creates an ASP.NET Core application and an Angular application. An ASP.NET Core application is intended to be used for data access, authorization, and other server-side issues. Angular application, based inClientAppsubdirectory, intended to be used for all user interface issues.

Add pages, images, styles and modules

TheClientAppdirectory contains the standard Angular CLI application. See officialCorner documentationFor more information.

There are minor differences between an Angular application built from this template and one built from the Angular CLI itself (viafrom new) However, the app's features remain unchanged. The application generated by the template contains aBootstrap-based layout and basic routing example.

Run the commands

In the command line, go toClientAppsubdirectories:

cd ClientApp

Ako imatefromtool installed globally, you can run any of its commands. For example, you can runfrom fluff,testa, or any otherAngular CLI naredbe. You don't have to run awayfrom servingHowever, since your ASP.NET Core application deals with serving both server-side and client-side parts of your application. It is used internallyfrom servingunder development.

If you don't have itfromtool installed, runnpm run itInstead of that. For example, you can runnpm run lindthenpm run test.

Install npm packages

To install third-party npm packages, use the command line atClientAppsubdirectory. For example:

cd ClientAppnpm install --save

Publishing and development

During development, the application runs in a mode optimized for developer convenience. For example, JavaScript packages include source maps (so you can see your source TypeScript code when debugging). The application tracks changes to TypeScript, HTML, and CSS files on disk and automatically recompiles and reloads them when it sees those files change.

In production, preview a performance-optimized version of your app. This is set to happen automatically. When you publish, the build configuration emits a minified, precompiled (AoT) version of your code on the client side. Unlike the development version, the production version does not require Node.js to be installed on the server (unless you have enabled server-side rendering (SSR)).

You can use standardASP.NET Core hosting and development methods.

Start "serving" independently

The project is configured to run its own instance of the Angular CLI server in the background when an ASP.NET Core application is started in development mode. This is convenient because you don't have to manually start a separate server.

This default has a downside. Whenever you modify the C# code and the ASP.NET Core application needs to be restarted, the Angular CLI server is restarted. It takes about 10 seconds to start the backup. If you frequently edit C# code and don't want to wait for the Angular CLI to restart, run the Angular CLI server externally, independent of the ASP.NET Core process. To make:

1. In the command line, go toClientAppsubdirectory and start the Angular CLI development server:

   cd ClientAppnpm start

   Great

   Usenpm startto run the Angular CLI development server, nofrom serving, so that the configuration inpackage.jsonshe is respected. To pass additional parameters to the Angular CLI server, add them to the relevantscenariosline in yourspackage.jsonfile.

2. Modify your ASP.NET Core application to use an external Angular CLI instance instead of running your own. YoursGet startedclass, replace itspa.UseAngularCliServercall with the following:

   spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

When you start your ASP.NET Core application, it will not start the Angular CLI server. A manually started instance is used instead. This allows it to start and restart faster. No more waiting for Angular CLI to rebuild your client application every time.

When the proxy is started, the URL and destination port are derived from environment variables defined by .NET,ASPNETCORE_URLSiASPNETCORE_HTTPS_PORT. To set the HTTPS URLs or port, use one of the environment variables or change the value toproxy.conf.json.

Data transfer from .NET code to TypeScript code

During SSR, you might want to pass data on request from your ASP.NET Core application to your Angular application. For example, you can pass cookie information or something read from a database. To do this, edit yoursGet startedclass. In the callback forUseSpaPrendering, set the value foroptions.SupplyDatasuch as the following:

options.SupplyData = (context, data) =>{ // Creates a new value called isHttpsRequest that is passed to TypeScript code data["isHttpsRequest"] = context.Request.IsHttps;};

TheSupplyDataThe callback allows you to pass arbitrary JSON-serializable data (for example, strings, binary values, or numbers) on request. Yourmain.server.tscode takes this asparam data. For example, the preceding code sample passes a binary value asparams.data.isHttpsRequestfrom the insidecreateServerRenderercall back. You can pass it to other parts of your application in any way supported by Angular. For example, see howmain.server.tspasses himBASE_URLthe value of any element whose producer is declared to receive it.

Lack of SSR

Not all applications benefit from SSR. The main benefit is perceived performance. Visitors who reach your app over a slow network connection or on slow mobile devices see the initial user interface quickly, even if it takes some time to retrieve or parse the JavaScript packets. However, many SPAs are primarily used in high-speed internal corporate networks on high-speed computers where the application appears almost instantaneously.

At the same time, there are significant disadvantages of SSR activation. It adds complexity to your development process. Your code must run in two different environments: client-side and server-side (in a Node.js environment called ASP.NET Core). Here are some things to keep in mind:

• SSR requires Node.js to be installed on your production servers. This is automatically true for some deployment scenarios, such as Azure App Services, but not for others, such as Azure Service Fabric.
• Activate itBuildServerSideRendererthe construction of the flag challenges younode_modulespublication catalog. This folder contains 20,000+ files, which increases development time.
• To run your code in a Node.js environment, it cannot rely on the existence of browser-specific JavaScript APIs such aswindowthelocal storage. If your code (or any third-party library you reference) tries to use these APIs, you will get an error during SSR. For example, don't use jQuery because it calls browser-specific APIs in many places. To avoid errors, you should either avoid SSR or avoid browser-specific APIs or libraries. You can wrap all calls to such APIs in checks to ensure they are not called during SSR. For example, use a control like this in JavaScript or TypeScript code:

if (typeof window !== 'undefined') { // browser-specific API call here }

Configure proxy middleware for SignalR

For more information seehttp-proxy-middleware.

Additional funds

• Introduction to Authentication for Single-Sided Applications in ASP.NET Core