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,
Vous devez vous connecter pour publier un commentaire.
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 constHEROES
et cela doit être plus classeAppComponent
.De sorte que votre code doit être la suivante:
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.
@Component
lui-même! Haha. Oups. Merci @nikk wong!quand je le rencontre , je le vérifier pour un long moment . enfin , à la fin de @Composant({}) ,il y a encore un ';'. Inconnu donc
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.
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.
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.