Angular 12 template linting not working after switchting from tslint to eslint

Question

After upgrading an nx workspace to v12, everything works as before, expected template linted in the IDE.

The IDE (WebStorm) shows some strange errors never happend before:

The first warning says No directive is matched on attribute ngIf even the CommonModule is imported, the second error related to the async says Missing require() statement and var async = require('@angular/core/testing').async;

It's really interesting, because building the whole monorepo works flawlessly so I guess this could be caused by some incorrect linting configuration. Have to say that the workspace was not just updated to the newest nx version, It was converted from tslint to eslint as well.

Did someone had similar issues in the past?

Answer 1

I had the same No directive is matched on attribute ngIf message in PhpStorm, after updating a project to Angular 12. I created a new project with Angular CLI and had the same issue, while another project still on Angular 9 worked fine in the same IDE at the same time.

I did help > check for updates, and it said everything was up to date, but while looking on the JetBrains website I noticed there was a newer version of the Angular Plugin, that was bundled with a newer version of PhpStorm, that the auto update in the IDE had not found; I installed the new PhpStorm and the problem was fixed.

Currently using PhpStorm 2021.1.4

Answer 2

Had the same issue on PyCharm. An update to 2021.3 RC solved the problem. It should also work on WebStorm.

Answer 3

I have the same on VS Code. The cause was in "Angular Language Service " plugin, was need to restart it and the error disappear. So as mention above just go through extensions on your IDE and "restart/update or disable" it and check if error disappear.