[angular error] After the component is set to standalone: Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘input‘.

background

When practicing routing component lazy loading, set the component to standalone, and then use *ngModel in the corresponding html of the component to report an error: a>

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Insert image description here
I searched for many solutions, but they were all solved by directly importing the module FormsModule.

digression

At the same time as this problem occurred, *ngFor also reported a warning. It is reasonable to speculate that the problems are caused by setting standalone.

The *ngFor directive was used in the template, but neither the NgFor directive nor the CommonModule was imported. Please make sure that either the NgFor directive or the CommonModule is included in the @Component.imports array of this component.

Insert image description here
It can be seen from the error message that the module CommonModule needs to be introduced.
Since the component has been set to standalone and it does not have such a directive as ngFor, it needs to be imported from CommonModule.

Reference:Hori

Insert image description here
So the solution is:

Insert image description here
The problem is solved.

Solution

By analogy, the solution is: introduce the module corresponding to the instruction in the component.

Insert image description here

Components/modules need to be introduced again, while global configuration only needs to be introduced once in the root directory.