Angular 2 App Component构造函数和ngoninit未调用

Question

嗨，我是角色2世界的新手

我正在使用angular＆＃34; 2.0.0-beta.0＆＃34;

我有boot.ts文件

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 => console.log(`Bootstrap success`))
  .catch(error => console.log(error));

我有AppComponent

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");
    }
}

AppComponent html模板

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

的package.json

{
  "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"
  }
}

当我打开控制台时，没有来自构造函数或ngOnInit函数的消息 我有上面的AppComponent文件中的默认root，并且控制台

中没有错误

为什么没有消息console.log（＆＃34; appComponent已加载＆＃34;）;或者console.log（＆＃34; appcomponent ngOnInit＆＃34;）;  出现在控制台

中

我检查了以下答案而不是为我工作 Angular 2 ngOnInit not called