How can I serve an AngularJS 2 app without having

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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).

Answer 4

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.

Answer 5

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

Answer 6

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