31854

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

Question:

I downloaded a <a href="https://github.com/m-hassan-tariq/SpeechIMDBUsingAngular2/tree/master/SpeechIMDB" rel="nofollow">github</a> 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

<blockquote>

Build: Unknown compiler option 'types'.VSTSC<br /> Build: Unknown compiler option 'typeRoots'. VSTSC

</blockquote>

Answer1:

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

Recommend

  • How to store pointer to S3 objects in Amazon SimpleDB?
  • how to auto center objects in a form in access 2007?
  • Imagemagick set interline spacing?
  • npm thinks node is out of date, but it isn't
  • Haskell datatype conversion problems
  • spring data neo4j 3.0.0 - why two labels set by default
  • Finding number of samples in a .wav header
  • Jhipster: How to create relationships with User entity using supplied tools?
  • Packet modification with netfilter queue?
  • Can I use worksheet_change for a specific column only?
  • Grunt watch Running “watch” task Waiting
  • Is mp4 stream able with ffserver?
  • Pointer vs Reference difference when passing Eigen objects as arguments
  • LNK1104: cannot open file 'kernel32.lib'
  • Zend Framework + Doctrine1.2 project structure with more modules
  • Should I be afraid to use UDP to make a client/server broadcast talk?
  • Cordova Apache wrong module path
  • How do I translate LR(1) Parse into a Abstract syntax tree?
  • Can my PDF ping my server when it is opened?
  • Git describe fails to return most recent annotated tag
  • Pycharm: Marking a folder as 'sources root' is not recursive for subfolders
  • How to generate and display a QR Code in ionic 2
  • Spring Cloud Microservice Architecture Confusion
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • How can I send an e-mail from a vbs script
  • C# - Serializing and deserializing static member
  • Sending data from AppleScript to FileMaker records
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Is there a mandatory requirement to switch app.yaml?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • How to include full .NET prerequisite for Wix Burn installer
  • Proper folder structure for lots of source files
  • Java static initializers and reflection
  • How does Linux kernel interrupt the application?
  • Is it possible to post an object from jquery to bottle.py?
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?