A Note on Angular 2 Deployment and Node_Modules

• Download source code - 420.1 KB

Introduction

This is a note on a stupid, brutal force, terrible, yet not very horrible method to deploy the big Angular 2's 42.8 MB "node_modules" folder.

Background

This note is not about how to develop Angular 2 applications. It is about how to deploy the big "node_modules" folder. If you take a look at my earlier note on the Angular 2 environment, you can find that the "node_modules" folder for Angular 2 is 42.8 M bytes.

• This big "node_modules" folder is necessary to compile your Typescript files if you use Typescript.
• This big "node_modules" folder is necessary at run time, because the browser needs to download files from this folder.

But this big "node_modules" folder imposes problems for the source control and deployment. Do we really want to check-in the 42.8MB into the source control and package it into the installer?

The attached is an Angular 2 application. If you do not know how to setup the environment in Visual Studio to run an Angular 2 application, you can checkout my earlier note on the Angular 2 environment. The purpose of this example is to show you a stupid, brutal force, terrible, yet not very horrible method to reduce the big "node_modules" to 1.9MB for source control and deployment.

If you want to download the solution and run it and if you are not an Angular 2 and Typescript expert, I recommend you to take a look at my earlier note on the Angular 2 environment. If you do not setup the environment right, you may not be able to compile and run the application. You may have to battle the hells for a while before your Angular 2 application runs.

Run the Application

If you follow the instructions from my earlier note on the Angular 2 environment and if everything works well, you can run the application. This simple SPA (Single Page Application!!!!) sets a timer to periodically update the color of the round-dots through Angular bindings. If you open the developer tool and look at the network traffic, you can see the files that the browser needs to run the application.

If you filter the list by "node_modules", you can see 26 files from the "node_modules" folder. If you hover on each of the items, you can see the exact path where the file is located.

Manually Copy the Files and Change the References

Because we can easily get the list of the files needed from the "node_modules" at run time, we can easily copy them to the desired location.

In my example, I copied all the 26 files to the "/scripts/NG2" folder. This process took me about 5 minutes. We need also change the references in the "systemjs.config.js" and "Index.cshtml" files to reference the changed location.

After the change, we can run the application. We can see the application running fine and all the Angular dependencies are from the "/scripts/NG2" folder. With the Angular 2 run time dependencies drop to 1.9MB, it is so much easier for us to source control and deploy them.

Are the 26 Files Enough?

The biggest challenge when we try to copy the files to the "/scripts/NG2" folder is that the Angular team never give us the list. We do not know the list of the files with certainty. It is very possible to miss some. If we miss a file, the application fails to run.

Luckily, the development tool can tell us exactly which one is missing. We can add that file to the list. This work is better done at development time, if we find any missing files, we should add them and properly source control them. The 26 files that I picked here should be good for quite some use cases and should be good as a start point for our effort to collect the most commonly used set of the Angular run time dependency files.

Why Angular 2 Made So Many HTTP Requests?

You should be surprised why Angular 2 made 36 HTTP requests for the simple web page. It is indeed a large number for a web page as simple as this one. When collecting the run time dependency list, I took a look at some of the files. Although there are few larger ones, most of the files are really small. For example, the "isArray.js" file is as small as the following:

"use strict";
exports.isArray = Array.isArray || (function (x) { return x && typeof x.length === 'number'; });
//# sourceMappingURL=isArray.js.map

The "isFunction.js" file is as small as the following:

"use strict";
function isFunction(x) {
    return typeof x === 'function';
}
exports.isFunction = isFunction;
//# sourceMappingURL=isFunction.js.map

The "isObject.js" file is as small as the following:

"use strict";
function isObject(x) {
    return x != null && typeof x === 'object';
}
exports.isObject = isObject;
//# sourceMappingURL=isObject.js.map

Should the Angular team move these files into a single larger utility file to reduce the network traffic and reduce the number of files in our list? I think they should. In such case, we have few chances to miss any dependency files at the run time.

Points of Interest

• This is a note on a stupid, brutal force, terrible, yet not very horrible method to deploy the big Angular 2's 42.8 MB "node_modules" folder;
• This effort is stupid because it should not be my work at the right beginning. It is the Angular team's work. They have the best knowledge about the files needed at the run time. They should provide us a run time bundle. They should not give us the task to search for the dependency list;
• This effort is brutal force because I need to check the development tool all the time to see if I miss any dependency files;
• This effort is terrible because it is both stupid and brutal force;
• This effort is horrible but not very horrible because finding the missing files is not a difficult work. Before the Angular team give us the bundle, this effort is needed for the source control and deployment because the "node_modules" folder recommended by the Angular team is really big;
• I hope you like my postings and I hope this note can help you one way or the other.

History

• 12/17/2016: First revision