Ts1206 décorateurs ne sont pas valides ici, Angular 2

Question

J'ai commencé à programmer Angular 2 et je suis bloqué avec une erreur :

ts1206 les décorateurs ne sont pas valides ici

@Component({   //  ts1206 les décorateurs ne sont pas valides ici 
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})

Mise à jour :

Mon tsconfig.json :

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

que puis-je en faire ?

Answer 1

Les décorateurs doivent venir directement avant une classe exportée par exemple :

@Component({
    ...
})
export class someComponent{}

cela fonctionne de la même manière pour @Pipe @Directive @Injectable et @NgModule

Answer 2

Cette erreur m'est apparue lorsque j'ai utilisé le routage angulaire et défini des routes après le décorateur @NgModule.

Nous devons définir des routes ou tout autre décorateur avant le décorateur @NgModule.

const appRoutes: Routes = [    // définir ceci avant @NgModule 
 { path: '',
   redirectTo: '/home',
   pathMatch: 'full'
 },
 { path: 'home', component: HomeComponent },
];

@NgModule({            // Ce décorateur doit être juste avant une classe exportée 
declarations: [
 AppComponent,
 HeaderComponent,
 HomeComponent
],
imports: [
 BrowserModule,
 RouterModule.forRoot(
   appRoutes,
   { enableTracing: true } // <-- uniquement à des fins de débogage
 )
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

Ajoutez une interface ou une autre déclaration au-dessus de @component. Cela corrigera l'erreur.

Answer 4

Interface Props{ ... }

@Component({ ... })

export class someComponent{}