Angular 2 App Component constructor and ngoninit not called
<p>hi i'm newbie to angular 2 world </p>

<p>i'm using angular  "2.0.0-beta.0"</p>

<p>i have boot.ts file </p>

<pre><code>import {bootstrap}    from "angular2/platform/browser"
import {ROUTER_PROVIDERS} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";


import {AppComponent} from "./app.component"

bootstrap(AppComponent, [ROUTER_PROVIDERS,
    HTTP_PROVIDERS]) 
 .then(success =&gt; console.log(`Bootstrap success`))
  .catch(error =&gt; console.log(error));
</code></pre>

<p>and i have AppComponent</p>

<pre><code>import { Component, provide, OnInit } from 'angular2/core';
import { HTTP_PROVIDERS, XHRBackend } from 'angular2/http';
import { RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteDefinition, Location } from 'angular2/router';
import 'rxjs/Rx'; // load the full rxjs


import { BranchesComponent, BranchService } from './branches/branches';

import { ModulesComponent, ModuleService, Module } from './modules/modules';
import { DashboardComponent } from './dashboard/dashboard';
import { CONFIG, MessageService } from './shared/shared';
import { EntityService, ExceptionService, ModalComponent, ModalService, SpinnerComponent, SpinnerService, ToastComponent, ToastService } from './blocks/blocks';

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES, ModalComponent, SpinnerComponent, ToastComponent],
    providers: [
        HTTP_PROVIDERS,
        ROUTER_PROVIDERS,
        EntityService,
        ExceptionService,
        MessageService,
        ModalService,
        SpinnerService,
        ToastService,
        BranchService,
        ModuleService
    ]
})
@RouteConfig([
    { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
    { path: '/branches/...', name: 'Branches', component: BranchesComponent },
])
export class AppComponent implements OnInit {


    public menuItems = [
        { caption: 'Dashboard', link: ['Dashboard'] },
        { caption: 'Branches', link: ['Branches'] }
    ];

    modules: Module[];

    constructor(
            private _messageService: MessageService,
            private _modalService: ModalService) {
        console.log("appComponent loaded");
    }

    ngOnInit() {
        componentHandler.upgradeDom();
        console.log("appcomponent ngOnInit");
    }
}
</code></pre>

<p>AppComponent html template</p>

<pre><code>&lt;!-- Simple header with scrollable tabs. --&gt;
&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
    &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
            &lt;!-- Title --&gt;
            &lt;span class="mdl-layout-title"&gt;Sanabel Erp&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="mdl-layout__tab-bar"&gt;
            &lt;a *ngFor="#item of menuItems" [routerLink]="item.link" class="mdl-layout__tab" &gt;{{item.caption}}&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- Tabs --&gt;
        &lt;div class="mdl-layout__tab-bar"&gt;
            &lt;a href="#scroll-tab-2" class="mdl-layout__tab is-active"&gt;Settings&lt;/a&gt;
            &lt;a href="#scroll-tab-3" class="mdl-layout__tab"&gt;Reports&lt;/a&gt;
            &lt;a href="#scroll-tab-4" class="mdl-layout__tab"&gt;Programs&lt;/a&gt;
            &lt;a href="#scroll-tab-5" class="mdl-layout__tab"&gt;Dashboard&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Modules&lt;/span&gt;
        &lt;nav class="mdl-navigation"&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;inpatient&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;outpatient&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;operation&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Registeration&lt;/a&gt;
        &lt;/nav&gt;
    &lt;/div&gt;
    &lt;main class="mdl-layout__content"&gt;
        &lt;section class="mdl-layout__tab-panel is-active"&gt;
            &lt;div class="page-content"&gt;
                &lt;router-outlet&gt;&lt;/router-outlet&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
    &lt;story-spinner&gt;&lt;/story-spinner&gt;
    &lt;toast&gt;&lt;/toast&gt;
    &lt;modal-confirm&gt;&lt;/modal-confirm&gt;
&lt;/div&gt;
</code></pre>

<p>package.json</p>

<pre><code>{
  "name": "nodesetting",
  "version": "0.0.1",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap": "3.3.6",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10",
    "jquery": "2.1.4"
  },
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "gulp-rename": "1.2.2",
    "rimraf": "2.2.8",
    "lodash": "3.10.1",
    "typings": "^1.3.0"
  },
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  }
}
</code></pre>

<p>when i open console there is no messages from constructor or ngOnInit function
i have default root as you can see above in AppComponent file and there is no error in console </p>

<p>why there is no messages  console.log("appComponent loaded"); or             console.log("appcomponent ngOnInit");
 appear in console </p>

<p>i checked the following answer and not working for me 
<a href="https://stackoverflow.com/questions/35936535/angular-2-ngoninit-not-called">Angular 2 ngOnInit not called</a></p>