属性指令即使在新创建的Angular项目上也被标记为错误。

huangapple go评论72阅读模式
英文:

Attribute Directive is mark as error even on newly created Angular Project

问题

我在 Visual Studio Code 中新建的 Angular 项目遇到了问题,像 [ngClass]、[ngSwitch] 等属性指令在 .html 文件中显示为错误。下面是通过 ng new 创建的标准 app.component.html 文件。

app.component.html 文件

在 app.module.ts 中,我按照各种在线建议导入了 CommonModule 如下:

app.module.ts

添加了它后,.html 文件中的错误仍然存在。但是当我运行 ng serve 命令时,这个错误并不会导致任何问题,页面可以在浏览器中正常显示。

我尝试在网上查找了一些信息,但找不到类似的问题。

下面是我工作区的 Angular 版本:

angular cli 版本

由于我对 Angular 还很新,除了尝试在 app.module.ts 中导入 CommonModule 外,没有做太多事情。我几乎花了三天的时间进行了大量的搜索和阅读,但找不到类似的问题。我也尝试了卸载并重新安装 Angular 语言服务,但效果不佳。

非常感谢各位开发者的帮助。提前感谢大家。

英文:

I've encounter problem with newly created Angular Project in Visual Studio Code where attribute directive like [ngClass], [ngSwitch] and etc is shown as error in .html file. Below is the standard app.component.html created as part of ng new <proj name>.

app.component.html file

In app.module.ts, I've import CommonModule as suggested in various online site as below: -

app.module.ts

After adding it, the error in .html file is still there. However this error does not give any issue when I run ng serve command and the page is able to be viewed in browser and working fine.

I have tried do some read up online but can't find any which is having similar issue.

Below is the Angular version for my workspace: -

angular cli version

Since I'm new to Angular, nothing much has been done apart from trying out some suggestion found online like import CommonModule in app.module.ts. I have spend almost 3 days doing a lot of search and read up but can't find much having similar issue. I did uninstall and reinstall Angular Language Service but to no effect.

Help from fellow developer will be greatly appreciated. Thanks everyone in advance

[updated with code]
partial of app.component.html file

  &lt;div class=&quot;terminal&quot; [ngSwitch]=&quot;selection.value&quot;&gt; &lt;!-- [ngSwitch] giving error --&gt;
      &lt;pre *ngSwitchDefault&gt;ng generate component xyz&lt;/pre&gt;
      &lt;pre *ngSwitchCase=&quot;&#39;material&#39;&quot;&gt;ng add @angular/material&lt;/pre&gt;
      &lt;pre *ngSwitchCase=&quot;&#39;pwa&#39;&quot;&gt;ng add @angular/pwa&lt;/pre&gt;
      &lt;pre *ngSwitchCase=&quot;&#39;dependency&#39;&quot;&gt;ng add _____&lt;/pre&gt;
      &lt;pre *ngSwitchCase=&quot;&#39;test&#39;&quot;&gt;ng test&lt;/pre&gt;
      &lt;pre *ngSwitchCase=&quot;&#39;build&#39;&quot;&gt;ng build&lt;/pre&gt;
  &lt;/div&gt;

app.module.ts file

import { CommonModule } from &#39;@angular/common&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;

import { AppRoutingModule } from &#39;./app-routing.module&#39;;
import { AppComponent } from &#39;./app.component&#39;;

@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: -

(directive) NgSwitch
Can&#39;t bind to &#39;ngSwitch&#39; since it isn&#39;t a known property of &#39;div&#39;.ngtsc(-998002)
app.component.ts(2, 26): Error occurs in the template of component AppComponent.

[Update - Comparison between my old Angular test project]
Sorry, it's easier to show in image rather than code.
I suspect it's some version compatibility issue since when I remove CommonModule from my older version test project, the error shown is different from the error given in newer version. Please help to enlighten.

Angular version 16.1.6 vs 14.1.1

But obviously I'm not expert in this hence I'm looking for help here. Thanks again

答案1

得分: 0

我已经成功找到了问题所在。这是由于Angular语言服务引起的。
以下是所采取的步骤:

  1. 更新Visual Studio Code版本(对于我的情况是1.80.1)
  2. 卸载然后重新安装Angular语言服务扩展

在上述步骤之后,像[ngClass],[ngSwitch]等属性指令在.html文件中不再显示错误。
进一步验证是通过从app.module.ts文件中移除CommonModule并检查错误消息来完成的,现在显示的错误与我在使用Angular版本14.1.1的测试项目中显示的错误相同。

希望这对于遇到类似问题的人有所帮助。
感谢@Rituparna Warwatkar提醒了我关于VS Code的问题,让我尝试在这个方向上做一些工作。

英文:

I have managed to pinpoint the problem. It is due to Angular Language Service.
Below are the step taken: -

  1. Update Visual Studio Code version (for my case is 1.80.1)
  2. Uninstall and then re-install Angular Language Service Extension

After the above step, attribute directive like [ngClass], [ngSwitch] and etc no longer show error in .html file.
Further verification is done by removing CommonModule from app.module.ts file and check the error message, now the error shown is the same as error shown in my test project with Angular version 14.1.1

Hope this help whoever who have similar issue.
Thanks and have a great day

Thanks to @Rituparna Warwatkar for highlighting on VS Code which make me try to work on something on this direction.

huangapple
  • 本文由 发表于 2023年7月20日 12:05:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726609.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定