VS Code displaying "my-custom-element" is not a known element after upgrade from Angular v7 to v8

Question

I have an Angular project that uses many custom elements from another project that we share via an npm package (as it is used in many other projects)

After upgrading Angular from 7 to 8 (on the way to latest), vscode now show red lines for ALL the components..

With the error " is not a known element"

The project builds and runs fine. The elements are all export from the shared module, and the shared module is imported. No restarting of VS Code, running npm i etc will fix this.

I do not get these errors before the upgrade to Angular v8.

Why would VS Code be showing this (for every custom element in every html file)?

Answer 1

In case anyone else is having this issue, I was getting a similar problem in the Angular 6 project.

Turns out for me, the latest version of the Angular Language Service extension in VSCode was somehow incompatible with the Angular version I am using.

I followed this answer on SO and the 0.1100.4 version worked for me.

So I think you need to check which (latest) version works for you. I hope this will help!

Answer 2

Your Angular Language service Extention might not be configured correctly with migrations. Therefore try to restart it.

If it is not working you can uninstall and install that extension again.

• angular source - https://angular.io/guide/language-service
• vs code extension - https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.AngularLanguageService