Setting Up Angular Project With ASP.NET Core And Visual Studio 2017

In this part, we are going to learn how to set up Angular projects with ASP.NET Core and Visual Studio 2017, for doing this first we need to download Visual Studio community 2017 from https://www.visualstudio.com/downloads/ site.

After visiting this site just click on Visual Studio Community 2017 [Free download] button to download it.

Installing Visual Studio 2017

It will download a bootstrapper as shown below.

After downloading it just click on vs_community .exe file it will ask for permission to make computer click on yes button a new screen will pop up.
Click on Continue button -- a new dialog will popup with three versions of Visual Studio [ Community, Enterprise, Professional] for this demo we are going to use Community Edition.

Note

I have already installed Visual Studio Community 2017 that's why it is showing update button.

After clicking on install button it will launch a new window in that we are going to see workloads; in that workload just see Web & Cloud panel in that panel select ASP.NET and web development and click on install.

After completing the installation of Visual Studio 2017 next we need to install Node.js.

Installing Node.js

For downloading Node.js just visit https://nodejs.org/en/ when u visit this site it will recognize your operating system installed and will show you a specific version to download.

If you did not get proper version then just click on Downloads Menu.

On this page, you can select specific version according to your operating system and install.

Starting Visual Studio

After completing installation now let's open Visual Studio 2017.

Now let start with creating our first project in ASP.NET Core.

For creating a project from Menu select File inside that select New - then Project.

After selecting a project a new dialog will popup with name -New Project” now from let panel just select Templates inside Templates select Visual C# - Web after that choosing it will show a list of Project Templates as shown in below dialog.

In this project template, we are going to select -ASP.NET Core Web Application (.Net Framework)” and name project as -WebAngularRAC” and click OK button to create a project.

After clicking on OK button a new dialog will popup for Template selection. In this we are going to choose -Web Application” and final click on OK button to create a project.

Wow, we have created our first project in ASP.NET Core now let’s start to setup angular in this project.

For setting up Angularthe first thing we need to do is download packages of Angular, and for doing that from Visual Studio we need to add a file called package.json to the project.

Adding package.json to project

For adding a package.json file first right click on project (WebAngularRAC) and select Add - inside that select New Item… .

After selecting New Item… a new dialog will popup with name -Add New Item” inside this dialog from left panel choose Installed - ASP.NET Core - General.

In General section select npm Configuration File and click on Add button.

After adding this file just copy and add this package as it is in the package.json files and press Cltr + S (Save).

Code snippet of package.json

{

"version": "1.0.0",

"name": "asp.net",

"private": true,

"devDependencies": {

"@angular/common": "^2.3.1",

"@angular/compiler": "^2.3.1",

"@angular/core": "^2.3.1",

"@angular/forms": "^2.3.1",

"@angular/http": "^2.3.1",

"@angular/platform-browser": "^2.3.1",

"@angular/platform-browser-dynamic": "^2.3.1",

"@angular/router": "^3.3.1",

"es6-shim": "^0.35.0",

"core-js": "^2.4.1",

"reflect-metadata": "^0.1.3",

"rxjs": "5.0.0-beta.12",

"systemjs": "0.19.27",

"zone.js": "^0.6.23",

"angular2-in-memory-web-api": "0.0.20",

"body-parser": "1.14.1",

"bootstrap": "3.3.5",

"jquery": "2.1.4"

},

"dependencies":

{

"del": "2.1.0",

"gulp": "3.9.0",

"gulp-typescript": "^2.13.4",

"gulp-watch": "4.3.5",

"merge": "1.2.0",

"typescript": "^2.0.2",

"typings": "^1.3.3",

"rimraf": "^2.5.4"

},

"scripts": {

"postinstall": "typings install"

}

}

After you save this file it starts downloading all files from Node Package Manager.

Below is solution view after it has completed downloading package.

Next step we are going to add a tsconfig.json file to project.

Adding tsconfig.json file to project

This file indicates how your typescript projectwill be compiled (Transpile).

This files must be added to the root directory of the project.

For adding tsconfig.json file first right click on project (WebAngularRAC) and select Add - inside that select New Item… .

After selecting New Item… a new dialog will popup with name -Add New Item” inside this dialog from left panel choose Installed - ASP.NET Core - Web - Scripts.

For adding tsconfig.json file first right click on project (WebAngularRAC) and select Add - inside that select New Item… .

After selecting New Item… a new dialog will popup with name -Add New Item” inside this dialog from left panel choose Installed - ASP.NET Core - Web - General.

In General, Section selects JSON File and rename the file as typings.json click on Add button to Add.

Below is complete view after adding tsconfig.json file to project.

After adding this file next just copy and past as below.

Code snippet of typings.json

{

"globalDependencies": {

"core-js": "registry:dt/core-js#0.9.0+20170324193834",

"node": "registry:dt/node#6.0.0+20161110151007"

}

}

Next step is to installing Typings.json to project.

Installing typings.json from Node.js

The first step to installing typings.json is to open the root folder in File Explorer.

After opening this project in file explorer copy the path of it.

Path: - D:\Angular\WebAngularRAC\WebAngularRAC

Now open Command Prompt as administrator.

We need to install 2 things

Core-js

Node

Now after opening command prompt next, we are going to change directory and go in a directory which we have copied (Project directory).

Next, we are going to type command to install core-js.

Command

typings install dt~core-js --global

Next we are going to type command to install core-js.

Command

- typings install dt~node --global

After running this command you will find typings folder in the project within that folder we are going to see globals folder in globals folder you will see 2 other folders of Core-js and node.

After installing next we are going to add a gulp.js file for using gulpfile.js to move files.

Adding gulpfile.js file to project

In this file, we are going write automation task to copy the folder from one location to another. We are going to copy node_modules folder which gets added after saving the package.json file, we are going to move it to the wwwroot folder because it contains JavaScript’s library in it and if we want to make this files available to the browser then we need to keep this thing in a wwwroot folder only.

After adding gulpfile.js next just copy and paste below settings.

Code snippet of gulpfile.js

var gulp = require('gulp');

gulp.task('thirdparty', function ()

{

gulp.src('./node_modules/core-js/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/core-js'));

gulp.src('./node_modules/@angular/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/@angular'));

gulp.src('./node_modules/zone.js/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/zone.js'));

gulp.src('./node_modules/systemjs/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/systemjs'));

gulp.src('./node_modules/reflect-metadata/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata'));

gulp.src('./node_modules/rxjs/**/*.js')

.pipe(gulp.dest('./wwwroot/node_modules/rxjs'));

});

gulp.task('copy', function ()

{

gulp.src('./app/**/*.*')

.pipe(gulp.dest('./wwwroot/app'));

});

gulp.task('watch', function ()

{

gulp.watch('./app/**/*.*', ['copy']);

});

As we add this task in gulpfile.js there is Task runner explorer in windows which will show this entire task in it.

Running TaskRunner to copy files to wwwroot folder

After adding glupfile.js file next we are going to run a task to move files into the wwwroot folder.

View after running task.

After running task runner you will see the node_modules folder in a wwwroot folder with all angular files.

After running task next we are going add a systemjs.config.js file in the wwwroot folder.

Adding systemjs.config.js file

For adding systemjs.config.js file first right click on wwwroot folder and select Add - inside that select New Item… .

After selecting New Item… a new dialog will popup with name -Add New Item” inside this dialog from left panel choose Installed - ASP.NET Core - Web - Scripts.