Angular stanndalone component issue: imports' must be an array of components, directives,...

I update my application to angular v15 and try to refactor a component to be Standalone.

When import dependencies in this component I got this 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 dependencies are relative to angualr material and angualr.

@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']
})


for fix this issue I create a shared module then import shared module to 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']
})
})


why for this component I can't directly imports dependencies?

Continue reading...