Image for post: Angular 2 applications with Ng-CLI

Angular 2 applications with Ng-CLI

You need some files to build a good and complete application with Angular JS while you needed onyl to include to only js file with Angular 1, So there is a big difference. With Angular 2, you have to setup a NodeJS enviroment and include many modules for a complete enviroment with tests,
So to setup an application from scratch can be complex and difficult if you are just a beginner. Here comes the Ng-Cli tool: I think it's amazing and it helps you to create a sort of boilerplate with all files and a working application with an "Hello world" example.
But that's not all: here we have all the advantages using this tool and template:

  • It generates testing files. You can run both Karma unit test and e2e tests for BDD and browser automation.
  • You can generate new components and other needful features using only the command line. For example: when you create a component, the files will be placed in the right directories and the component will be ready for editing and running.
  • When you compile the application with Typescript files, the Ng Cli will create js and map files in a directory and not inside every directory with .ts files. This will leave your directories clean and you don't have to insert each path into your .gitignore file to ignore these ones.
  • You can easily build your application for production for an easily deployment

First of all you need to install Ng-CLI. Be sure you have NodeJS 6.9.0 or higher with NPM 3 or higher. You can upgrade your node installation if you can.

npm install -g @angular/cli

Here we have the most common commands:

Display the helper with a list of commands and descriptions

ng help

Create a new application and run it:

ng new PROJECT_NAMEcd PROJECT_NAMEng serve

Create a new component

ng generate component <my-component-name>ORng g component <my-component-name>

Generate Services

ng g service <my-new-service-name>

NOTE: when you use the generator, avoid to use call the new component like AboutComponent and simply call it About because it adds the Component suffix and we don’t want to have a component called AboutComponentComponent for example. It’s the same for services,

Build the application

ng build

As you can see the tool is simple to use and understand

Resources

Tags