14

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.

Aakash Thakur
  • 3,837
  • 10
  • 33
  • 64

5 Answers5

6

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.

Eric Simonton
  • 5,702
  • 2
  • 37
  • 54
3

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

mrBorna
  • 1,757
  • 16
  • 16
3

One thing you could do is install the packages needed on Azure server via Kudu dashboard.

  1. Go to https://yoursitename.scm.azurewebsites.net
  2. Then Debug console -> CMD
  3. Go to home\site\wwwroot directory
  4. Type npm install

This will install the needed packages for the Angular 2 app to run on Azure server.

xird
  • 775
  • 1
  • 8
  • 16
3

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.

Community
  • 1
  • 1
raj m
  • 1,863
  • 6
  • 21
  • 37
  • I tried running `npm run bundle` but got a `missing script` bundle error. – Aakash Thakur Feb 14 '17 at 19:40
  • what is the error? and did you follow above link to bundle it ? – raj m Feb 15 '17 at 04:22
  • 1
    @rajm is right, you should not upload node_modules, but bundle everything in a .js script. regarding the `missing script` it just means you haven't configured a command with name `bundle` in your `package.json` file. how about this : http://stackoverflow.com/questions/35539622/how-do-you-deploy-angular-2-apps ? – Daniel Dror Feb 15 '17 at 14:38
3

npm install your deps on prod env ..

npm i --production
danday74
  • 52,471
  • 49
  • 232
  • 283