Creating Angular2 app using Angular/cli

June 27, 2017 0 60
Share
Creating Angular2 app using Angular/cli

Angular2 is a framework for developing mobile and desktop applications. It is an open source javascript framework and has been conceived as a mobile first approach. Angular2 is the next version of Google’s broadly popular MV* framework for building complex applications. It comes with almost everything you need to build a complicated frontend 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 web platform and take it further via Web Workers and server side rendering.

How to set up an angular 2 application?

Here is sure-fire way to set up Angular2 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 application as well as 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 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 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 as well as 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 latest version of Angular/cli:

$ sudo npm install -g @angular/cli

Check installed versions
To check the installed version you can use 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 making it production ready.

1. Create Angular2 application using 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 it easy to create an application that already works, 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 in-case 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 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 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 notification is sent to the browser so it can 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, 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 set to dev for development and prod for production, by default.

# 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 make use of bundling, and using the –prod flag in ng build –prod or ng serve –prod will also make use of uglifying and tree shaking functionality.

Conclusion:

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

Tags
Leave Comment

Your email address will not be published.

Stay up to date with the latest and the best from the world of automation!