Angular2: Ошибка: неожиданное значение «AppComponent» объявлен модулем «AppModule»

Question

Я работаю через учебник по https://angular.io/docs/ts/latest/tutorial/toh-pt2.html и получить следующее сообщение об ошибке после создания массива героев:

Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule' 
    at new BaseException (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27) 
    at eval (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35) 
    at Array.forEach (native) 
    at CompileMetadataResolver.getNgModuleMetadata (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:53) 
    at RuntimeCompiler._compileComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51) 
    at RuntimeCompiler._compileModuleAndComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41) 
    at RuntimeCompiler.compileModuleAsync (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25) 
    at PlatformRef_._bootstrapModuleWithZone (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9991:29) 
    at PlatformRef_.bootstrapModule (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9984:25) 
    at Object.eval (localhost:3000/app/main.js:4:53) 
Evaluating localhost:3000/app/main.js 
Error loading localhost:3000/app/main.js 

Моего приложения. module.ts файл в этой точке:

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

import { AppComponent } from './app.component'; 

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

export class AppModule {} 

Мой app.components.ts файл в этой точке:

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

export class Hero { 
    id: number; 
    name: string; 
} 

@Component ({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 

     <h2>My Heroes</h2> 
     <ul class="heroes"> 
      <li *ngFor="let hero of heroes"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul>   

     <h2>{{hero.name}} details!</h2> 
     <div><label>id: </label>{{hero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="hero.name" placeholder="name"> 
     </div> 
     ` 
}) 

const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 

export class AppComponent { 
    title = 'Tour or Heroes'; 
    heroes = HEROES; 
} 

Все работало до этого момента. Новый для Angular и не уверен, как отладить это.

Edit:

Ошибка возникает в (индекс) по адресу:

<!-- 2. Configure SystemJS --> 
    <script src = "systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err) { 
      console.error(err); 
     }); 
    </script> 
</head> 

Спасибо,

Answer 1

Декораторы связаны классы или переменные, которые после объявления декоратора.

В вашем коде декоратор @compoment находится над const HEROES, и это должно быть над классом AppComponent.

Так что ваш код должен быть следующим:

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

export class Hero { 
    id: number; 
    name: string; 
} 


export const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 


@Component ({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 

     <h2>My Heroes</h2> 
     <ul class="heroes"> 
      <li *ngFor="let hero of heroes"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul>   

     <h2>{{hero.name}} details!</h2> 
     <div><label>id: </label>{{hero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="hero.name" placeholder="name"> 
     </div> 
     ` 
}) 
export class AppComponent { 
    title = 'Tour or Heroes'; 
    heroes = HEROES; 
} 

Answer 2

Я быстро отметить, что эта ошибка может быть выброшена из любого способа @Component ошибки декларации - Т.е., даже @Component({}); - (обратите внимание на точку с запятой).

Если вы получили эту ошибку, убедитесь, что ваш синтаксис верен.

Истина с 2.0.0-rc.6.

Answer 3

Когда я сталкиваюсь с этим, я проверю его надолго. наконец, в конце @Component ({}) есть еще один ';'. Unknown so

Answer 4

У меня была эта ошибка после добавления некоторых из моих компонентов из корневой папки в отдельной папке. Проблема заключалась в использовании ./filename для пути к templateUrl и styleUrls после удаления ./ ошибка исчезла.

Answer 5

В моем случае я объявил класс только над определением класса компонентов, как показано ниже. Я переместил определение класса MyClass ниже класса экспорта, и он сработал. Поэтому я предполагаю, что класс экспорта должен быть первым объявлением в файле компонента.

class MyClass { 

} 
export class MyComponent implements OnInit {