How to Fix the "ts1206 decorators are not valid here" Error in Angular.js

I came across this error a while back in my Angular application.

Decorators follow the form @expression, where expression evaluates to a function called at runtime with information about the decorated declaration.

In Angular, you might know these decorators: @Component, @Pipe, @Directive, @Injectable, and @NgModule.

In order to solve this issue, we need the decorator to be placed directly before an exported class.

Errors with @Component

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

We can’t have any other declarations in between the two. The following setup will return the error.

@Component({
  ...
})
export interface myInterface {}
export class myComponent {}

Errors with @NgModule

In the case of the .module.ts, we might encounter this issue if we improperly set up Angular routes.

Be sure to define the routes before the @NgModule decorator, rather than after.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }
];
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}