Click here to Skip to main content
14,634,522 members
Articles » Web Development » ASP.NET » General
Article
Posted 17 Dec 2017

Stats

95.6K views
35 bookmarked

Angular 5 and .NET Core 2 with Visual Studio 2017

Rate this:
4.07 (17 votes)
Please Sign up or sign in to vote.
4.07 (17 votes)
17 Dec 2017CPOL
Steps to setup Angular 5 with .NET Core 2 in Visual Studio 2017 for development and deployment.

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.

Image 1

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

Image 2

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

Image 3

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

Angular 5 Setup

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

Image 4

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

Image 5

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

Image 6

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.

Image 7

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:

            Image 8

       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.

Image 9

 

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.
    Image 10
  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.
    Image 11
  3. Come back to Visual Studio and publish the website to folder setup in IIS (in Step 1).

Image 12

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:

Image 13

 

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amit Kumar Tiwari
Technical Lead
United States United States
I am a developer in Microsoft Technologies like .NET, SharePoint etc.

Comments and Discussions

 
QuestionHow is it that this does not work at all? Pin
Member 26172947-Jun-18 2:25
MemberMember 26172947-Jun-18 2:25 
AnswerInstall latest templates here Pin
vmzi18-Apr-18 9:31
Membervmzi18-Apr-18 9:31 
QuestionCannot find module '@angular-devkit/core' Pin
Member 134756792-Apr-18 0:32
MemberMember 134756792-Apr-18 0:32 
QuestionPublish Error Pin
Member 1375094727-Mar-18 23:37
MemberMember 1375094727-Mar-18 23:37 
AnswerRe: Publish Error Pin
shivendra pratik2-May-18 23:34
professionalshivendra pratik2-May-18 23:34 
QuestionVery well explained.. Good news is Angular 5 template is coming to VS 2017.. Pin
Talking Dotnet4-Mar-18 19:16
MemberTalking Dotnet4-Mar-18 19:16 
Question[My vote of 2] Am I missing something? Pin
Member 1369177522-Feb-18 12:05
MemberMember 1369177522-Feb-18 12:05 
QuestionPublish - breaks project Pin
Member 1338389913-Feb-18 7:50
MemberMember 1338389913-Feb-18 7:50 
AnswerRe: Publish - breaks project Pin
Member 1375094727-Mar-18 23:57
MemberMember 1375094727-Mar-18 23:57 
GeneralRe: Publish - breaks project Pin
Member 1338389928-Mar-18 8:35
MemberMember 1338389928-Mar-18 8:35 
Questionnpm Pin
Member 66217313-Feb-18 6:33
MemberMember 66217313-Feb-18 6:33 
QuestionPublish Error - AngularCompilerPlugin is not a constructor Pin
Michael Hagesfeld8-Feb-18 10:47
MemberMichael Hagesfeld8-Feb-18 10:47 
AnswerRe: Publish Error - AngularCompilerPlugin is not a constructor Pin
Member 1375094727-Mar-18 23:58
MemberMember 1375094727-Mar-18 23:58 
QuestionAdditional Step for IE11 Pin
tflambert6-Feb-18 2:55
Membertflambert6-Feb-18 2:55 
QuestionIssues while publishing Pin
Rakesh Androtula30-Jan-18 3:58
MemberRakesh Androtula30-Jan-18 3:58 
AnswerRe: Issues while publishing Pin
Michael Hagesfeld8-Feb-18 10:43
MemberMichael Hagesfeld8-Feb-18 10:43 
AnswerRe: Issues while publishing Pin
Member 1375094727-Mar-18 23:40
MemberMember 1375094727-Mar-18 23:40 
Questionncu -u command take very long and not progressing Pin
Member 1094421816-Jan-18 14:55
MemberMember 1094421816-Jan-18 14:55 
AnswerRe: ncu -u command take very long and not progressing Pin
Sushil Mate31-Jan-18 23:36
MemberSushil Mate31-Jan-18 23:36 
SuggestionStep 4 for disabling server side rendering Pin
mustiy7-Jan-18 8:01
Membermustiy7-Jan-18 8:01 
QuestionNPM Packages are not updated. Pin
Chularansi5-Jan-18 9:21
MemberChularansi5-Jan-18 9:21 
AnswerRe: NPM Packages are not updated. Pin
ptolemaios21-Feb-18 19:32
Memberptolemaios21-Feb-18 19:32 
GeneralRe: NPM Packages are not updated. Pin
Member 134756792-Apr-18 0:33
MemberMember 134756792-Apr-18 0:33 
PraiseThank you Pin
_René2-Jan-18 23:25
Member_René2-Jan-18 23:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.