Creating Angular2 app using Angular/CLI

Angular 2 is a framework for developing mobile and desktop applications. It is an open-source javascript framework conceived as a mobile-first approach. Angular2 is the next version of Google’s broadly popular MV* framework for building complex applications. It has almost everything you need to build complicated front-end web and mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling, and many more.

What makes Angular 2 special?

• Develop across all platforms: It offers a way for developers to build applications with angular and reuse the same code. Moreover, it also offers the ability to build applications for any deployment target.
• High speed and performance: You can achieve the maximum possible speed on a web platform and take it further via Web Workers and server-side rendering.

How to set up an Angular 2 application?

Here is a surefire way to set up an Angular 2 application, which enables you to use a customizable and best practices-compliant project structure provided by Angular2. This structure will enable you to easily develop and build an application with only one build command.

Setting up your application:
It includes the following steps-
1. Installing Node.js
2. Installing Typescript
3. Installing Angular/CLI

1. Install the latest version of Node.js:

Introduction: Node.js is a javascript platform for general-purpose programming that allows users to build network applications quickly.

To get the latest version of Node.js, you need to add a PPA(Personal Package Archive) maintained by NodeSource.

First, you need to install PPA in order to get access to its contents; make sure you’re in your home directory and use curl to retrieve the installations script for your preferred version, also make sure to replace 6.x with the correct version string:

$ cd ~

$ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh

You can inspect the content of this script with Nano (or your preferred text editor):

$ nano nodesource_setup.sh

And run the script under sudo:

sudo bash nodesource_setup.sh

This adds PPA to your configuration file and automatically updates the local package cache. After running the setup script from nodesource, you can install the Node.js package in the same way:

sudo apt-get install nodejs

The Node.js package contains the Node.js binary and npm, so you don't need to install npm separately. However, for some npm packages to work (such as those that require compiling code from source), you need to install the build-essential package:

sudo apt-get install build-essential

2. Install TypeScript:

Typescript is a language for application-scale javascript. Typescript supports tools for large-scale javascript applications for any browser, for any host, on any OS. It compiles a readable, standards-based Javascript as well as add optional types, classes and modules to Javascript.

To install the latest stable version :

$ sudo npm install -g typescript

3. Install Angular/CLI:

Angular/CLI is a tool to initialize, develop, scaffold, and maintain Angular2 applications.

To install the latest version of Angular/CLI:

$ sudo npm install -g @angular/cli

Check installed versions
To check the installed version, you can use the following commands:

1 Node : $ sudo node -v
2. Npm : $ sudo npm -v
3. TypeScript : $ sudo tsc -v
4. Angular/cli : $ sudo ng -v

Once all the installations are completed, we are all set to build an Angular2 application using Angular/cli. Angular/cli has everything it takes for an application, right from creation to make it production ready.

1. Create Angular 2 application using the following command:

$ sudo ng new PROJECT_NAME

To create a simple login application command will be:

$ sudo ng new welcome-application

This creates a new directory with all files you need to get started:

welcome-application

├── README.md

├── angular-cli.json

├── e2e

│   ├── app.e2e-spec.ts

│   ├── app.po.ts

│   └── tsconfig.json

├── karma.conf.js

├── package.json

├── protractor.conf.js

├── src

│   ├── app

│   │   ├── app.component.css

│   │   ├── app.component.html

│   │   ├── app.component.spec.ts

│   │   ├── app.component.ts

│   │   ├── app.module.ts

│   │   └── index.ts

│   ├── assets

│   ├── environments

│   │   ├── environment.prod.ts

│   │   └── environment.ts

│   ├── favicon.ico

│   ├── index.html

│   ├── main.ts

│   ├── polyfills.ts

│   ├── styles.css

│   ├── test.ts

│   ├── tsconfig.json

│   └── typings.d.ts

└── tslint.json

- The Angular/cli makes creating an application that already works easy, right out of the box. It internally follows the best practices of angular.

- CLI reads the package.json file and automatically installs the required npm packages for the application. If the node modules are not installed automatically, you can install them using $ sudo npm install command.

2. Serve application:

- To test your application locally while developing, use the following command :
- $ sudo ng serve

- This will start your local development server(Webpack-dev-server) that enables you to navigate to your browser on http://localhost:4200/

- Once the local development server is up and running, Angular/cli starts the webpack dev server; this process keeps on running in the background and can be explained in three simple steps:

• Angular/cli loads its configuration from angular/cli.json
• Angular/cli runs webpack to build and bundle all javascript and css code.
• Angular/cli starts webpack-dev-server to preview the result on localhost:4200

Note: The ng-serve command does not exit and return to your terminal prompt after step 3. The LiveReload support observes the file change process for your src directory. If a file change is detected, step 2 is repeated, and a notification is sent to the browser to refresh automatically. To stop this process and return to prompt, press ctrl-c

3. Creating a build:
Now that we have an app with all dependencies, we can build it using:

$ sudo ng build

The ng build command creates a “/dist” folder that contains the compiled and minified Angular 2 application.

4. Build targets and Environment files:
The ng build specifies the default build target (--target=production or --target=development) and environment file (--environment=dev or --environment=prod) to be used for that build.

The mapping enables you to determine which environment file is used, which can be found in .angular-cli.json:

"environmentSource": "environments/environment.ts",

"environments": {

  "dev": "environments/environment.ts",

  "prod": "environments/environment.prod.ts"

}

The same options are applicable to the serve command. If no value is passed for the environment, it will default to dev for development and prod for production.

# these are equivalent

ng build --target=production --environment=prod

ng build --prod --env=prod

ng build --prod

# and so are these

ng build --target=development --environment=dev

ng build --dev --e=dev

ng build --dev

ng build

5. Bundling:

All builds use bundling, and using the --prod flag in ng build --prod or ng serve --prod will also use uglifying and tree-shaking functionality.

Conclusion:

The Angular CLI is a prominent scaffolding tool that offers a great deal when developing an angular project. The CLI makes the code much more accessible since the setup. It enables developers to create and modify projects easily and performs other actions like building, running, debugging, and testing the project.