To develop the frontend with Angular, we need some tools, such as TypeScript, Gulp, and NPM (Node Package Manager). Angular code can be written using TypeScript, JavaScript, and Dart. There are certain benefits of using TypeScript, for example, it shows errors at compile time, and provides static types. Secondly, it follows the ES6 (CMAScript6) standard, which helps to define classes, interfaces, and inheritance, and allows architects to design the frontend following OOPS principles.

The ASP.NET Core architecture is different than what we have seen in the previous versions. All the static files should reside in the wwwroot folder. Keeping any static file outside wwwroot will make it inaccessible. When working with TypeScript, we create (.ts) files outside the wwwroot folder and with a little configuration, it places the files under a folder in the wwwroot folder. However, there are certain other files used by the project, which will be needed by the frontend pages and we will use Gulp to copy them to the wwwroot folder. Gulp is a JavaScript task runner, which is used to automate tasks and has complete support in Visual Studio.

NPM, on the other hand, is the package manager to manage node modules. In ASP.NET Core, we can add a file called package.json and define node modules. On saving, it automatically downloads the dependencies defined in this file from Node and restores them in the node_modules folder.

Let's add the package.json file and define the following modules:

    { 
      "name": "angular-quickstart", 
      "version": "1.0.0", 
      "private": true, 
      "scripts": { 
        "typings": "typings", 
        "postinstall": "typings install" 
      }, 
        "dependencies": { 
          "@angular/common": "~2.2.0", 
          "@angular/compiler": "~2.2.0", 
          "@angular/core": "~2.2.0", 
          "@angular/forms": "~2.2.0", 
          "@angular/http": "~2.2.0", 
          "@angular/platform-browser": "~2.2.0", 
          "@angular/platform-browser-dynamic": "~2.2.0", 
          "@angular/router": "~3.2.0", 
          "@angular/upgrade": "~2.2.0", 
          "angular-in-memory-web-api": "~0.1.15", 
          "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": { 
        "typings": "2.0.0" 
        } 
    }

All the @angular packages are angular dependencies, where typings is a development dependency, which facilitates by providing intellisense when we write TypeScript code.

Next, we will add the Typing.json file and add the following global dependency:

    { 
      "globalDependencies": { 
        "core-js": "registry:dt/core-js#0.0.0+20160602141332" 
      } 
    }

We will create all the TypeScript files under the app folder at the root of the project. But before creating TypeScript files, let's add the TypeScript configuration file known as tsconfig.json and add the following JSON:

    { 
      "compilerOptions": { 
        "target": "es5", 
        "module": "commonjs", 
        "moduleResolution": "node", 
        "sourceMap": true, 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true, 
        "removeComments": false, 
        "noImplicitAny": false, 
        "rootDir": "app", 
        "outDir": "wwwroot/app" 
      }, 
      "compileOnSave": true, 
      "exclude": [ 
        "node_modules" 
      ] 
    }

Some of the important attributes have been listed in the following table:

Finally, we will add the Gulp.js file and add the following script to copy the necessary packages to the lib folder in wwwroot:

    var gulp = require('gulp'); 

    var libs = './wwwroot/lib/'; 

    gulp.task('restore:core-js', function () { 
      gulp.src([ 
        'node_modules/core-js/client/*.js' 
      ]).pipe(gulp.dest(libs + 'core-js')); 
    }); 
    gulp.task('restore:zone.js', function () { 
      gulp.src([ 
        'node_modules/zone.js/dist/*.js' 
      ]).pipe(gulp.dest(libs + 'zone.js')); 
    }); 
    gulp.task('restore:reflect-metadata', function () { 
      gulp.src([ 
        'node_modules/reflect-metadata/reflect.js' 
      ]).pipe(gulp.dest(libs + 'reflect-metadata')); 
    }); 
    gulp.task('restore:systemjs', function () { 
      gulp.src([ 
        'node_modules/systemjs/dist/*.js' 
      ]).pipe(gulp.dest(libs + 'systemjs')); 
    }); 
    gulp.task('restore:rxjs', function () { 
      gulp.src([ 
        'node_modules/rxjs/**/*.js' 
      ]).pipe(gulp.dest(libs + 'rxjs')); 
    }); 
    gulp.task('restore:angular-in-memory-web-api', function () { 
      gulp.src([ 
        'node_modules/angular-in-memory-web-api/**/*.js' 
      ]).pipe(gulp.dest(libs + 'angular-in-memory-web-api')); 
    }); 

    gulp.task('restore:angular', function () { 
      gulp.src([ 
        'node_modules/@angular/**/*.js' 
      ]).pipe(gulp.dest(libs + '@angular')); 
    }); 

    gulp.task('restore:bootstrap', function () { 
      gulp.src([ 
        'node_modules/bootstrap/dist/**/*.*' 
      ]).pipe(gulp.dest(libs + 'bootstrap')); 
    }); 

    gulp.task('restore', [ 
      'restore:core-js', 
      'restore:zone.js', 
      'restore:reflect-metadata', 
      'restore:systemjs', 
      'restore:rxjs', 
      'restore:angular-in-memory-web-api', 
      'restore:angular', 
      'restore:bootstrap' 
    ]);