Angular Language Services marks every new imported module as not known element

Question

I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors.

First I thought it was one package issue, but I tried importing a few modules and have the same problem.

So for example, imported ngx-scrollbar package: Here is package.json

"ngx-scrollbar": "^8.0.0",

Imported in my app.module:

import { NgScrollbarModule } from 'ngx-scrollbar';
imports: [
   ...
   NgScrollbarModule

ALS shows this: (for this and every other new module imported) The project compiles succesfully, but with this I cannot use ALS. My ALS is latest version (14.1.0); I tried reverting to older version, no effect. I am sure that this is ALS, because when I turned it off, the error was not showing up.

Answer 1

I did compare with other VS code on other machine (where the error was not showing up).

I found that in Angular Language Services (v 14.1.0) turning of View Engine fixed the issue.

It says that "This option is incompatible with projects using Angular v13 and above." Even thought my project uses Angular v 12, this setting still caused problems.

Answer 2

Sometimes VS Code works not best with plugins. It often happens if you use not a single workspace project, but multiple projects or monorepository.

For this error you just need to go to the npm module and open it in VS Code. Just click with Cmd on NgScrollbarModule in your case, it opens tab with code of that module. And then VS Code ALS will know everything is OK.