Setup Angular 2.0 with Typescript in ASP.NET Core 1.0 using Visual Studio Code

#Introduction –

Angular 2.0 and ASP.NET Core are the latest technologies which have gathered a lot of developer attention in the industry these days. In this article, we will see how to setup Angular 2.0 with Typescript in ASP.NET Core using Visual Studio Code. Please note that, this is a beginner level article and focuses only on application setup and by any means should not be considered the only way to setup Angular 2.0 with Typescript in ASP.NET Core.

#Tools –

It is very important to have the latest version of node.js and npm on your machine as Angular itself depends upon many third party packages, which can be installed using npm. I am using node.js v6.7.0 and npm v3.8.9 which is currently the latest version as I am writing this article. You should at least have node.js v5.x.x or above.

We start by creating a basic structure of the application using “Yeoman”. If you’re not familiar with yeoman, you should surely checkout this amazing command line utility. You can create any kind of apps using yeoman. For more information about setting up Yeoman on your machine, please check out this link. Using “yeoman” for this demo is my personal choice. You can create a basic application using DotNet CLI as well.

#Setup –

1. Setting up a basic ASP.NET Core MVC App using Yeoman:

  • Open “Command Prompt” with Administrator rights.

    open command prompt with admin rights
  • Point to the directory where you want to create your asp.net core web app.

    command prompt points to app directory
  • Type in “yo aspnet”, which gives you several options to create an app. Press down arrow key and select “Web Application Basic [without Membership and Authorization]” and press enter.

    app creation using yeoman - step one
  • Select your favorite UI framework and press enter.

    app creation using yeoman - step two
  • Enter a name for your web app and press enter.

    app creation using yeoman - step three
  • And within few seconds your basic asp.net core web app is created.

    app creation using yeoman - step four
  • Once the app is created you need to restore all dependencies, but first you need to point towards the app directory. For that you need to fire “cd {Your-Project-Folder}” command.

    app creation using yeoman - step five
  • Restoring dependencies will actually download all your asp.net core and other dependencies on your machine. To restore, fire this command “dotnet restore”. While restoring it looks at “project.json” file for dependencies, which is created in the above step.

    app creation using yeoman - step six
  • You can now run the basic app by firing this command “dotnet run”. This command builds your application and runs the application pointing at “localhost:5000”.

    app creation using yeoman - step seven


2. Setting up Angular 2.0 and Typescript:

Setting up Angular 2.0 with Typescript involves some manual work. We start by adding some configuration files into the root directory. So let’s open the newly created app using Visual Studio Code. Once the app is opened we now need to add 4 different configuration files as mentioned below… Note: Before you run “npm install”, it is very important that you have “Typescript” and “Typings” installed on your machine. You should install these dependencies at a global level. To install “Typescript” you can use npm or directly download latest version from Typescript’s official website. And you can install “Typings” using npm from the following link.

  • package.json: This file contains all the npm package dependencies for this project. In Visual Studio code, add a new file in the root directory and call it as “package.json” and add the below given code in it.

    {
            "name": "angular-quickstart",
            "version": "1.0.0",
            "scripts": {
                "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
                "lite": "lite-server",
                "postinstall": "typings install && gulp restore",
                "tsc": "tsc",
                "tsc:w": "tsc -w",
                "typings": "typings"
            },
            "license": "ISC",
            "dependencies": {
                "@angular/common": "~2.0.1",
                "@angular/compiler": "~2.0.1",
                "@angular/core": "~2.0.1",
                "@angular/forms": "~2.0.1",
                "@angular/http": "~2.0.1",
                "@angular/platform-browser": "~2.0.1",
                "@angular/platform-browser-dynamic": "~2.0.1",
                "@angular/router": "~3.0.1",
                "@angular/upgrade": "~2.0.1",
                "angular-in-memory-web-api": "~0.1.1",
                "bootstrap": "^3.3.7",
                "core-js": "^2.4.1",
                "reflect-metadata": "^0.1.8",
                "rxjs": "5.0.0-beta.12",
                "systemjs": "0.19.39",
                "zone.js": "^0.6.25"
            },
            "devDependencies": {
                "concurrently": "^3.0.0",
                "lite-server": "^2.2.2",
                "typescript": "^2.0.3",
                "typings": "^1.4.0"
            }
    }
    

  • tsconfig.json: This is a Typescript configuration file which helps you specify how and what you want the Typescript compiler to compile. The how part can be specified in the “compilerOptions” property and what part can be specified in properties like “files”, “include”, “exclude”, etc. You can find the complete list of Typescript compiler options here.

    {
        "compilerOptions": {
            "target": "es5",
            "module": "commonjs",
            "moduleResolution": "node",
            "removeComments": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "noEmitHelpers": false,
            "sourceMap": true
        },
        "exclude": [
            "node_modules",
            "typings/main",
            "typings/main.d.ts"
        ],
        "compileOnSave": false,
        "buildOnSave": false
    }
    

  • typings.json: There are certain external libraries which you tend to use in the application. But Typescript being a static language, its compiler cannot understand the features and syntax of these libraries. In Typescript there’s something called as “type definition file” which has a file extension like “*.d.ts”. It actually tells the compiler to load the libraries required by the app. In our “typings.json” file we specify the external libraries and on “npm install”, it automatically includes the “*.d.ts” files in a folder called “typings”.

    {
        "globalDependencies": {
            "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
            "jquery": "registry:dt/jquery#1.10.0+20160417213236",
            "core-js": "registry:dt/core-js#0.0.0+20160725163759",
            "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
            "node": "registry:dt/node#6.0.0+20160909174046"
        }
    }
    

  • systemjs.config.js: This file informs the module loader about where to find application modules and also registers required packages.

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
        System.config({
            paths: {
                // paths serve as alias
                'npm:': 'node_modules/'
            },
            // map tells the System loader where to look for things
            map: {
                // our app is within the app folder
                app: 'app',
                // angular bundles
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                // other libraries
                'rxjs': 'npm:rxjs',
                'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                app: {
                    main: './main.js',
                    defaultExtension: 'js'
                },
                rxjs: {
                    defaultExtension: 'js'
                },
                'angular-in-memory-web-api': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            }
        });
    })(this);
    

Now that you have added all above mentioned configuration files, it’s time to run “npm install”. For this you need to run command prompt and point to the root directory where your package.json resides and fire the command. You need to see to it that there is no error during this installation process. Errors messages in npm are displayed as “npm ERR”. Any warning messages “npm WARN” can be ignored. Here’s a screenshot of your “npm install” command.


npm install command fired

Finally Angular 2.0 and TypeScript has been installed into your application. You can see “node_modules” and “typings” folder in your root directory.


angular installed in aspnet core

#Conclusion –

You can now look at the Quick Start tutorial on Angular 2.0 website and add required component files. This article basically shows you how to install Angular 2.0 and Typescript in ASP.NET Core App. We have developed another Basic MVC application which has some basic Angular 2.0 code in it. You can download and use it for your project. You can download the codebase using this GitHub link.

#Steps to run the codebase uploaded on GitHub –

  • Clone the repository on your machine.
  • Once the app is cloned, right click on the project directory and select “Open with Code” or you can open the folder directly from Visual Studio Code. From “File >> Open Folder
  • Now run the app using DotNet CLI. Open command prompt and point to the root directory of this app and fire “dotnet run” to run the app.

Copyright © 2017 Chander Dhall, Inc. • All Rights Reserved • View Sitemap