I am experiencing an issue with a newly created Angular Project in Visual Studio Code where attribute directives like [ngClass], [ngSwitch], and others are showing errors in the .html file. Here is the standard app.component.html file created as part of "ng new".
Link to app.component.html file
In app.module.ts, I have imported CommonModule as suggested on various online sites as shown below:
After adding it, the error in the .html file still persists. However, this error does not affect the functionality when running the ng serve command as the page displays correctly in the browser.
I have searched online for solutions but could not find any similar issues reported. Below is the Angular version information for my workspace:
Since I am new to Angular, I have only tried out some suggestions found online such as importing CommonModule in app.module.ts. I have spent nearly 3 days researching and reading up on this issue without much success. I also attempted to uninstall and reinstall Angular Language Service, but that did not resolve the problem.
I would greatly appreciate any help or insights from fellow developers. Thank you in advance!
[Updated with code snippets]
Partial code snippet from app.component.html file:
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build</pre>
</div>
Snippet from app.module.ts file:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular CLI Version:
Angular CLI: 16.1.4
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64
Angular: 16.1.6
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.4
@angular-devkit/build-angular 16.1.4
@angular-devkit/core 16.1.4
@angular-devkit/schematics 16.1.4
@angular/cli 16.1.4
@schematics/angular 16.1.4
rxjs 7.8.1
typescript 5.1.6
Error message received:
(directive) NgSwitch
Can't bind to 'ngSwitch' since it isn't a known property of 'div'.ngtsc(-998002)
app.component.ts(2, 26): Error occurs in the template of component AppComponent.
[Update - Comparison with my old Angular test project]
It would be easier to illustrate the differences through images rather than code. I suspect there may be version compatibility issues as removing CommonModule from my older test project results in a different error compared to the one in the newer version. Any clarification on this matter would be highly appreciated.
Comparison between Angular versions 16.1.6 and 14.1.1
As I am not an expert in Angular, I am seeking assistance here. Thank you once again for your help!