Angular2的新功能,尝试从angular.io网站运行英雄编辑器应用程序时出现以下错误

时间:2017-01-06 14:03:14

标签: angular angular2-routing angular2-services

  

错误:(SystemJS)意外的值'未定义'由模块宣布的AppModule'       错误:意外的值' undefined'由模块宣布的AppModule'           在SyntaxError.BaseError [作为构造函数]

当我开始学习路由,Till Services它工作正常时发生了这个错误。

代码取自https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

app.module.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';

import { AppComponent }        from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent }     from './heroes.component';
import { HeroService }         from './hero.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
  path: 'dashboard',
  component: DashboardComponent
  },
  {
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
  {
    path: 'heroes',
    component: HeroesComponent
  }
])
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

dashboard.module.ts

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

import { Hero } from './hero';
import { HeroService } from './hero.service';


@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
})
export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit(): void {
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
  }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
   <nav>
     <a routerLink="/dashboard">Dashboard</a>
     <a routerLink="/heroes">Heroes</a>
   </nav>
   <router-outlet></router-outlet>`
})
export class AppComponent {
  title = 'Tour of Heroes';
}

0 个答案:

没有答案