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.
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final
dotnet new angular
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
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.
ClientAppsubdirectory is a standard Angular CLI application.
So now, you can execute any
ngcommand (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 runcommand, you notice that
ng servecommand is executed.
To understand this, open Startup.cs and take a look at the
configuremethod code. The
UseSpamiddleware runs the Angular CLI in development mode.
- As mentioned earlier,
dotnet runcommand 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 servecommand to start the Angular server.
Copy the development server URL from the command prompt, and replace the following line in Startup.cs,
dotnet runcommand 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 publishconfiguration automatically invokes
Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.