How to start Angular 2 Application on a Custom port other than 4200

You can start the angular project using the angular cli using command

ng serve

The above command will start the project on port 4200. If you want to start the application on a prot different that 4200 then you can start the project using the following command.

ng serve --port <port-number>

where <port-number> can be any valid port that is not in use.

How to Inject Nested Services in Component

Let's create a service url.service.ts that will will be injected in other services.


import { Injectable } from '@angular/core';

@Injectable()
export class UrlService{
    // business logic
}

Now lets create another service http.service.ts that will Inject this service.

import { UrlService } from './url.service.ts';

export class HttpService extends UrlService{
    // business logic
}

Now, we need to inject the HttpService in some component to make http calls. So now we can inject the HttpService in component as shown below.

import { Component ,OnInit } from '@angular/core';

import { UrlService } from './url.service.ts';
import { HttpService } from './http.service.ts';


@Component({
    selector : 'some-selector',
    templateUrl : 'some.html',
    providers: [HttpService, UrlService]
})
export class SomeComponent implements OnInit{
     // business logic
    constructor(private httpService:HttpService){
        // do something
    }

    ngOnInit(): void {
     
    }
    
}
Note

So, the important point to note here is we have provided both UrlService and HttpService in the provides but only the HttpService in the constructor.

You need to add all the services in the providers array of the Component but add only the service you want to the constructor.


Install and Setup Angular

Before we start, lets install the angular cli with the following command

npm install -g @angular/cli

Angular CLI is a tool that can

  1. make a new project,
  2. compile your typescript files,
  3. configure your typescript compiler
  4. run your code with live preview,
  5. build and package your project.
Note

Make sure you have latest node and npm installed, at least node version 6.9.x and npm version 3.x.x. To see the versions you can run commands node -v and npm -v for node and npm versions respectively.


 Warning

While installation you might get the following warning

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/@angular/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

You can skip them, since they are optional warnings


Making First Angular Project

To create a new project in angular you can use the angular cli command

ng new <project-name>

Let's say we want to create a project hello then the command will be ng new hello. This will create a new project inside a folder hello we specified while creating the project.

Now go inside the directory. You can do the following now,

  1. Run ng serve for a dev server.
  2. Run ng generate component component-name to generate a new component.
  3. Run ng build to build the project.
  4. Run ng test to execute the unit tests via Karma
  5. Run ng e2e to execute the end-to-end tests via Protractor

Now run the commands to see the app working

cd  <project-name>
ng serve

This will start a local server and start the angular application on this server.


Uninstall global node dependency

To uninstall a node dependency installed with -g command you can use the following command.

npm uninstall -g <dependency>

The above command will remove that dependency from your system.

Uninstall node dependency

To remove a dependency from your project you can use the following command.

npm uninstall <dependency>

This will remove the dependency and remove its entry from the package.json file.

Points to Remember

If you are installing node for the first time then, use the NodeSource PPA and first choose the version of node you want to install.

Following are the sources for the node versions

for Node.js v4

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

for Node.js v5

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

for Node.js v6

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

for Node.js v7

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -

Once this is done, then update your repositories by command

sudo apt-get update

Now, finally install NodeJs and Npm using the following command

sudo apt-get install nodejs
sudo apt-get install npm

To check the version of node, try command node -v and npm version by command npm -v

Upgrading NodeJs and Npm

If you already have node and npm install and you want to upgrade the version then you should first run the following command to remove them.

sudo apt-get purge nodejs npm

This will remove nodejs and npm, now you can follow the steps mentioned above to install fresh copy of node and npm.

What is Identity == operator

In Java, == operator is used for checking the reference of objects. In Groovy, it is used to check if the object are equals, i.e it is the implementation of equals() method in java.

== operator in

  1. In java, checks the reference of the objects.
  2. In groovy, == is equivalent to .equals() and checks if the two objects are equal

is operator

  1. In java, does not exist
  2. In groovy, checks the reference of the objects which is == in java

equals() method

  1. In java, checks if the two objects are equal
  2. In groovy, checks if the two objects are equal

Let's have a look at the following examples

class A{
  String name;
  
  boolean equals(A a){
    this.name == a.name
  }
  
}

A a1 = new A(name : 'ekiras')
A a2 = new A(name : 'ekiras')

println (a1 == a2) 
println (a1.equals(a2)) 

The above output will give the following output.

Output

true
true


Point to Remember

  1. Coercion Operator is used for casting
  2. Custom Coercion rules can be applied to a class by defining asType method in a class.
  3. Syntax of coercion operator is as

What is Coercion Operator

Coercion operator is used to do type casting of objects in groovy. It converts objects of one type to another type.

Lets take a look at the following examples

int a = 123
String s = (String) a

The the above example, the assignment of a to s will give a ClassCastException in java but when you run the same in groovy it will not give an error since Groovy as defined how to typecast integer to string.

Coercion version of the above example is as follows

int a = 123
String s =  a as String

How to Define Custom Coercion Rules.

Let's take an example where we want to convert an object of class A to class B.

class A{
  String name
}

class B{
  String name
  String email
  
  def asType(Class target){
    if(target == A)
      return new A(name : this.name)
    if(target == String)
     return new String("${this.name }  ${this.email}")  
  }
}

def b = new B(name : 'ekansh', email : 'ekansh@ekiras.com')

def a = b as A
def s = b as String

println b.dump()
println a.dump()
println s
Output

<B@6040d37b name=ekansh email=ekansh@ekiras.com>
<A@b0fb0cc name=ekansh>
ekansh ekansh@ekiras.com


Here the important thing to note is the asType() method. In asType you can return the any object since the return type of the method is def. You can return object of any class depending upon the type of class it has to be casted to

When the as A is called on object of class B, then an object of class A will be returned. When as String is called on object of class B is called then a String object is returned.