Build & Deploy Angular 2 Projects

I have built the front end of some WEB applications using AngularJS. Now I would like to move it to Angular 2. The first step is learning about Angular 2 and to figure out how to migrate the AngularJS code. The second step is to build the project for deployment on a WEB container which is not the NodeJs WEB server used for development.


I would like a simple and reliable environment to port and develop my Angular applications. I did all the steps of the Tour of Heroes tutorial and I realized that the Angular 2 environment isn't really simple. Anyway, at the end, the application did work. I made some mistakes and could find out quickly what was wrong. A kind of packaging and a release build procedure is missing.

Tools

My development environment is composed of the Atom Editor (1.12.9) and NodeJs (7.4.0) on a Windows 10 workstation. I use the Atom editor with the atom-typescript plugin (10.1.13). The Typescript support in Atom is very good. Every editor feature I like programming with Eclipse or Intellij is available.

Ways to Build and Deploy?

Searching on the Internet I found three possible ways to build and deploy using some additional modules:

• Angular 2 CLI relies on a generator. There are less simple commands to do all the work. With a little more knowledge should be possible to customize the behaviour.
• Angular Seed is a starter project which supports Ahead of Time compilation and Dockers. A lot of stuff and tools which requires some familiarization.
• Angular 2 Starter is a starter project which offers the integration with the Webpack module bundler.

Angular CLI

I like tools which avoids me to type boilerplate code. The CLI generates the directory tree, adds all basic files, downloads the dependencies (modules) and connects the project to a GIT repository. It took some time but at the end I was able to start the basic application. Nice but the application does nothing. So I decided to test the environment going through the Tour of Heroes tutorial. On step 3 (Master/Detail) the application suddenly doesn't work anymore.

No way to find out what is wrong. The CLI environment works with a packaged version of the application. There is no relation between the Typescript code/file and the place where the exception is fired. The CLI is a beta version (24) of the release 1.0.0. A proper debug support would require an IDE like Intellij, NetBean or Eclipse and this is far away from my wish of a simple and slim environment.

Angular-Seed

It takes a while before Angular-Seed is ready to work, but at the end of the setup a small application with tool bar, navigation bar and a small form appears. The application is very simple but works. So, I go to the next step and I make a build. All the stuff is placed into the folder dist/prod.

I generally use SpringBoot as back end for my WEB applications. It requires a at least a Java Development Kit and Maven installed on the workstation.

I setup my small Spring-Seed project using the a very simple example from GITHUB. I copy the project somewhere on my disk and place the content of dist/prod (Angular-Seed) into the folder src/main/resouces/static.

Using the command

mvn spring-boot:run

I build and start the application. Using a WEB-Browser I call the URL http://localhost:8080. The small Angular 2 application appears and work as expected.

Now I have a simple procedure to develop, test, build and deploy my Angular 2 front ends. Angular-Seed provides out of the box all informations I need. This project is much more a a simple starter kit and I will need some time to introduce myself into this environment. I found a lot of comments inside of each file which clarifies what to do to extend or change something.