CODEWITHSUNDEEP
angular
Oliver Watkins
Oliver Watkins

Reputation: 13539

Deploying heroes application from angular2

I have gone through the heroes tutorial and created my own Angular2 application by modifiying some of the components. But basically it is the same as the heroes tutorial.

Everything has worked wonderfully with my IDE, npm etc., and I am now ready to deploy my application into production... and am completely lost.

In my index file I see that there are some references to some node_module files.

<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/systemjs/dist/system.src.js"></script>

Cool, since I don't want to dump 30000 files on my server, I create a lib folder in my app and copy the necessary files there, then I link to them :

<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/system.src.js"></script>

I deploy everything to my app server on the internet. The next error I get is :

http://frontangle.com/angular2charts/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js Failed to load resource: the server responded with a status of 500

OK, looks like I need to import more files, so I am guessing that you need to pluck out bits and pieces from the 30,000+ node_module files.

If I look at my systemjs.config file then I see this :

  // 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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'ng2-charts': 'node_modules/ng2-charts',
  'angular2-color-picker': 'node_modules/angular2-color-picker'

Am I right in assuming that, rather than copy across these files and then do a HTML import for every single angular js file that is listed here, I could just reference some angular.min.js file which would take care of all the angular files that are listed here?

All these angular files come from package.json and are imported as version 2.4.5. So do i need something like angular.2.4.5.min.js in my new lib directory to encapsulate all these files? That is all I need right? Does this distributable file exist anywhere in the forest of directories that npm pulled into my project?

Next, rxjs. Do I just take the jxjs.min.js in the 'bundles' directory? And copy that into my lib folder?

NOTE: I do not want to use webpack or cli or some fancy build tools. I just want to know how to get my simple app working.

Upvotes: 0

Views: 52

Answers (1)

Justus Ikara
Justus Ikara

Reputation: 172

Use angular CLI and and build using the --prod flag.This will minify/uglify your files for hosting to the server.

Upvotes: 0

Related Questions