Quick Fix: Remove the node_modules folder, clear the npm cache with npm cache clean --force, and reinstall dependencies with npm install from the project root in a terminal different from the VSCode terminal.
The Problem:
When importing the CommonModule in an Angular 8 project, the error ‘CommonModule’ does not appear to be an NgModule class’ is encountered. Additionally, errors related to directives like ‘ngClass’ appear in HTML files. Despite trying various solutions, including deleting node modules and enabling legacy view engine, the issue persists.
The Solutions:
Solution 1: Unaffected by VSCode
1. Delete the node_modules folder.
2. Clear the npm cache using npm cache clean --force.
3. Open the project in VSCode.
4. Run npm install, then run npm start from the project root in a terminal different from the VSCode terminal.
This approach allows to recompile the project and, consequently, resolve the error in VSCode.
Solution 2: Install an earlier version of Angular Language Service extension
If you’re not running a recent version of Angular with Ivy, install an earlier version of the Angular Language Service extension. For an Angular 8 project, version v11.1.3 seems to work fine.
Solution 3: Disabling Ivy
Angular provides an option to disable Ivy, its advanced rendering engine, to alleviate compatibility issues. To disable Ivy:
Open the tsconfig.app.json file.
Add the following code within the "angularCompilerOptions" object:
"angularCompilerOptions": {
"enableIvy": false
}
Save the file.
Restart your application.
Q&A
What version of Typescript should I use in VSCode to resolve the error?
—
Use the version of Typescript specified in the package.json of the project.
Video Explanation:
The following video, titled "Pulling Handles on Thrown Angular Mugs - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
Here's my ASMR version of my latest film! If you'd prefer to watch the carefully narrated edition, that goes into a lot of depth about all ...
