Angular 5 and .NET Core 2 with Visual Studio 2017

Introduction

I had some struggle while creating and deploying .NET Core 2 and Angular 5 application with Visual Studio 2017. So, I thought to put all my steps at one place that might help others in setting up and deploying the application made with .NET Core 2 and Angular 5.

Background

The objective of this article is to provide steps to create a brand-new application (using Visual Studio 2017, .NET Core 2 and Angular 5) and deploy it to IIS. So let’s get started.

Prerequisite

1. Visual Studio 2017 with .NET Core and Node Development installed (You can use an IDE of your choice for .NET)
2. NodeJS - Install it from https://nodejs.org/en/download/current/
3. Node for IIS - Install it from https://github.com/tjanczuk/iisnode/releases

I will not get into the installation part as it is just download and standard click, click, click.

Development Setup

Open Visual Studio 2017 with (preferably Admin access) for creating a new .NET Core Web Application. Click Create new project, select ASP.NET Core Web Application, select relevant project Name and Location and hit Ok button.

In the following screen select Angular template and hit Ok button.

This will create the façade required for developing an Angular application with .NET Core.

This is our base/facade for leveraging the Angular platform.

Angular 5 Setup

Open Node.js command prompt (with Run as Administrator access).

And browse to the location of the project we just created above (from the screenshot above - C:\Users\amitk\Documents\Visual Studio 2017\Projects\WebApplication1\WebApplication1). So, on the command prompt type cd C:\Users\amitk\Documents\Visual Studio 2017\Projects\WebApplication1\WebApplication1

With dir command you should see the package.json in the listing.

Now we are ready to execute few commands to setup Angular 5:

1. Make sure latest npm is installed. So, execute the command npm install -g npm
2. Then update the Angular package using commands:
   1. npm install -g npm-check-updates
   2. and then ncu -u

You will notice that your package.json file is now updated with Angular 5 libraries.

Tweaks

1. Now we need to modify the webpack.config.js Why? Because the Angular 4 and below support AOT compiler but Angular 5 and above do no support AOT compile while deployment. Reference - https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

Open webpack.config.js in Visual Studio and replace all occurrences of AotPlugin to AngularCompilerPlugin

Save and close webpack.config.js.

1. In Visual Studio open file ClientApp/boot.server.ts

You will see error at line 25 (zone.onError.subscribe((errorInfo: any) => reject(errorInfo));)

Change the declaration at line 22

From this - const zone = moduleRef.injector.get(NgZone);

To this   - const zone: NgZone = moduleRef.injector.get(NgZone);

The error will now be gone. Save and close this file.

1. In Visual Studio open file ClientApp/app/app.browser.module.ts

And add the following after the last import statement:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Also, in the import section add – BrowserAnimationsModule

Screenshot of the modified file:

       4. In Visual Studio open file Views/Home/Index.cshtml and change the line

From <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

To <app>Loading...</app>

We are now done with the development setup. Hit F5 in Visual Studio to see your application running.

Final Steps for Deployment

1. Open IIS (Run as Administrator access if possible). Right click on Sites and select Add Website. Input site name, deployed folder path and port to complete Add Website setup and hit Ok button.
   
2. Now we need to configure the Application Pool. Click Application Pools in IIS and double click the TestAngular5 application pool to edit it. Change the .NET CLR version to No Managed Code and hit Ok button.
   
3. Come back to Visual Studio and publish the website to folder setup in IIS (in Step 1).

Hit publish to deploy the application. Then open your favorite browser and browse to http://localhost:160

If everything is well in place you should see your brand new Angular 5 .NET Core website up and running:

Conclusion

Hope this tutorial will help beginners or people looking for setting up Angular 5. I learnt all this will hit and trial and studying various blogs. Enjoy!!!