Angular ';NgIf&x27;两者都不是';组件类型';或';DirectiveType';

Angular ';NgIf&x27;两者都不是';组件类型';或';DirectiveType';,angular,angular-directive,Angular,Angular Directive,在一个非常简单的组件中使用*ngIf时,我在标题中看到了错误。例如,下面的代码和app.module会导致以下情况: app.component.html: <ng-container *ngIf="true"> <div>True</div> </ng-container> 我很困惑是什么导致了这一切*ngFor指令也有同样的问题。 项目的其余部分直接来自生成的新文件 “@angular/core”:“~11.2.8”一

在一个非常简单的组件中使用*ngIf时,我在标题中看到了错误。例如,下面的代码和app.module会导致以下情况:

app.component.html:

<ng-container *ngIf="true">
  <div>True</div>
</ng-container>
我很困惑是什么导致了这一切*ngFor指令也有同样的问题。 项目的其余部分直接来自生成的新文件


“@angular/core”:“~11.2.8”
一个损坏的或奇怪的
节点\u模块
很可能是问题的根源


运行
npm ci
可以修复问题。

损坏或异常的
节点\u模块
很可能是问题的根源


运行
npmci
修复了问题。

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

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

import { CommonModule } from '@angular/common';
当人们忘记在angular runtime中导入他们需要的东西时,这是一个非常常见的错误,因为每个模块导入和导出他们自己的对象集,您需要指定需要执行的操作,最后编译器将摇动树以导入必要的模块和带有块的类代码

指令文档说明,要使用修改器,您需要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是在公共模块中声明的

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

import { CommonModule } from '@angular/common';
当人们忘记在angular runtime中导入他们需要的东西时,这是一个非常常见的错误,因为每个模块导入和导出他们自己的对象集,您需要指定需要执行的操作,最后编译器将摇动树以导入必要的模块和带有块的类代码

指令文档说明,要使用修改器,您需要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 { }

BrowserModule还从@angular/common重新导出CommonModule,这意味着AppModule模块中的组件也可以访问每个应用程序所需的angular指令,如NgIf和NgFor@IngoBürkIn此外,我还遇到了另一个错误,在将CommonModule添加到app.module时,我发现几乎没有在线资源:
类型CommonModule没有“ɵmod”属性。
。你说得对,抱歉。有没有可能将存储库上传到GitHub或其他什么地方?听起来基本上是空的,对吧?标准的做法是删除节点_模块并重新安装。好主意,我会尝试这样做。:-)如果没有,我将上传到Github@是英戈布·克希格斯干的。谢谢你的帮助,我会回答这个问题,以免将来的人头疼@IngoBürkBrowserModule还从@angular/common重新导出CommonModule,这意味着AppModule模块中的组件也可以访问每个应用程序所需的angular指令,如NgIf和NgFor@IngoBürkIn此外,我还遇到了另一个错误,在将CommonModule添加到app.module时,我发现几乎没有在线资源:
类型CommonModule没有“ɵmod”属性。
。你说得对,抱歉。有没有可能将存储库上传到GitHub或其他什么地方?听起来基本上是空的,对吧?标准的做法是删除节点_模块并重新安装。好主意,我会尝试这样做。:-)如果没有,我将上传到Github@是英戈布·克希格斯干的。谢谢你的帮助,我会回答这个问题,以免将来的人头疼@IngoBürkTo引用docs:>BrowserModule还从@angular/common重新导出CommonModule,这意味着AppModule模块中的组件也可以访问每个应用程序所需的angular指令,如NgIf和NgFor。BrowserModule重新导出CommonModule,使双重导入无效。在某些情况下,导入CommonModule很有用,但这不是其中之一。引用文档:>BrowserModule还从@angular/common重新导出CommonModule,这意味着AppModule模块中的组件也可以访问每个应用程序需要的angular指令,如NgIf和NgFor。BrowserModule重新导出CommonModule,使双重导入无效。在某些情况下,导入CommonModule很有用,但这不是其中之一。