Can't find node_modules after deployment - azure

Question

This title might be a bit misleading but please bear with me for a while.
I have made a simple Angular2 app on visual studio 2015 and now I have published it on Azure.
Having node_modules in the development environment was perfect but after deploying it shows error saying can't find node_modules.
Here is how I am referring in my development env in index.html-
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
Its also referred in system.config.js-
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': '/app', // 'dist',
'#angular': '/node_modules/#angular',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'rxjs': '/node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
// No umd for router yet
packages['#angular/router'] = { main: 'index.js', defaultExtension: 'js' };
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
The error makes sense as I have a .gitignore file which doesn't let the node_modules to deploy to server.
Can someone please assist as to how I can run it after deploying and what change could be done with the above references in order to make it work.

Answer 1

I have not used SystemJS, but your bounty has enticed me to try answering anyway, since it looks like you still need an answer. :)
After glancing through some SystemJS docs, it looks like your index.html needs to be different for development vs production use. This is what the docs show for development:
<script src="systemjs/dist/system.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
And this is what they show for production (notice the first line has a different src path):
<script src="systemjs/dist/system-production.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
More importantly, take note that node_modules is not referenced in either case, nor should it be. If you have your code and configuration set up correctly, SystemJS (like other build tools) will package everything you need without any additional <script> tags. Instead, you should import your shims (and similar) from within your code somewhere. For example, in their Webpack guide (Webpack is a another build tool filling a similar role to SystemJS) the Angular team shows a polyfills.ts file that imports their shims, then they include the polyfills file into the build within their webpack configuration.
I'm sorry I can't offer more specific advice about SystemJS in particular, but hopefully this answer is enough to point you in the right direction.

Answer 2

You either have to deploy node_modules as a part of your package or have a script run npm install for you to get the packages from your package.json
To get the packages in your package.json file do npm install --save package-you-want-to-install
Then you can have your startup script install from the package json by trying the script on this link https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in-azure.markdown

Answer 3

One thing you could do is install the packages needed on Azure server via Kudu dashboard.
Go to https://yoursitename.scm.azurewebsites.net
Then Debug console -> CMD
Go to home\site\wwwroot directory
Type npm install
This will install the needed packages for the Angular 2 app to run on Azure server.

Answer 4

Don't use system.config.js
You need to bundle it first. Don't upload node_modules in Azure. To bundle refer below link.
How to bundle an Angular app for production
Once you bundle dist folder will create. You can upload the dist folder in Azure.

Answer 5

npm install your deps on prod env ..
npm i --production