Recently, I upgraded my application to Angular v15 and decided to refactor a component to make it Standalone.
However, when I tried importing dependencies into this component, I encountered the following error:
'imports' must be an array of components, directives, pipes, or NgModules. Value is of type '[CommonModule, ReactiveFormsModule, MatDialogModule, MatButtonModule, (not statically analyzable), MatIconModule, MatFormFieldModule, MatInputModule]'.
All the dependencies are related to Angular Material and Angular frameworks.
@Component({
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatDialogModule,
MatButtonModule,
MatCardModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
],
selector: 'app-address-add-form',
templateUrl: 'address-add-form.component.html',
styleUrls: ['address-add-form.component.scss']
})
To resolve this issue, I decided to create a shared module and import it into this standalone component.
@Component({
standalone: true,
imports: [
SharedModule
],
selector: 'app-address-add-form',
templateUrl: 'address-add-form.component.html',
styleUrls: ['address-add-form.component.scss']
})
})
I'm still puzzled as to why I can't directly import dependencies for this component?