Roxy Roxy - 1 month ago 12
TypeScript Question

Angular 2 typescript compilation error :A class declaration without the 'default' modifier must have a name

I am new to Angular2. My task is to update our project from angular2 RC1 to angular 2.1.
I updated my Type script version from 5 to 6 and i am seeing compilation problems like :


A class declaration without the 'default' modifier must have a name


which were not there with older version.

My ts file :

import {
Component,
OnChanges,
SimpleChange,
OnInit,
Input,NgModule } from '@angular/core';
import {IconComponent} from '../icon';
import { WizardPageComponent } from '../wizard';
import { StepState } from './step-state.enum';

@Component({
selector: 'step-of-the-wizard',
templateUrl: 'step-of-the-wizard.component.html',
styleUrls: [ 'step-of-the-wizard.component.scss']
})

@NgModule({
declarations:[
IconComponent
]
})




export class implements OnChanges, OnInit {
@Input() name:string;
@Input() state:StepState = StepState.UNCOMPLETED;
@Input() size:number = 30;

@Input() vertical:boolean = false;

public iconNameUncompleted:string = 'blank-check-box';
public colorOfIconUncompleted:string = 'grey';
public iconNameCompleted:string = 'check-box';
public colorOfIconCompleted:string = 'green';
public iconNameInActiveState:string = 'create-new-pencil-button';
public colorOfIconInActiveState:string = 'red';
@Input() isLast:boolean = false;
@Input() isFirst:boolean = false;

public associatedPage:WizardPageComponent;

activeIcon:string = this.iconNameUncompleted
activeColor:string = this.colorOfIconUncompleted;

linkColor:string = this.colorOfIconUncompleted;

ngOnChanges(changes){
if(changes.state instanceof SimpleChange){
switch(changes.state.currentValue){
case StepState.COMPLETED:
this.activeIcon = this.iconNameCompleted;
this.activeColor = this.colorOfIconCompleted;
this.linkColor = this.colorOfIconCompleted;
break;
case StepState.UNCOMPLETED:
this.activeIcon = this.iconNameUncompleted;
this.activeColor = this.colorOfIconUncompleted;
this.linkColor = this.colorOfIconUncompleted;
break;
case StepState.ACTIVE:
this.activeIcon = this.iconNameInActiveState;
this.activeColor = this.colorOfIconInActiveState;
this.linkColor = this.colorOfIconUncompleted;
break;
default:
this.activeIcon = this.iconNameUncompleted;
this.activeColor = this.colorOfIconUncompleted;
break;
}
}
}
ngOnInit() {
if(window.matchMedia("(max-width:1000px)").matches){
this.size = 15;
}
}
}


and i get compilation error at "@Component" declaration

i tried searching for it in google but did not get much help.

My tsconfig file:

{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}


}

Thanks.

Answer

You must name your class...

replace :

export class  implements OnChanges, OnInit {

by

export class  MyClass implements OnChanges, OnInit {
Comments