22

I am trying to run the Angular 2 seed application. Unfortunately npm install places a massive numbers of files into node_modules which I presume I also have to serve alongside the seed application code.

I don't want to have to serve all these static files if I only need a few for the app to work. Is there a way to only server which ones I actually need?

The reason I ask is because the Google App Engine development environment (dev_appserver.py) places a limit on the number of files it can serve and the production environment has a limit on the combined size of files that can be uploaded. It would be ashamed to upload megabytes of unnecessary files.

Oleksii Pavlenko
  • 1,327
  • 1
  • 11
  • 25
Dan
  • 5,013
  • 5
  • 33
  • 59
  • According to http://stackoverflow.com/questions/34526844/what-is-node-modules-directory-in-angularjs, I don't need to include the `node_modules` directory when serving my app – which would solve my problem. However when I remove the directory and run the app (`npm start`), I see the app won't run as it needs to load files in `node_modules`. – Dan Jan 12 '16 at 12:20
  • Maybe [browserify](http://browserify.org) can help? – Dan Jan 13 '16 at 14:52
  • I wrote an Angular2 app that doesn't serve up the node_modules folder (https://github.com/robianmcd/tag-trends). I'm just copying everything I need to server into a build folder with gulp. Here is another project doing the same thing but the gulp file is a lot simpler: https://github.com/robianmcd/ng2-movies – rob Jan 14 '16 at 22:50
  • 1
    I think you should read about bundlers i.e Webpack, SystemJS builder, Rollup, TypeScript (soon), JSPM, (others?). – Eric Martinez Jan 18 '16 at 19:50
  • 1
    you really need to use a client side build system, I suggest to take a look at Webpack – Igor Artamonov Jan 19 '16 at 10:45
  • The seed application I refer to in my question misses out this step? – Dan Jan 19 '16 at 14:27
  • @Dan yes, that repo is the basic one, what you want is a little bit more advanced. Check out this repo [angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter) – Eric Martinez Jan 20 '16 at 21:05
  • @Dan This is what I'm looking for since last couple of days. I finally managed to get angular-cli working for my learning project and now can deploy it without any issues on local apache. Now what I'm struggling to find is how can I deploy this on GAE? I tried GAE once with Spring web application with its intellij idea plugin, but am not able to figure out how to make it work with angular2 app. Would be great help if you can help me with this. – Jay Aug 01 '16 at 22:43

6 Answers6

10

Use the CDN version of the libs in production, like :

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

Not only that will save you the hastle to handle what and how to move libs into your distributable, but they'll also save the end user some time if they have downloaded them from a previous visited webpage.

Langley
  • 5,326
  • 2
  • 26
  • 42
6

This is handled by the gulp script of this seed project.

https://github.com/angular/angular2-seed/blob/e66d24fd34d37884cec41a3583bad563cf5a43e5/gulpfile.js#L15

The gulp task copies the files from node_modules to dist/vendor. 

//copy dependencies to dist folder
gulp.task('copy:deps', function(){
  return gulp.src([
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.js',
    'node_modules/angular2/bundles/router.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/systemjs/dist/system.js',
  ]).pipe(gulp.dest('dist/vendor'));
});

After installing gulp, just type gulp to start the default gulp task or run npm start which will call gulp clean && gulp

The default gulp task will also copy all other .js, .html and .css files to the dist folder. The dist folder wil contain everthing you have to deploy.

hansmaad
  • 18,417
  • 9
  • 53
  • 94
1

You can use the skip_files element in the app's config file to exclude the undesired files:

The skip_files element specifies which files in the application directory are not to be uploaded to App Engine. The value is either a regular expression, or a list of regular expressions. Any filename that matches any of the regular expression is omitted from the list of files to upload when the application is uploaded.

Pay attention at overriding the defaults in that doc section.

Note: I'm not exactly sure if this would help on the development server side, tho - it seems to ignore that config in some cases (but I can't seem to find my answer which didn't work in one such case to get the details).

Dan Cornilescu
  • 39,470
  • 12
  • 57
  • 97
  • That works for uploading to production but doesn't work for the App Engine development environment due to [this bug](https://code.google.com/p/googleappengine/issues/detail?id=9300). There are numerous workarounds on the internet though. What I really want is a way to just bundle only the files my app depends on for deployment and not have to upload the megabytes of files found in `node_modules`. – Dan Jan 12 '16 at 19:24
  • Yup, that's exactly the issue I added the note for :) You should `star` it as well, hopefully that'll help getting attention. – Dan Cornilescu Jan 12 '16 at 19:31
  • Starred a long time ago. :-) The other problem of using `skip_files` is that I have no idea which files in `node_modules` I actually need. (I'm completely new to AngularJS and Node.) – Dan Jan 12 '16 at 19:42
  • One way to find that out is to add the files needed to address the errors you see, one by one (or maybe by directory, if small dirs). Potentially depressing, since you won't know how many files are needed until all errors are gone, so I'm not sure if it's a good idea. Only last resort. – Dan Cornilescu Jan 12 '16 at 19:56
  • a build tool like e.g. gradle can provide the skip_files functionality for you... – koma Jan 14 '16 at 20:24
1

When you run npm start you get a dist folder. This folder contains your whole application. So no need to serve node_modules.

Christina
  • 1,136
  • 11
  • 16
0

Use angular-cli command ng build. You will get a dist folder after that.

Use that dist folder as from end for your application and use the following app.yaml to get your project up and running.

https://gist.githubusercontent.com/darktable/873098/raw/0197279f7faf07a3f64689589f097790d198b22a/app.yaml

Blue
  • 22,608
  • 7
  • 62
  • 92
Nipun Madan
  • 169
  • 1
  • 10
  • A link to a potential solution is always welcome, but please [add context around the link](http://meta.stackoverflow.com/a/8259/169503) so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. Take into account that being barely more than a link to an external site is a possible reason as to [Why and how are some answers deleted?](http://stackoverflow.com/help/deleted-answers) – Rohan Khude Oct 02 '16 at 09:41
0

With Angular 2 and angular-cli, it's pretty straight forward. You dont need any gulp or custom script. Just build with angular-cli ng build --prod and it does nice job of treeshaking, minifying and producing a very small and optimum bundle. I've written a small post on this - to build and deploy Angular 2 app on Google AppEngine or Firebase.

Jay
  • 1,539
  • 1
  • 16
  • 27