How to import scripts from node_modules folder - npm

Question

I'm trying to get an ASP5 application to run with Angular 2.0 following a tutorial. After a few steps in I realized it did not work when I try to work on it without an internet connection (I'm usually working on it while I'm sitting in a train). Of course the imports suggested by the tutorial won't work without an internet connection:
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
Thus, I tried to include the local files from my node_modules folder like this:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
The files exist and are correct. But when I try to debug the project I'll get the following error for all four files: SyntaxError: missing ; before statement and when I look at the files via browser, all I receive is files with Hello World! written in it. I obviously seem to be missing something but as I've never worked with the whole npm part before, I have no idea why this would happen and after googling for hours nobody else seems to have that problem.
Is it access restriction? Missing JS module? Can anyone explain how I can include files from my node_modules folder in my html?

Answer 1

In Asp.Net 5 /wwwroot is the default root directory for your web application so when you enter:
node_modules/angular2/bundles/angular2-polyfills.js
its actually searched in the following path:
wwwroot/node_modules/angular2/bundles/angular2-polyfills.js
Although the file exists in the project root i.e.
node_modules/angular2/bundles/angular2-polyfills.js
But since its not in the web application root, you would see 404 error for these scripts.
The solution is to copy these files to wwwroot folder.
I would suggest writing a gulp task to automatically copy files to wwwroot/script/lib folder
and then you can use them like this:
//Sample Gulp file code
var paths = {
npmSrc: "./node_modules/",
libTarget: "./wwwroot/lib/"
};
var libsToMove = [
paths.npmSrc + '/es6-shim/es6-shim.min.js',
paths.npmSrc + '/angular2/es6/dev/src/testing/shims_for_IE.js',
paths.npmSrc + '/angular2/bundles/angular2-polyfills.min.js',
paths.npmSrc + '/systemjs/dist/system.js',
paths.npmSrc + '/rxjs/bundles/rx.min.js',
paths.npmSrc + '/angular2/bundles/angular2.dev.js',
paths.npmSrc + '/angular2/bundles/router.js',
paths.npmSrc + '/angular2/bundles/http.min.js',
];
Then in your html page or view you can use these like this:
<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.min.js"></script>
<script src="/lib/system.js"></script>
<script src="~/lib/rx.min.js"></script>
<script src="/lib/angular2.dev.js"></script>
<script src="/lib/router.js"></script>
<script src="/lib/http.min.js"></script>
You should see a gulp file in the root of your project, if its not there just create a file with name "gulpfile.js" in the root of your project.
I hope this helps :)