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

Below Link is of Github provide for downloading source code.

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

ASP.NET Core

It will download a bootstrapper as shown below.

ASP.NET Core


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.
ASP.NET Core
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.

ASP.NET Core

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.

ASP.NET Core

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.

ASP.NET Core

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

ASP.NET Core


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.

ASP.NET Core

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.

ASP.NET Core

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.

ASP.NET Core

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.

ASP.NET Core

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.

ASP.NET Core

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… .

ASP.NET Core

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.

ASP.NET Core

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 

  1. {  
  2.   "version""1.0.0",  
  3.   "name""asp.net",  
  4.   "private"true,  
  5.   "devDependencies": {  
  6.     "@angular/common""^2.3.1",  
  7.     "@angular/compiler""^2.3.1",  
  8.     "@angular/core""^2.3.1",  
  9.     "@angular/forms""^2.3.1",  
  10.     "@angular/http""^2.3.1",  
  11.     "@angular/platform-browser""^2.3.1",  
  12.     "@angular/platform-browser-dynamic""^2.3.1",  
  13.     "@angular/router""^3.3.1",  
  14.     "es6-shim""^0.35.0",  
  15.     "core-js""^2.4.1",  
  16.     "reflect-metadata""^0.1.3",  
  17.     "rxjs""5.0.0-beta.12",  
  18.     "systemjs""0.19.27",  
  19.     "zone.js""^0.6.23",  
  20.     "angular2-in-memory-web-api""0.0.20",  
  21.     "body-parser""1.14.1",  
  22.     "bootstrap""3.3.5",  
  23.     "jquery""2.1.4"  
  24.   },  
  25.   "dependencies":   
  26.   {  
  27.     "del""2.1.0",  
  28.     "gulp""3.9.0",  
  29.     "gulp-typescript""^2.13.4",  
  30.     "gulp-watch""4.3.5",  
  31.     "merge""1.2.0",  
  32.     "typescript""^2.0.2",  
  33.     "typings""^1.3.3",  
  34.     "rimraf""^2.5.4"  
  35.   },  
  36.   "scripts": {  
  37.     "postinstall""typings install"  
  38.   }  
  39. }  

ASP.NET Core

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

Below is solution view after it has completed downloading package.

ASP.NET Core

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.

In Scripts section select TypeScript JSON Configuration File and click on Add button.

ASP.NET Core

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

ASP.NET Core

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

Code snippet of tsconfig.json 

  1. {  
  2.   "compileOnSave"true,  
  3.   "compilerOptions":   
  4.   {  
  5.   
  6.     "target""es5",  
  7.     "module""commonjs",  
  8.     "moduleResolution""node",  
  9.     "sourceMap"true,  
  10.     "emitDecoratorMetadata"true,  
  11.     "experimentalDecorators"true,  
  12.     "removeComments"false,  
  13.     "noImplicitAny"true,  
  14.     "suppressImplicitAnyIndexErrors"true  
  15.   },  
  16.   "exclude": [  
  17.     "node_modules",  
  18.     "wwwroot"  
  19.   ]  
  20. }   

Adding typings.json file to 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 - General.

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

ASP.NET Core

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

ASP.NET Core

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

Code snippet of typings.json 

  1. {  
  2.   "globalDependencies": {  
  3.     "core-js""registry:dt/core-js#0.9.0+20170324193834",  
  4.     "node""registry:dt/node#6.0.0+20161110151007"  
  5.   }  
  6. }  

 ASP.NET Core

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.

ASP.NET Core

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

ASP.NET Core

Path: - D:\Angular\WebAngularRAC\WebAngularRAC

Now open Command Prompt as administrator.

ASP.NET Core

We need to install 2 things

  1. Core-js
  2. Node

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

ASP.NET Core

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

Command

 typings install dt~core-js --global

ASP.NET Core

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

Command

- typings install dt~node --global

ASP.NET Core

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.

ASP.NET Core


ASP.NET Core

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

Code snippet of gulpfile.js

  1. var gulp = require('gulp');  
  2.   
  3. gulp.task('thirdparty'function ()  
  4. {  
  5.     gulp.src('./node_modules/core-js/**/*.js')  
  6.         .pipe(gulp.dest('./wwwroot/node_modules/core-js'));  
  7.   
  8.     gulp.src('./node_modules/@angular/**/*.js')  
  9.         .pipe(gulp.dest('./wwwroot/node_modules/@angular'));  
  10.   
  11.     gulp.src('./node_modules/zone.js/**/*.js')  
  12.         .pipe(gulp.dest('./wwwroot/node_modules/zone.js'));  
  13.   
  14.     gulp.src('./node_modules/systemjs/**/*.js')  
  15.         .pipe(gulp.dest('./wwwroot/node_modules/systemjs'));  
  16.   
  17.     gulp.src('./node_modules/reflect-metadata/**/*.js')  
  18.         .pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata'));  
  19.   
  20.     gulp.src('./node_modules/rxjs/**/*.js')  
  21.         .pipe(gulp.dest('./wwwroot/node_modules/rxjs'));  
  22.   
  23. });  
  24.   
  25. gulp.task('copy'function ()  
  26. {  
  27.     gulp.src('./app/**/*.*')  
  28.         .pipe(gulp.dest('./wwwroot/app'));  
  29. });  
  30.   
  31. gulp.task('watch'function ()  
  32. {  
  33.     gulp.watch('./app/**/*.*', ['copy']);  
  34. });  

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

ASP.NET Core

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.

ASP.NET Core

View after running task.

ASP.NET Core

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

ASP.NET Core

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.

In Scripts section select Javascript File and rename file as systemjs.config.js click on Add button to Add.

ASP.NET Core

After selecting New item.. a new dialog will pop up with name Add New Item, in that select JavaScript file and name this as systemjs.config.js and click on Add.

ASP.NET Core

After adding system.config.js just copy paste this all below code snippet to system.config.js

Code snippet of systemjs.config.js

  1. /** 
  2.  * System configuration for Angular 2 samples 
  3.  * Adjust as necessary for your application needs. 
  4.  */  
  5. (function (global) {  
  6.     // map tells the System loader where to look for things  
  7.     var map = {  
  8.         'app''app'// 'dist',  
  9.         '@angular''node_modules/@angular',  
  10.         'rxjs''node_modules/rxjs'  
  11.     };  
  12.     // packages tells the System loader how to load when no filename and/or no extension  
  13.     var packages = {  
  14.         'app': { main: 'main.js', defaultExtension: 'js' },  
  15.         'rxjs': { defaultExtension: 'js' }  
  16.     };  
  17.     var ngPackageNames = [  
  18.         'common',  
  19.         'compiler',  
  20.         'core',  
  21.         'forms',  
  22.         'http',  
  23.         'platform-browser',  
  24.         'platform-browser-dynamic',  
  25.         'router'  
  26.     ];  
  27.     // Individual files (~300 requests):  
  28.     function packIndex(pkgName) {  
  29.         packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };  
  30.     }  
  31.     // Bundled (~40 requests):  
  32.     function packUmd(pkgName) {  
  33.         packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };  
  34.     }  
  35.     // Most environments should use UMD; some (Karma) need the individual index files  
  36.     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;  
  37.     // Add package entries for angular packages  
  38.     ngPackageNames.forEach(setPackageConfig);  
  39.     var config = {  
  40.         map: map,  
  41.         packages: packages  
  42.     };  
  43.     System.config(config);  
  44. })(this);  

After adding system.config.js file next we are going to add app folder in wwwroot.

Adding we are going to add app folder

In this folder, we are going keep the entire Angular application.

ASP.NET Core

After completing with adding app folder next we are going to add a component to this app folder.

Adding AppComponent.ts file in app folder

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 pop up with name -Add New Item” inside this dialog from left panel choose Installed - ASP.NET Core - Web - Scripts.

In Scripts section select Typescript File and name file as AppComponent.ts click on Add button to add.

ASP.NET Core

ASP.NET Core

After adding file just copy below code snippet into app.component.ts file.

Code snippet of app.component.ts

  1. import { Component } from '@angular/core'  
  2. @Component({  
  3.     selector: 'app-loader',  
  4.     template: `  
  5. <div>   
  6. <div class='container'>  
  7. <div class="alert alert-success">  
  8.   <strong>Success!</strong>  Welcome to Angular with ASP.NET CORE and VisualStudio 2017 :- by Saineshwar bageri.  
  9. </div></div></div>    
  10. `  
  11. })  
  12. export class AppComponent{}  

 ASP.NET Core

After pasting this code in AppComponent.ts files now just save this file it will generate an AppComponent.js file below.

Note

If you are saving and it is not generating a file then just copy tsconfig.json file and paste it in wwwroot folder.

ASP.NET Core

Adding app.module.ts file in the app folder

For adding Typescript File first right click on wwwroot folder and select Add - inside that select New Item… .

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

In Scripts section select Typescript File and name file as app.module.ts click on Add button to add.

ASP.NET Core

After adding app.module.ts file just copy below code snippet into app.module.ts file.

Code snippet of AppComponent.ts 

  1. import { NgModule } from "@angular/core";  
  2. import { BrowserModule } from "@angular/platform-browser";  
  3. import { AppComponent } from "../app/app.component";  
  4. @NgModule({  
  5.     imports: [BrowserModule],  
  6.     declarations: [AppComponent],  
  7.     bootstrap: [AppComponent]  
  8. })  
  9. export class AppModule { }  

ASP.NET Core

After adding app.module.ts file next we are going to add the main bootstrapping file of angular.

Adding main.ts file in the app folder

For adding Typescript File first right click on wwwroot folder and select Add - inside that select New Item… .

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

In Scripts section select Typescript File and name file as main.ts click on Add button to add.

ASP.NET Core

ASP.NET Core

After adding main.ts file just copy below code snippet into main.ts file.

Code snippet of main.ts

  1. import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";  
  2. import { AppModule } from "./app.module";  
  3.   
  4. platformBrowserDynamic().bootstrapModule(AppModule);  

After adding code snippet just save file.

Next, we are going to add the main page to launch application index.html

Adding index.html file in app folder

For adding Html File first right click on wwwroot folder and select Add - inside that select New Item… .

ASP.NET Core

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

In Content, section selects Html File and name file as Index.html click on Add button to add.

ASP.NET Core

After adding index.html file just copy below code snippet into html file.

Code snippet index.html 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Home</title>  
  6.     <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />  
  7.   
  8.     <script src="../node_modules/core-js/client/shim.min.js"></script>  
  9.     <script src="../node_modules/zone.js/dist/zone.js"></script>  
  10.     <script src="../node_modules/reflect-metadata/Reflect.js"></script>  
  11.     <script src="../node_modules/systemjs/dist/system.src.js"></script>  
  12.     <script src="../systemjs.config.js"></script>  
  13.   
  14.     <script>  
  15.         System.import('app')  
  16.             .then(  
  17.             function () { console.log('started application'); },  
  18.             function (err) { console.log('error starting application'); console.log(err); });  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <app-loader>Loading...</app-loader>  
  23. </body>  
  24. </html>   

Finally we have completed setting up angular application next we are going save entire application and run.

Ha, but we have not kept startup page yet let's set startup page for the application.

Making index.html as startup page

For setting startup page open Startup.cs file in the project.

ASP.NET Core
After opening Startup.cs class next we are going have a look on routing to see what is default routing set.

The defaulting routing is set to Controller: - Home Action method: - Index.

ASP.NET Core

To set default page we can directly edit our Home controller index action method and set it to redirect to the index.html page.

ASP.NET Core

Note

We are setting the default page setting to temporary;  after that we are going to set default page from Angular routing itself in next part.

Save and Run application

Now Save your project and run it.

You might be finding this kind of error while building.

ASP.NET Core

To resolve this error you might need to edit your project .csproj file as shown below.

ASP.NET Core

After opening .csproj file in edit mode you need to Add below element in Property Group element.

  1. <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>  

Below is snapshot of it in details

ASP.NET Core

Now save the entire project and run the application again it should work now.

ASP.NET Core

Finally, we have learned how to configure angular with ASP.NET core.