✒️
Here are my favorite tips to land the software engineer interview.
Here are my favorite tips to land the software engineer interview.
How to Fix the "ts1206 decorators are not valid here" Error in Angular.js
Published Mar 3, 2021
∙ Updated May 2, 2022
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 {}