Angular stanndalone component issue: imports' must be an array of components, directives, pipes, or NgModules

Question

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?

Answer 1

I guess this is your issue :Issue

This can be resolved by adding the following inputs to the component:

import { MatButtonModule } from '@angular/material/button'
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

May be this can resolve, Please try this.