In the previous post, I shared how Angular and .NET Core can work together to deliver modern web applications. In this post, you learn how to tightly integrate the client and server in a single project.

This is a four-part series. You can navigate to the parts below (links will become active as articles are available:

1. Get Started with Angular on .NET Core 2.1
2. The Angular .NET Core 2.1 Template (you are here)
3. Server-side Rendering (SSR) with Angular in .NET Core 2.1
4. Deploy Angular and .NET Core 2.1 to the Azure Cloud

Approach Two: One Project to Rule them All

For the second approach, you generate a project that integrates Angular and .NET Core together. The client-side app will get built with the server-side app, deployed together, and it is even possible to debug the client and server in the same session. Why would you take this approach?

• You still retain full control of the Angular app using the Angular CLI (including being able to run ng update in the ClientApp folder)
• Source maps are automatically generated for you to debug TypeScript from the browser
• Client code is auto-recompiled for live development
• The production build automatically leverages the Ahead of Time (AoT) compiler
• You can deploy everything in one step
• There is support for server-side rendering (SSR) — but we’ll cover that in the next section

The template produces a fully functional app that fetches data from the server and features navigation. Simply do:

dotnet new angular

dotnet run

…and you’re there!

You can debug the app directly from Visual Studio. If you are using Visual Studio Code, create a debug profile, install the Chrome debugger, and populate launch.json with the following:

{
    "version": "0.2.0",
    "compounds": [
        {
            "name": "ASP.NET Core and Browser",
            "configurations": [
                ".NET Core Launch (web)",
                "Launch Chrome"
            ]
        }
    ],
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp2.1/ng-ssr.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": false
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": true,
            "url": "https://localhost:5001",
            "webRoot": "${workspaceFolder}/ClientApp",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        },
    ]
}

This creates two profiles, one for the browser and one for the back-end. You can choose the combined “ASP.NET Core and Browser” profile to set breakpoints in the TypeScript and C# source and debug seamlessly between the client and server. Now that you’re up and running, in the next article you’ll see how to pre-render pages using server-side rendering (SSR).

Learn more about using the Angular template with .NET Core.

Regards,

Previous: Get Started with Angular on .NET Core 2.1

Next: Server-side Rendering (SSR) with Angular in .NET Core 2.1

This is a four-part series. You can navigate to the parts below (links will become active as articles are available:

1. Get Started with Angular on .NET Core 2.1
2. The Angular .NET Core 2.1 Template (you are here)
3. Server-side Rendering (SSR) with Angular in .NET Core 2.1
4. Deploy Angular and .NET Core 2.1 to the Azure Cloud