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

Я работаю над учебником в 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

Мой файл app.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:

Ошибка (index) происходит при:

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

Спасибо,

Ответ 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;
}

Ответ 2

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

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

Верно с 2.0.0-rc.6.

Ответ 3

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

Ответ 4

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

Ответ 5

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

class MyClass {

}
export class MyComponent implements OnInit {

Ответ 6

Эта ошибка также может существовать, если у вас есть @Injectable() перед объявлением компонента приложения в том же файле.