Dan Dan - 2 months ago 9
AngularJS Question

How can I serve an AngularJS 2 app without having to also serve all the files in `node_modules`?

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

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.