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

Published Mar 3, 2021

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

export class myComponent {}

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

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 }
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {}

More JS Articles