HelloWorld Example in angular 2 application.

In this article, We will discuss about How to Create a HelloWorld Example in angular 2 application.

Create a particular folder name as "HelloWorld" in a particular drive.

Goto Visual Studio Code.

Click on "Open Folder" and Which will open a PopUp Window and there we need to Select "HelloWorld" folder.

In the Explorer Window, It Will Show "HelloWorld".

Click on "HelloWorld" and again Click on New File and give the name of file as "package.json".

package.json
---------------
{
    "name":"myproject",
    "description":"my angular 5 project",
    "dependencies":{
        "@angular/core":"latest",
        "@angular/common":"latest",
        "@angular/compiler":"latest",
        "@angular/platform-browser":"latest",
        "@angular/platform-browser-dynamic":"latest",
        "rxjs":"latest",
        "zone.js":"latest",
        "systemjs":"latest",
        "core-js":"latest"
    }
}

goto integrated terminal and click npm install.

After that it will take Some time to install all those files into node_modules folder.

Create new file into "HelloWorld" folder and give the name as "systemjs.config.js".

systemjs.config.js
---------------------
System.config({
    map:{
        "app":"scripts",
        "@angular/core":"node_modules/@angular/core/bundles/core.umd.js",
        "@angular/common":"node_modules/@angular/common/bundles/common.umd.js",
        "@angular/compiler":"node_modules/@angular/compiler/bundles/compiler.umd.js",
        "@angular/platform-browser":"node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
        "@angular/platform-browser-dynamic":"node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
        "rxjs":"node_modules/rxjs"
    },
    packages:{
        "app":{main:"./app"},
        "rxjs":{}
    }
});

Create new file into "HelloWorld" folder and give name as "tsconfig.json".

tsconfig.json
---------------
{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "lib": [
            "es2015","dom"
        ]
    }
}

Create "scripts" folder under "HelloWorld" folder.

Create typescript file[main startup file/entry file] into scripts folder.

app.ts
-------
import {Component,NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";

@Component({
    selector:"my-app",
    template:"<h2> Hello World </h2>"
})

class AppComponent{}

@NgModule({
  declarations:[AppComponent],
  imports:[BrowserModule],
  bootstrap:[AppComponent]  
})

class AppModule{}

platformBrowserDynamic().bootstrapModule(AppModule);

Create new file into "HelloWorld" folder and give name as "index.html".

index.html
-------------
<html>
    <head>
         <script src="node_modules/core-js/client/shim.js"></script>
         <script src="node_modules/systemjs/dist/system.js"></script>
         <script src="node_modules/zone.js/dist/zone.js"></script>
         <script src="systemjs.config.js"></script>
         <script>
             System.import("scripts").catch(function(ex)
             {
                 console.log("error with SystemJS module loader file");
             });
         </script>
    </head>
    <body>
        <h1>Angular First Example</h1>
        <my-app>Loading Component...</my-app>
    </body>
</html>

Goto Integrated Terminal and type tsc[It Will Compile app.ts into app.js].

In the same integrated terminal type http-server.

Goto Browser and type "http://127.0.0.1:8080/index.html".

Tuesday 17 April 2018

HelloWorld Example in angular 2 application.

0 comments:

Post a Comment

Contact Form