Jeremy Likness
Jeremy Likness
Empowering developers to be their best.
📅 Sep 11, 2018 🕘 3 min read 💬 531 words

The Angular .NET Core 2.1 Template (Part Two)

One project to rule them all!

Part of the series: Angular and .NET Core

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!

Standard template for Angular and .NET Core integration

Standard template for Angular and .NET Core integration

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,

Jeremy Likness

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

Part of the series: Angular and .NET Core

  1. Get Started with Angular on .NET Core 2.1 (Part One)
  2. The Angular .NET Core 2.1 Template (Part Two)
  3. Server-side Rendering (SSR) with Angular in .NET Core 2.1 (Part Three)
  4. Deploy Angular and .NET Core 2.1 to the Azure Cloud (Part Four)
 
 
comments powered by Disqus