I encountered an error stating that 'PatternList' (an interface I created) could not be found. When attempting to import it, another error surfaced claiming that PatternDetails is not a module. The root cause of this issue remains uncertain. This problem arose while configuring Webpack in my angular2 project.
Below is one of the components utilizing the PatternDetails interface:
@Component({
selector: 'pattern-detail',
template: `
<div class="pattern-detail" [ngClass]='{active: metadata.status.backendValidationStatus == "FAIL",
unactive: metadata.status.backendValidationStatus == "OK",
warning: metadata.status.backendValidationStatus == "WARN",
selected: metadata.selected
}' (click)="patternClicked(metadata)">
<div class="name-details">
<h3>{{metadata.displayName}}</h3>
<p>{{metadata.details}}</p>
</div>
<div class="time-details">
<p class='last_update'>{{metadata.lastupdate}}</p>
</div>
</div>
`,
styleUrls: ['/css/pattern_detail.css']
})
export class PatternDetailComponent {
@Input() metadata:PatternDetails;
@Output() selectPattern = new EventEmitter<PatternDetails>();
patternClicked(pattern: PatternDetails) {
this.selectPattern.emit(pattern);
}
}
The following is the structure of the PatternDetails interface:
interface PatternDetails {
patternClass: string;
version: string;
id: string;
displayName: string;
lastupdate: string;
details: string;
status: Status;
selected: boolean;
}
After conducting further investigation, it appears that there may be an issue with the tsconfig.json file, which I have included for reference:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types"
]
},
"types" : [
"core-js"
],
"exclude": [
"node_modules"
]
}
app.module.ts
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, ReactiveFormsModule ],
declarations: [ AppComponent, PatternListComponent, PatternDetailComponent, WidgetListComponent,
FormComponent, DefaultWidget, LabelComponent, CheckboxWidget ],
bootstrap: [ AppComponent ],
providers: [ WidgetService ]
})
export class AppModule { }