ts1206 decorators are not valid here, Angular 2

问题:

I started to program Angular 2 and I stuck with an error:

ts1206 decorators are not valid here

@Component({   //  ts1206 decorators are not valid here
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})

Update:

My tsconfig.json:

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

what can I do with it?

回答1:

The Decorators must come directly before an exported class for example:

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

this goes the same for @Pipe @Directive @Injectable and @NgModule

回答2:

This error came to me when I used angular routing and defined routes after @NgModule decorator.

We need to define routes or any other decorater before the @NgModule decorator.

const appRoutes: Routes = [    // define this before @NgModule 
 { path: '',
   redirectTo: '/home',
   pathMatch: 'full'
 },
 { path: 'home', component: HomeComponent },
];


@NgModule({            // This Decorator should be just before an exported class 
declarations: [
 AppComponent,
 HeaderComponent,
 HomeComponent
],
imports: [
 BrowserModule,
 RouterModule.forRoot(
   appRoutes,
   { enableTracing: true } // <-- debugging purposes only
 )
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }