This is a quick guide to a huge source of frustration over the last few months, with a way to solve it. This assumes that your Angular project is based on the angular quickstart project, that your Angular project is hosted inside an ASP.NET web app, and that you’re working in Visual Studio.
To skip the exposition, head to the “How it works” section.
- src/index.html, in the <head> section. See: https://github.com/angular/quickstart/blob/master/src/index.html
- src/systemjs.config.js, in the map section. See: https://github.com/angular/quickstart/blob/master/src/systemjs.config.js
In the angular quickstart project, the libraries in these sections are by default located in the node_modules/ folder. However, the node_modules/ folder is gigantic (like 120MB and 17,000 files in my case), and all of those files don’t need to be deployed to the production server to run the angular app.
To publish the site to my IIS server, I’m using Visual Studio’s built-in publishing support. Thus, to push the site to a server, you right-click the ASP.NET website project, click “Publish”, and go from there.
Now, clicking “Publish” will only publish the files that exist in the project. Since node_modules/ is humongous, we don’t track it in our VS project. Therefore, the node_modules/ folder isn’t published to the web server. At the beginning of our project, we manually copied the node_modules/ folder over to the web server to fix this. But no longer!
How it works
- Create a dist/ folder somewhere in the website project.
- After every dependency has been copied into the dist/ folder, update all references to JS dependencies in the project to point to the dist/ folder, rather than node_modules
- In Visual Studio, add all of the dependencies in the dist/ folder to the solution, under a corresponding dist/ folder.
Why do this?
- You don’t have to track the entire node_modules/ folder in the solution.
- You don’t have to publish the entire node_modules/ folder to the web server.
- Since updating the dist/ folder happens after every build, anytime you update your npm modules, the updated libraries will be copied to the dist/ folder.
Create dist/ folder
Create a folder structure which is something like this:
Setup MSBuild tasks
Here’s the set of MSBuild tasks I’m using [this should look much nicer pasted into a text editor…darn blog formatting]:
This should, after every build, copy all JS dependencies to the dist/ folder.
Update JS dependency references
Something like this:
default.aspx (or index.html, etc)
Something like this:
Add dist/ folder to solution
And that’s it! Now if you Publish the site, the dist/ folder should be copied to the IIS server, and the site should use the files in that folder.
- dist/ folder: 4.08MB, with 356 files
- node_modules/ folder: 118MB, with 13,015 files