Angular2: Erreur: valeur inattendue 'AppComponent" déclarée par le module "AppModule'

Je travaille dans le tutoriel à https://angular.io/docs/ts/latest/tutorial/toh-pt2.html et obtenez l'erreur suivante après la création de la matrice des héros:

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

Mon application.le module.fichier ts à ce point est:

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

Mon application.des composants.fichier ts à ce point est:

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

Tout fonctionnait jusqu'à ce point. Nouveau Angulaire et vous ne savez pas comment déboguer ce.

Edit:

L'erreur se produit dans (index) à:

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

Merci,

InformationsquelleAutor 0_X8320BNZ | 2016-09-01

angular

Décorateurs sont liées à des classes ou des variables qui sont la suite de la déclaration de décorateur.

Dans votre code la @compoment décorateur est plus de const HEROES et cela doit être plus classe AppComponent.

De sorte que votre code doit être la suivante:

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

+1. depuis seulement le code de la classe Héros a été donné dans l'un tutoriel extrait je l'ai placé en dessous de @Composant. Ils devraient faire une remarque là pour avertir les débutants.
c'est bon juste le code ne courir car il y a un problème avec les héros de la variable qui n'existe pas
J'ai fait exactement la même chose. Ainsi, chaque déclaration faite après la décorateurs est associée avec elle? Je crois que je vais faire quelques recherches à ce sujet.
oui, chaque décorateurs sont associés à la déclaration suivante.

InformationsquelleAutor caballerog

16

Je vais vite noter que cette erreur peut être levée à partir de toute manière de @Component déclaration erreur — I. e., même @Component({}); — (noter le point-virgule).

Si vous recevez cette erreur, assurez-vous de vérifier que la syntaxe est correcte.

Vrai que de 2.0.0-rc.6.
- Je vous remercie pour votre réponse. Il fonctionne comme un charme. Je suis à l'aide de resharper et l'outil trompe moi avec le mauvais point-virgule. Il m'a fallu plusieurs heures pour trouver la solution ici avec un petit mal de semi-couleur avec une exception qui est levée lors de l'exécution avec peu d'indice sur les conseils.
- "Si vous recevez cette erreur, assurez-vous de vérifier que la syntaxe est correcte." ...ou que vous avez réellement compris le @Component lui-même! Haha. Oups. Merci @nikk wong!
- Ce qui m'est arrivé lorsque j'ai raté le " @ " dans le début de la Composante décorateur.
InformationsquelleAutor nikk wong
0

quand je le rencontre , je le vérifier pour un long moment . enfin , à la fin de @Composant({}) ,il y a encore un ';'. Inconnu donc

InformationsquelleAutor B.liu
0

J'ai eu ce message d'erreur après l'ajout de certains de mes composants à partir de la racine du dossier dans le dossier séparé. Le problème a été avec l'aide de ./nom de fichier pour le chemin vers templateUrl et styleUrls, après la suppression ./l'erreur a disparu.

InformationsquelleAutor Razvan.432
0

Dans mon cas, j'avais déclaré une classe un peu plus de la composante de la définition de la classe comme ci-dessous. J'ai déplacé la classe Maclasse de la définition ci-dessous à l'exportation de la classe et cela a fonctionné.
Donc je suppose que l'exportation de la classe doit être le premier de la déclaration dans le fichier de composant.
```
class MyClass {

}
export class MyComponent implements OnInit {
```
InformationsquelleAutor Salim
0

Cette erreur peut également exister dans le cas où vous avez @Injectable() classe avant que votre application composant déclaration sur le même fichier.

InformationsquelleAutor Fatma Amin

Annuler la réponse

Vous devez vous connecter pour publier un commentaire.