Create an Angular 5 app in 5 steps using dotnet cli

Earlier I posted about creating an Angular 4 app with Visual Studio 2017 and then also talked about upgrading the same Angular 4 app to Angular 5 with Visual Studio 2017. Recently, ASP.NET team released release candidate version of Single-Page Application templates. These templates allow developers to create SPA application based on Angular, React, and React with Redux. At the time of writing this post, the final version is scheduled to release in Early 2018. This post shows how to create an Angular 5 app in 5 steps using dotnet cli.

Create an Angular 5 app in 5 steps using dotnet cli

Below are the 5 steps to create Angular 5 app using dotnet cli.

  • Step 1: Install the templates
  • dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final
  • Step 2: Create a new Angular App
  • dotnet new angular
  • Step 3: Change Environment variable to “Development”
  • SET ASPNETCORE_Environment=Development
  • Step 4: Build the application
  • dotnet build
  • Step 5: Finally, run the app
  • dotnet run

    That’s it. Copy the URL from command prompt and open in the browser and you should see Angular 5 app running. This is super cool and simple.

    Angular 5 app running in the browser

    You can verify the Angular version via package.json file. The Client side application is placed in /ClientApp folder and package.json file is present inside the /ClientApp folder. Below is the screenshot of the package.json file.

    Create an Angular 5 app in 5 steps using dotnet cli

    All the Angular plugins are pointing to Angular 5. You can also open this application in VS Code or Visual Studio 2017. There are a couple of things to take note of.

    • The ClientApp subdirectory is a standard Angular CLI application.

      Angular 5 App Structure

      So now, you can execute any ng command (e.g., ng test), or use npm to install extra packages into it.

    • By default, Server-side rendering is disabled.
    • In development mode, there’s no need to run ng serve. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file. So when you execute dotnet run command, you notice that ng serve command is executed.

      dotnet run command

      To understand this, open Startup.cs and take a look at the configure method code. The UseSpa middleware runs the Angular CLI in development mode.

    • As mentioned earlier, dotnet run command runs the Angular compiler in the background and this increases the compile time to compile the application. Even worse is when there is a C# code change, we need to restart the application and that will also restart the Angular compiler. To speed up things, the Angular server can be run as a standalone process. You can connect to it from the ASP.NET application. To do that, navigate to ClientApp directory on command prompt and run ng serve command to start the Angular server.

      Angular Server as a Standalone Process

      Copy the development server URL from the command prompt, and replace the following line in Startup.cs,

      spa.UseAngularCliServer(npmScript: "start");

      with,

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

      Execute the dotnet run command and you will notice it no longer execute ng serve command in the background.

      dotnet run command not executing ng serve

    • In production mode, development-time features are disabled, and your dotnet publish configuration automatically invokes ng build to produce minified, ahead-of-time compiled JavaScript files.

    Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

    PS: If you found this content valuable and want to return the favour, then
    Buy Me A Coffee

    7 thoughts on “Create an Angular 5 app in 5 steps using dotnet cli

    1. Mind blown. I had no idea developing angular 5 apps were so straightforward. A few commands and you’re ready to go. They made it almost as easy as installing MAMP. I will have to do some more dotnet publishing.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    2 × 1 =