'NgIf' 既不是 'ComponentType' 也不是 'DirectiveType'

Question

在非常简单的组件中使用 *ngIf 时，出现标题中的错误。例如，下面的代码和 app.module 导致此：

app.component.html:

<ng-container *ngIf="true">
  <div>True</div>
</ng-container>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我很困惑是什么原因造成的。 *ngFor 指令有同样的问题。项目的其余部分直接来自 ng new 个生成的文件。

"@angular/core": "~11.2.8"

Answer 1

损坏或其他异常的 node_modules 很可能是问题的根源。

运行 npm ci 修复了问题。

Answer 2

那是因为NgIf是在公共模块中声明的

在您的应用程序模块或任何其他想要使用通用指令的模块中添加并导入该模块。

import { CommonModule } from '@angular/common';

当人们忘记在 angular 运行时导入他们需要的东西时，这是一个很常见的错误，因为每个模块导入和导出他们自己的一组对象，你需要指定需要做什么，并在最终编译器将摇动树以导入必要的模块和 class 块代码。

NgIf 指令文档声明要使用修饰符你需要 commons 模块

因此您的代码应如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
],
  imports: [
    CommonModule,
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

'NgIf' 既不是 'ComponentType' 也不是 'DirectiveType'

'NgIf' is neither 'ComponentType' or 'DirectiveType'

angular-directive

angular