Angular：HttpClientModule 导入错误（无法解析为 NgModule 类）答案

【问题标题】：Angular: HttpClientModule import error (could not be resolved to an NgModule class)Angular：HttpClientModule 导入错误（无法解析为 NgModule 类）
【发布时间】：2022-04-30 04:59:47
【问题描述】：

我试图在假 json 服务器上使用 crud 构建一个简单的应用程序

但我无法导入 HttpClientModule

这是来自 VS Code 的错误消息：

ERROR in node_modules/@angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

    This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

    2801 export declare class HttpClientModule {

这里是 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeCreateComponent } from './employee-create/employee-create.component';
import { EmployeeEditComponent } from './employee-edit/employee-edit.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    EmployeeCreateComponent,
    EmployeeEditComponent,
    EmployeeListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'restTest6';
}

请注意：我没有在其他任何地方使用 HttpClientModule。我导入并做了ng serve -o 并得到了错误。请指出哪里出了问题

【问题讨论】：

标签： angular typescript

【解决方案1】：

我遇到了同样的问题，我只是运行以下命令，它在没有任何错误的情况下运行。

npm cache verify

如果没有，请尝试手动删除node_modules 文件夹并使用npm install 重新安装模块。

rm -rf node_modules
npm install

在 npm > 6 上，您还可以运行 npm ci，这也会删除 node_modules 文件夹并在之后重新安装包。

编辑正如其他答案所建议的那样，如果上述步骤不起作用（但它们通常可以），您可能需要重新启动ng serve

【讨论】：

npm 缓存验证。 Manuallu 删除 node_Modules 后。然后 Npm 安装。只需关闭并打开 VScode 编辑器。它正在工作。
如何在 StackBlitiz 上使用它？

【解决方案2】：

在添加新包之前停止 ng serve，添加新包后重新启动 ng serve。这将解决这个问题。

【讨论】：

(ctrl+c) 然后 (ng serve) 再次

【解决方案3】：

首先停止服务并运行这些命令...

npm cache verify
rm -rf node_modules
npm install

安装后使用命令构建并运行您的项目

ng build
ng serve

它对我有用并解决了问题...

【讨论】：

【解决方案4】：

您可以将此 HttpClientModule 添加到 app.component.ts 中的导入中。

imports: [HttpClientModule]

【讨论】：

尝试了上面答案中提到的所有其他解决方案，但对我不起作用。这个解决方案奏效了。谢谢！

【解决方案5】：

我通过以下步骤解决了这个问题

已停止 ng 服务 cmd
运行 npm 缓存验证 cmd
已启动 ng serve cmd

【讨论】：

【解决方案6】：

首先，你只需要删除 node-modules 文件夹然后使用命令更新 npm

npm i -g npm

然后你需要构建你的项目来维护角度项目，这可以通过使用命令来完成

构建

然后您将能够通过键入命令来服务或托管项目

ng 服务

【讨论】：

【解决方案7】：

我遇到了同样的问题。所以，我手动删除了node_modules，然后是npm install。它解决了，因为这个问题是由于损坏的依赖关系。

【讨论】：

【解决方案8】：

在我的情况下，关闭 VS Code，重新打开项目并执行“ng serve”。它奏效了。

【讨论】：

【解决方案9】：

在我的例子中，我进行了一些单元测试，并在导入部分的app.module.ts 文件中添加了HttpModule。为了解决这个问题，我刚刚从 app 模块中删除了 HttpModule 导入并修复了错误。

// app.module.ts

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
    // Removed from here <--
   ...

【讨论】：