Running the Angular Server

The Angular Server included in our Angular IDE allows you to quickly deploy and test your Angular apps. The Angular Server is included in our Angular IDE, CodeMix Eclipse plugin, and MyEclipse Java EE IDE.

Introduction
When working with Angular, you need to use Node to actually service the files to be used — whether that is using Node to build the files to be serviced by Nginx, or directly serving them from Node. During development, the Angular IDE focuses on using the angular-cli’s serve flow which provides both basic serving of resources, as well as reloading of the application on change.

There are three ways to run the Angular application in development with Angular IDE:

Run the application from the Servers view.
Debug the application
Run the application from the command line.
Run the Angular Application from the Servers view
The simplest case to use Angular applications inside the Angular IDE is to navigate to the Servers view and click the Start button on the desired application. The application automatically starts in the Terminal+ view where the output can be seen and any build errors will be reported in the editors.

The angular-cli server will automatically monitor for changes on files and rebuild them. Any build errors are relayed into the IDE simplifying development, and at any time, the output of the server can be seen in the Terminal+ view for the given project.

For more information on the normal lifecycle of application development, see Creating Your First Angular Application.

Debug the Angular Application
When working with components, debugging the behavior is key to quickly diagnosing problems in the TypeScript code. To that end, the Angular IDE provides integrated support for debugging Angular applications by simply setting breakpoints in the desired TypeScript class and then running the application in Debug mode.

2-enablingbeakpoint

Once the breakpoints are enabled, simply start up the server in debug.

3-appindebug

Upon startup of the application, the locally installed Google Chrome browser is automatically started with a debug session active for the application. Navigate to the appropriate place in the application to hit the desired source code and the breakpoint will be hit in the TypeScript code inside the IDE. Variables and other values will be available for inspection.

For more information on debugging your Angular application, see Debugging in CodeMix.

Run the Angular Application from the Command Line
For modern web developers, the Angular IDE respects the importance of the command-line and is set up to allow easy usage of current workflows. In the case of running applications, the Angular application can be started from any command shell simply by using the ‘ng serve’ command supported by the angular-ide. As long as the application has the angular-ide package enabled for development, the Angular IDE will automatically be notified of the launch and continue to report status and build errors back into the IDE.

To do this inside the Angular IDE, select the Project in the Terminal+ view, click the plustab tab to start an interactive shell, and then type ng serve on the command line.

4terminalngserve

When running outside of the Terminal+ view, it is important to pay attention to the path to the corresponding angular-cli for the project. It is located at (project-path)/node_modules/.bin/ng. Using the wrong version of the angular-cli can skew testing. For simplicity, it is recommended to use Terminal+ as the correct path is automatically configured.