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



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.

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



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



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

Code snippet of tsconfig.json 

{
  "compileOnSave": true,
  "compilerOptions":
  {

    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

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.



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

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



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.

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



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.



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

Code snippet of systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(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.



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.





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

Code snippet of app.component.ts

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

 

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.



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.



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

Code snippet of AppComponent.ts 

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "../app/app.component";
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

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.





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

Code snippet of main.ts

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";

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



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.



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

Code snippet index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home</title>
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../systemjs.config.js"></script>

    <script>
        System.import('app')
            .then(
            function () { console.log('started application'); },
            function (err) { console.log('error starting application'); console.log(err); });
    </script>
</head>
<body>
    <app-loader>Loading...</app-loader>
</body>
</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.


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.



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



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.



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



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

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

Below is snapshot of it in details



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



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