How to add Node to an existing Angular 2 Typescript ASP.NET Core project

Question

I downloaded a github project I would like to learn TypeScript and Angular 2 with in a ASP.NET Core project on a machine with Visual Studio 2015 Update 3 .

I can initially compile my project after installing Microsoft.TypeScript.MSBuild 1.8.11 nuget package. However it fails with failed to load 404 browser console errors of missing node_modules packages. This folder doesn't exist in my solution.

I noticed the systemjs.config.js file references npm and node_modules.

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/',
            'tether': '/Scripts/lib/tether.js'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '/Scripts',
            // 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',
            '@ng-bootstrap/ng-bootstrap': 'npm:/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
            // other libraries
            'ng-lightning/ng-lightning': 'npm:ng-lightning/bundles/ng-lightning.umd.js',
            'primeng': 'npm:primeng',
            'lodash': 'npm:lodash',
            'rxjs': 'npm:rxjs'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            primeng: {
                defaultExtension: 'js'
            },
            'ng-lightning': {
                defaultExtension: 'js'
            },
            lodash: {
                main: 'index.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

However the github project doesn't have node, gulp, bower or npm for node to work. I know if you create a default Visual Studio 2015 ASP.NET Core application that it adds working node by default, but how do node itto an existing project which the original github author seem to not have checked in.

My tsconfig.json file also doesn't compile

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }
}

and I get

Build: Unknown compiler option 'types'.VSTSC
Build: Unknown compiler option 'typeRoots'. VSTSC

Answer 1

Node should be installed globally on your machine to install dependencies from npm.

When node is installed; run npm install in the projects root folder