Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn ASP.NET Core Using Angular 2

DZone's Guide to

Learn ASP.NET Core Using Angular 2

Ever wondered if you can use two different frameworks together to create an application? In this article, we'll show you how, using ASP.NET Core and Angular.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Introduction

In this article, we will learn ASP.NET Core using Angular 2 in Visual Studio 2017.

  • Why should we use Angular 2?
  • Why should we use ASP.NET Core?
  • What should we know about?
  • How do we use Angular 2 in ASP.NET Core?

Why Should We Use Angular 2?

Angular 2 is a great framework to use for getting the most out of the latest browsers and thus for creating better applications. Angular 2 can build applications that live on:

  • Web
  • Mobile
  • DesktopASP.NET Core

Each application consists of components. So a component is a logical boundary of functionality for the application. It needs to have layered services, which are used to share the functionality. It will share the following:

  • Template
  • Class
  • Metadata

Why Should We Use ASP.NET Core?

ASP.NET Core

ASP.NET is a new open-source and cross-platform framework for building modern, cloud-based applications, such as web apps, IoT apps, and mobile backends. It was architected to provide an optimized development framework for apps that are deployed to the cloud.

You can develop and run ASP.NET Core apps on:

  • Windows
  • Mac
  • LinuxASP.NET Core

ASP.NET Core is designed to integrate seamlessly with a variety of client-side frameworks, such as:

  • AngularJS
  • KnockoutJS
  • Bootstrap

What Should We Know?

Before we in on start Angular 2 and ASP.NET Core, let's just refresh our knowledge of a few things.

ASP.NET Core

TypeScript

Angular 2 writes only in TS files. Typescript is a superset of JavaScript developed and maintained by Microsoft. Typescript files are converted source code from another source language. This is one of the main features of most browser supporting languages standardized by ECMA Script. Additionally, developers can use Data types for variables with TypeScript.

Grunt JS Task Runner

Grunt is a JavaScript task runner which can be used a command line tool for JavaScript objects and it is a task manager written on top of Node.js. Grunt includes built-in tasks that expand the functionality of your plugins and scripts, and you can automate anything with less effort.

Angular 2

Angular 2 is different from Angular 1 but if you know Angular 1 it's a little bit easier to understand the code. If you want to know about Angular 1 and its advantages please visit my previous article.

ASP.NET Core MVC

You can create well-factored and testable web apps that follow the model-view-controller (MVC) pattern. You can build Web APIs and Restful apps that reach a broad range of clients, including browser and mobile users. 

Features

  • Build Web UIs and Web APIs.
  • Support modern client side frameworks.
  • Cloud-ready environment.
  • Build dependency injection.
  • Using NuGet Packages.
  • Open-source.
  • Cross platform support (Windows, Mac, Linux).

How to Use Angular 2 in ASP.NET Core

Prerequisites

Open Visual Studio 2017:

ASP.NET Core

Go to New Menu >Click New and then Project. Now it will open New Project Window.

ASP.NET Core

You can select ASP.NET Core Web Application on Framework 4.6. Enter the name of the project in the “Solution name” text box then click OK.

ASP.NET Core

Select web application and click “OK.”

ASP.NET Core

After your scaffolds solution explorer looks like the above picture, then if you can click on the PLAY button or IIS Express. Now, you can see the base application of ASP.NET Core.

ASP.NET Core

Now the application is ready for configuration, so let’s start.

Right click on  Add and then select New Item.

ASP.NET Core

It will open a popup to add new items. Here, you can find “npm Configuration File” for ASP.NET Core.

ASP.NET Core

After adding “package.json,” clean the inside code and copy-and-paste the below-given code.

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"  
  }  
}    

Again you can find “TypeScript JSON Configuration File” for ASP.NET Core.

ASP.NET Core

After adding “tsconfig.json,” clean the inside code and copy-and-paste the below-given code

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"  
  ]  
}  

Right click the project and select Add> New item. Find the JSON file and rename it as typings.json.

ASP.NET Core

Add the below code in typings.json.

JSON

{  
  "globalDependencies": {  
    "core-js": "registry:dt/core-js#0.9.0+20170324193834",  
    "node": "registry:dt/node#6.0.0+20161110151007"  
  }  
}  

So the above three files are more important for Angular 2 configurations. Then right click on package.json and click on Restore Packages. Just confirm all the files are installed in NPM.

ASP.NET Core

Right click the project and select Edit your project.csproj file.

ASP.NET Core

Add the below commend in this file:

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

Open the package manager console and run the following lines:

ASP.NET Core

You can create gulpfile.js using JavaScript then copy-and-paste the below-given code.

JavaScript

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']);    
});  

Right click on this gulpfile.js and open task Runner Explorer

ASP.NET Core

Refresh the bottom screen and then tasks will be loaded. Right click on it and run it.

ASP.NET Core

Right click on “wwwroot” and create a JavaScript file and rename it 'systemjs.config.js' and put it inside the code, as shown below. 

JavaScript

(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);   

Just copy-and-paste the tsconfig.json file. You are almost done with the configuration part. So let’s start writing Angular 2 code. Create a new folder inside the “wwwroot” and create TS files.

  • component.ts
  • module.ts
  • ts

After creating the above files, write code like what I've given below.

TypeScript

app.component.ts

import { Component } from '@angular/core'    
@Component({    
    selector: 'app-loader',    
    template: `    
<div>     
<div>    
 <h4>Welcome to Angular with ASP.NET Core and Visual Studio 2017</h4>  
</div></div>  
`    
})    
export class AppComponent{}   

app.module.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 { }  

main.ts

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

Open _Layout.cshtml in views>Shared and follow and put the following code inside the head tag.

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

Open index.cshtml in Views>Home and  write this line.

<app-loader>Loading...</app-loader>  

Now you can run the application and see our first Angular 2 page in ASP.NET Core.

Output 1

ASP.NET Core

Output 2

ASP.NET Core

Download Source Code Here.

Conclusion

In this article, we have learned about ASP.NET Core Using Angular 2. If you have any queries, please tell me through the comments section, because your comments are very valuable.

Happy Coding!

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
asp.net core ,angular 2 ,web dev ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}