Angular 2 and NodeJS project setup
I've got some basic questions concerning the project structure of a MEAN-app including Angular2. I've followed the starting tutorial of angular.io to build a really basic Angular2 app. Now I try to integrate this app inside a NodeJS project following this tutorial. The problem is that this tutorial was written at the time of the first Angular.
My questions are:
- where should I put the npm packages of my Angular2 app? Inside the public folder (so the app has an own packages.json) or inside the node packages.json?
- how should the tsc compiler should be implemented?
I've had a very similar problem, when first starting to migrate towards angular2. The Angular.io tutorial uses System.js for its modules, which is basically incompatible with Node, which uses CommonJS. This leaves you with two options.
Setup the Typescript compiler and Node modules for Client and Server individually.
Use CommonJS modules with something like Browserify on the Client.
Now for me, only the second option is a good option. Setting things up twice defeats the whole purpose of having the same language across Client & Server.
I have prepared a Boilerplate for Angular 2 to start with Browserify quickly. You can check it out right here.
Now all you have to do is create a public folder for your client app and also create static routes for your node modules. It could look something like this:
app.use(express.static(__dirname + '/public')); app.use("/node_modules",express.static(__dirname + '/../node_modules'));
Personally I use a VS Code Task to compile my Typescript and then use Watchify on the client side to bundle it all together. On the Server Side I use nodemon to watch for any changes and restart the Server on compile.