Click here to Skip to main content
13,792,910 members
Click here to Skip to main content
Add your own
alternative version

Stats

79.1K views
34 bookmarked
Posted 17 Dec 2017
Licenced CPOL

Angular 5 and .NET Core 2 with Visual Studio 2017

, 17 Dec 2017
Rate this:
Please Sign up or sign in to vote.
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.

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

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.

You may also be interested in...

Comments and Discussions

 
QuestionHow is it that this does not work at all? Pin
Member 26172947-Jun-18 3:25
memberMember 26172947-Jun-18 3:25 
AnswerInstall latest templates here Pin
vmzi18-Apr-18 10:31
membervmzi18-Apr-18 10:31 
QuestionCannot find module '@angular-devkit/core' Pin
Member 134756792-Apr-18 1:32
memberMember 134756792-Apr-18 1:32 
QuestionPublish Error Pin
Member 1375094728-Mar-18 0:37
memberMember 1375094728-Mar-18 0:37 
AnswerRe: Publish Error Pin
shivendra pratik3-May-18 0:34
professionalshivendra pratik3-May-18 0:34 
QuestionVery well explained.. Good news is Angular 5 template is coming to VS 2017.. Pin
Talking Dotnet4-Mar-18 20:16
memberTalking Dotnet4-Mar-18 20:16 
Question[My vote of 2] Am I missing something? Pin
Member 1369177522-Feb-18 13:05
memberMember 1369177522-Feb-18 13:05 
QuestionPublish - breaks project Pin
Member 1338389913-Feb-18 8:50
memberMember 1338389913-Feb-18 8:50 
AnswerRe: Publish - breaks project Pin
Member 1375094728-Mar-18 0:57
memberMember 1375094728-Mar-18 0:57 
GeneralRe: Publish - breaks project Pin
Member 1338389928-Mar-18 9:35
memberMember 1338389928-Mar-18 9:35 
Questionnpm Pin
Member 66217313-Feb-18 7:33
memberMember 66217313-Feb-18 7:33 
QuestionPublish Error - AngularCompilerPlugin is not a constructor Pin
Michael Hagesfeld8-Feb-18 11:47
memberMichael Hagesfeld8-Feb-18 11:47 
AnswerRe: Publish Error - AngularCompilerPlugin is not a constructor Pin
Member 1375094728-Mar-18 0:58
memberMember 1375094728-Mar-18 0:58 
QuestionAdditional Step for IE11 Pin
tflambert6-Feb-18 3:55
membertflambert6-Feb-18 3:55 
QuestionIssues while publishing Pin
Rakesh Androtula30-Jan-18 4:58
memberRakesh Androtula30-Jan-18 4:58 
AnswerRe: Issues while publishing Pin
Michael Hagesfeld8-Feb-18 11:43
memberMichael Hagesfeld8-Feb-18 11:43 
AnswerRe: Issues while publishing Pin
Member 1375094728-Mar-18 0:40
memberMember 1375094728-Mar-18 0:40 
Questionncu -u command take very long and not progressing Pin
Member 1094421816-Jan-18 15:55
memberMember 1094421816-Jan-18 15:55 
AnswerRe: ncu -u command take very long and not progressing Pin
Sushil Mate1-Feb-18 0:36
memberSushil Mate1-Feb-18 0:36 
SuggestionStep 4 for disabling server side rendering Pin
mustiy7-Jan-18 9:01
membermustiy7-Jan-18 9:01 
QuestionNPM Packages are not updated. Pin
Chularansi5-Jan-18 10:21
memberChularansi5-Jan-18 10:21 
AnswerRe: NPM Packages are not updated. Pin
ptolemaios21-Feb-18 20:32
memberptolemaios21-Feb-18 20:32 
GeneralRe: NPM Packages are not updated. Pin
Member 134756792-Apr-18 1:33
memberMember 134756792-Apr-18 1:33 
PraiseThank you Pin
_René3-Jan-18 0:25
member_René3-Jan-18 0: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.181207.3 | Last Updated 17 Dec 2017
Article Copyright 2017 by Amit Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid