12 May 2017

Setting up the environment for Angular2 and Hello World Example in Angular2

Hi All,

In this post I am going you to show you how you can set up the environment for Angular2.

You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers:

1. lite-server (static server)
2. Weblogic Server 10.3

Lets do the setup for lite server. 

First of all go to any directory in your computer and create a folder in that directory with name "angular2-example".

You can do it by the command line also by typing the following command.

mkdir  angular2-example

Now once the directory is created you need to create three files.

1. tsconfig.json
2. typings.json
3. package.json

1.  tsconfig.json

This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation.

The content of this file will be as follows:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}



2. typings.json


The typings.json file is used to identify TypeScript definition files in your Angular application.


 The content of this file will be as follows:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}



3. package.json

package.json is the files which contains all the packages defined which are required by the application.


The content of this file will be as follows:

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

 
Once these files are created go to your folder and run the following command in run command.

npm install




This command will install are the dependencies which are defined in package.json.

Error messages in red may appear while installing npm, just ignore them.



Now our configuration is done.

Let's create a Hello World component to verify whether our setup is done properly or not.

create one folder with name app inside angular2-example folder and create the following files.

1. app.component.ts
=========================================================================
import {Component} from "angular2/core";

@Component({
   selector: 'my-app',
   template: '<h2>Hello Kunal ! How Are You ?</h2>'
})


export class AppComponent {

}

==========================================================================

2. main.ts

=========================================================================

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"

bootstrap(AppComponent);


=========================================================================


Now create the index.html file and write the following inside it.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <base href=".">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      map: {
        app: './app'
      },
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        }
      }
    });
    System
      .import('app')
      .catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>
      Loading...
    </my-app>
  </body>
</html>

Now we can run the lite server and test our application.

To run the lite server we need to run the following command in command line

npm start

Now you can see the result in the browser as shown below:

 
 Now if you want to run the same application in the weblogic server you can create the Web application in the eclipse or any other IDE and then place the app folder and index.html inside web folder. You do not need to put three configuration files (tsconfig.json,  typings.json,  package.json) and then you can run the application as you run any other J2EE project in eclipse or any other IDE.

Then you can see the same result as above.

That's it  .

Happy Coding :)







 

5 comments: