Step 1: Installation and Configuration

The first step is to create a new Web Connection project. Angular 2 requires a fairly rigid configuration structure that requires some adjustments in order to work smoothly in a Web Connection projects. The following is just one way to do this that follows the way other Web connection projects work. Essentially these steps make a few changes to the Angular 2 Seed Project and building it in place in the Web Connection web folder.

Create a new Web Connection Project

We'll start by creating a new Web Connection project called ToDo using the Console.

First we create a project called ToDo and a process class called ToDoProcess. These will be the server and process classes respectively:

Next specify the path for the new project and the name of the virtual directory. If you want to install a Root Web folder leave the virtual blank or use /:

Finally we want to create a REST project which works with JSON by default rather than HTML documents. This produces a wwRestProcess class which turns all return values into a JSON response and can parse incoming JSON objects into FoxPro object:

We'll use the REST service to load and update Todo items, but the main reason for the new project is to get the Web site set up so we can add the Angular functionality added to the Web site.

NodeJs and NPM required

Note you need to NodeJs and NPM (part of Node) installed in order for the following to work. NodeJs is the build engine and NPM to include the required build components used to build, compile and package the Angular 2 application.

Copy the Angular2-Project-Template Contents

Next we'll add the Angular Seed project template into Web Connection. This is based on the Angular2-Seed project from the Angular site and modified so that it can run in place in the installed folder - the web folder in this case.

To do this do the following:

• Find the templates\SupportTemplates\Angular2-Project-Template
• Unzip the content of this zip file into your project's web folder

Next we need to install all the support components. Open up a command prompt and change to the web folder.

npm install

This installs all the configured dev components (languge tools, build server, local web server etc.).

Next check to see if the build process works by running either:

webpack

this builds the application. If all is well you shouldn't see any errors here.

At this point you should have a running application that starts with index.html in the web folder. You can run this using IIS or IIS Express using a standard URL like http://localhost/todo/index.html.

Because Angular 2 uses Typescript (or ES6) the code needs to be compiled so any code changes require re-running WebPack to recompile the application which is tedious.

During development, a better choice is to use the provided dev server and live reload functionality. To use it run:

npm start

Then navigate to http://localhost:3000/.

This runs the local dev server and the webpack file watcher that detects any changes to files in the dev tree and if files change automatically recompiles the app and reloads the current page in the browser.

Now we're ready to start building our Angular application.