VSCode 找不到模块“@angular/core”或任何其他模块答案

【问题标题】：VSCode cannot find module '@angular/core' or any other modulesVSCode 找不到模块“@angular/core”或任何其他模块
【发布时间】：2018-02-04 19:25:14
【问题描述】：

我的项目是使用 Angular CLI 1.2.6 版生成的。

我可以编译项目，它工作正常，但我总是在 VSCode 中得到错误告诉我：

cannot  find module '@angular/core'
cannot find module '@angular/router'
cannot find module .....

我附上了我的tsconfig.json 文件的内容这对我来说真的很令人沮丧，花了 2 个小时才弄清楚出了什么问题，我还卸载并重新安装了 VSCode 它不起作用。

这是我的环境规范：

@angular/cli: 1.2.6
node: 6.9.1
os: win32 x64
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.4
@angular/language-service: 4.3.4

操作系统：Microsoft vs 10 企业版

项目根目录

.angular-cli.json
.editorconfig
.gitignore
.vscode
e2e
karma.conf.js
node_modules
package.json
protractor.conf.js
README.md
src
tsconfig.json
tslint.json

node_modules 文件夹

-@angular
--animations
--cli
--common
--compiler
--compiler-cli
--core
---@angular
---bundles
---core.d.ts
---core.metadata.json
---package.json
---public_api.d.ts
---README.md
---src
---testing
---testing.d.ts
---testing.metadata.json
--forms
--http
--language-service
--platform-browser
--platform-browser-dynamic
--router
--tsc-wrapped
@ng-bootstrap
@ngtools
-@types
--jasmine
--jasminewd2
--node
--q
--selenium-webdriver

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

【问题讨论】：

这是因为您已将 angular core 安装为全局。 Intellisense 在 node_modules 中找不到它。
角核心在我的node_module中
您在npm install 之前是否在vscode 中打开了一个项目？如果yes 之后您是否尝试重新启动vscode ？
我已经重启了100次
能否尝试使用cli生成一个新项目npm install，然后看看是否有相同的东西？

标签： angular visual-studio-code

【解决方案1】：

我只在导入我自己创建的组件/服务时遇到了这个问题对于像我这样接受的解决方案不起作用的人，可以试试这个：

添加

"baseUrl": "src"

在您的tsconfig.json 中。原因是可视代码 IDE 无法解析基本 url，因此无法解析导入组件的路径并给出错误/警告。

而 Angular 编译器默认将 src 作为 baseurl，因此它能够编译。

注意：

您需要重新启动 VS Code IDE 才能使此更改生效。

编辑：

正如其中一个 cmets 所述，在某些情况下更改工作区版本也可能有效。更多细节在这里：https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

【讨论】：

这对我有用...但现在又出现了一个错误 Build: Class 'Subject' wrongly extends base class 'Observable'
@sam 似乎与此问题无关。也许将它作为一个新问题与您的代码一起发布。
这对我有用。我在 tsconfig.app.json 文件中将 src 添加到 basUrl 中。 "baseUrl": "src",
在 tsconfig.json 文件中添加 "baseUrl":"src" 对我有用。
很好，在 tsconfig 中添加 "baseUrl": "src" 这个并重新启动 IDE 解决了我的问题。

【解决方案2】：

很可能在 Angular 项目中缺少 node_modules 包，运行：

npm install

在 Angular 项目文件夹中。

【讨论】：

到底是什么！从角度开始，这拯救了我的今天
原问题中的目录树包含 node_moduls/@angular/core 文件夹，但可能是空的。
然后重启VSCode
这是在 2020 年完成的。谢谢。
你节省了我的时间。谢谢！。

【解决方案3】：

如果有任何更新或安装或清除缓存，则需要重新启动 Visual Code

【讨论】：

VS 代码在我不知情的情况下更新。重启有帮助。

【解决方案4】：

我的解决方法是运行

npm install

然后卸载，然后在 Visual Studio 中重新加载项目。

【讨论】：

【解决方案5】：

我今天在我的angular 5 应用程序中遇到了这个问题。帮助我的修复很简单。我在tsconfig.json 文件中的compilerOptions 中添加了"moduleResolution": "node"。我完整的tsconfig.json 文件内容如下。

{
  "compileOnSave": false,  
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

moduleResolution 指定模块解析策略。此设置的值可以是node 或classic。你可以阅读更多关于这个here的信息。

【讨论】：

挽救了我的职业生涯！
最佳答案！
和你一起登顶！

【解决方案6】：

从项目文件夹中删除节点模块文件夹。在命令下运行

npm cache clean --force npm install

它应该可以工作。

【讨论】：

谢谢，它有效:)

【解决方案7】：

我遇到了同样的问题，这可能有两个原因-

您的src 基本文件夹可能未声明，要解决此问题，请转到tsconfig.json 并将baseUrl 添加为“src”

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

你可能在 npm 中有问题，要解决这个问题，打开你的命令窗口并运行-npm install

【讨论】：

【解决方案8】：

尝试使用：

npm audit fix --force

然后：

npm install --save @ng-bootstrap/ng-bootstrap

而不是全局保存@ng-bootstrap/ng-bootstrap。

【讨论】：

【解决方案9】：

我遇到了同样的问题。我通过清除位于的 npm 缓存解决了它 “C:\Users\Administrator\AppData\Roaming\npm-cache”

或者你可以简单地运行：

npm cache clean --force

然后关闭 vscode，然后再次打开你的文件夹。

【讨论】：

【解决方案10】：

在 VSCode 状态栏中，它必须显示 typescript 版本 - 像这样

单击该版本号将显示此版本，可用的不同版本。

如果您使用的是 VSCode 版本，那么 切换到 Workspace 版本可以解决问题如果是 VScode 问题而不是您的 tsconfig.json（我已经在使用那个，所以没有突出显示） p>

【讨论】：

谢谢你，我失去了生活的动力......

【解决方案11】：

我尝试了很多人在这里告知的东西，但没有成功。之后，我才意识到我正在使用 Deno Support for VSCode 扩展。我卸载了它，需要重新启动。重启后问题解决了。

【讨论】：

【解决方案12】：

您需要手动安装。

$ npm i @angular/core -s

【讨论】：

【解决方案13】：

我卸载了我已经安装的所有扩展，结果发现来自以下地址的 JavaScript 和 TypeScript IntelliSense 扩展导致了这个问题。 https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

这里的重点是，当您访问该网站时，您会看到一个黄色标签，告诉您它是预览版，但是当您浏览 vs 扩展时，您看不到该标签。

【讨论】：

不幸的是，即使在卸载 all 扩展并重新启动 VS Code 之后，我仍然遇到此问题。 ://
抱歉，我应该对此进行更新。是的，它似乎已经清理干净了，但我不确定我到底记得是怎么回事。但是，我确实做了一些事情：A）完全删除并重新创建了我的解决方案，B）卸载并重新安装了 Angular CLI，C）重新启动了我的机器。希望这可能对某人有所帮助。如果它再次发生，我将尝试更有条理地确定如何修复它，以便我可以报告一个可重复的解决方案。
另一种可能的解决方案是点击状态栏并选择“使用工作区版本”，见github.com/Microsoft/vscode/issues/34681

【解决方案14】：

这个扩展 https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript 导致我在可视化代码中出现错误，我卸载了它，它对我有用

【讨论】：

"此扩展程序现已从 Marketplace 中取消发布。您可以选择将其卸载。"截至 2019 年 11 月 11 日，marketplace.visualstudio.com/… 上提及

【解决方案15】：

对我来说，解决方法是导入整个项目。 2019年遇到这个问题的请检查是否导入了整个项目而不是项目的一部分。

【讨论】：

【解决方案16】：

如果你做了我（愚蠢地）做的事......将一个组件文件夹拖放到我的项目中那么你可能可以通过我所做的修复来解决它它。

解释：基本上，通过某种方式，Angular CLI 必须告诉 InteliJ @angular 是什么意思。如果您只是使用 Angular CLI（即ng g componentName --module=app.module）不将文件放入项目中，那么 Angular CLI 不知道要更新此引用，因此 IntelliJ 不知道它是什么。

方法：触发 Angular CLI 以更新 @angular 的引用。我目前只知道一种方法...

实施：添加一个新组件，与您遇到问题的组件处于同一级别。 ng g tempComponent --module=app.module 这应该会强制 Angular CLI 运行并更新项目中的这些引用。现在只需删除刚刚创建的 tempComponent，不要忘记在 app.module 中删除对它的任何引用。

希望这对其他人有所帮助。

【讨论】：

【解决方案17】：

我有同样的问题，很奇怪，因为项目编译并运行没有错误。我更新了 npm，然后重新安装了软件包

npm update
npm install

然后 vs 代码停止说。

【讨论】：

【解决方案18】：

很可能缺少 npm 包。有时 npm install 并不能解决问题。

我也遇到过同样的问题，我通过删除node_modules 文件夹然后npm install 解决了这个问题

【讨论】：

【解决方案19】：

就我而言，这是导入行的拼写错误。如果手动输入，请检查您是否正确拼写了 @angular/core 部分。

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

【讨论】：

【解决方案20】：

我遇到了同样的问题，因为我正在尝试在 VS 代码中处理 Angular 项目。

解决此问题的解决方案是。

如果项目文件夹中有 node_modules 文件夹，请删除

2.在终端运行以下命令

npm 安装

然后运行 npm 审计修复
然后运行 npm 审计修复 --force

现在问题将得到解决。

【讨论】：

【解决方案21】：

执行以下两个命令为我解决了问题：

npm install -g @angular/cli
ng update --all --force

【讨论】：

发布多个相同的答案至多是"highly frowned upon"，您的答案可能会被删除。就您而言，您在所有答案中也拼错了 Angular。
请在您的代码中添加一些解释，以便其他人可以从中学习

【解决方案22】：

对于 Visual Studio -->

    Seems like you don't have `node_modules` directory in your project folder.
     
    Execute this command where `package.json` file is located:
    
     npm install

【讨论】：

【解决方案23】：

试试这个，它对我有用：

npm i --save @angular/platform-server

然后重新打开 VS 代码

【讨论】：

【解决方案24】：

这对我有用。

 npm install --save-dev @angular-devkit/build-angular

【讨论】：

【解决方案25】：

就我而言，当我将 vs 项目升级到 angular 10 时，我遇到了这个错误。

当我删除 tsconfig.json 并将 tsconfig.base.json 重命名为 tsconfig 时，Angular cli 会创建 tsconfig.json、tsconfig.base.json 和 tsconfig.app.json。 ts 一切都会好的。您还必须将 tsconfig.app.json 内的扩展更改为 tsconfig.json

【讨论】：

【解决方案26】：

Sublime Text 也有同样的问题。

我想出了以下解决方案：我刚刚编辑过

tsconfig.json

在 Angular 工作区的根目录中包含我新创建的应用程序。

 {
  "files": [],
  "references": [
    {
      "path": "./projects/client/tsconfig.app.json"
    },
    {
      "path": "./projects/client/tsconfig.spec.json"
    },
    {
      "path": "./projects/vehicle-market/tsconfig.app.json"
    },
    {
      "path": "./projects/vehicle-market/tsconfig.spec.json"
    },
    {
      "path": "./projects/mobile-de-lib/tsconfig.lib.json"
    },
    {
      "path": "./projects/mobile-de-lib/tsconfig.spec.json"
    }
  ]
    }

【讨论】：

【解决方案27】：

在 Visual Studio Code 中克隆或打开现有项目时发生。在集成终端中运行命令npm install

【讨论】：

这已经被多次给出。您想添加什么新内容？

【解决方案28】：

我遇到过这个问题，通过下面的命令解决了。

npm cache clean --force
npm i @angular/core -s

然后不要忘记重新启动您的 VS 代码。它必须被修复。

【讨论】：

【解决方案29】：

运行

npm install

它适用于大多数情况

【讨论】：

这是不正确的。问题表明它正在正确编译，问题在于 VSCode，而不是编译
我的项目正在正确编译并运行，问题出在VSCode中，而不是编译，npm install刚刚修复它。

【解决方案30】：

您需要做的就是在您的项目中包含nodes_modules 文件夹。当您通过 git 命令行从 github 克隆任何项目时，您可能会遇到此问题。

【讨论】：

可能不是这种情况，因为当您在站点根目录中包含 package.json 文件的文件夹中运行 npm install 时，会自动为您创建包含所需模块的文件夹。
是的。如果运行 nmp install 那么它将通过检查 package.json 文件下载必要的包..
你应该提到他们应该运行npm install。否则，你的回答根本没有帮助。