Create an Angular 5 app in 5 steps using dotnet cli

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

1	dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final

Step 2: Create a new Angular App

1	dotnet new angular

Step 3: Change Environment variable to “Development”

1	SET ASPNETCORE_Environment=Development

Step 4: Build the application

1	dotnet build

Step 5: Finally, run the app

1	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.

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.

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.
  
  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.
  
  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.

  	app.UseSpa(spa =>
  	{
  	// To learn more about options for serving an Angular SPA from ASP.NET Core,
  	// see https://go.microsoft.com/fwlink/?linkid=864501
  	spa.Options.SourcePath = "ClientApp";
  	if (env.IsDevelopment())
  	{
  	spa.UseAngularCliServer(npmScript: "start");
  	}
  	});

  view rawAngular5Startup.cs hosted with  by GitHub
• 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.
  
  Copy the development server URL from the command prompt, and replace the following line in Startup.cs,

  1	spa.UseAngularCliServer(npmScript: "start");

  with,

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

  Execute the dotnet run command and you will notice it no longer execute ng serve command in the background.
  
• 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.