VSCode 无法找到模块“@angle/core”或任何其他模块

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

我可以编译这个项目，它工作的很好，但我总是得到错误的 VSCode 告诉我:

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

screenshot screenshot

我已经附上我的 tsconfig.json文件的内容 这真的让我很沮丧，花了两个小时来找出问题所在, 我还卸载并重新安装了 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

操作系统: 微软 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

返回文章页面

{
"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"
]
}
}
329632 次浏览
小开
最佳答案

我卸载了所有我已经安装的扩展，结果发现 JavaScript 和 TypeScriptIntelliSense 扩展从下面的地址导致了这个问题。 Https://marketplace.visualstudio.com/items?itemname=sourcegraph.javascript-typescript

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

小开

我只是在导入自己创建的组件/服务时才面临这个问题 对于那些像我一样，接受的解决方案并不奏效的人，可以尝试这样做:

加

"baseUrl": "src"

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

而角度编译器默认采用 src作为 baseurl，因此它可以编译。

注意:

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

编辑:

正如其中一条评论中提到的，在某些情况下，更改工作区版本也可能有效

小开

所有您需要做的是，您必须包括 nodes_modules文件夹在您的项目。当您通过 git 命令行从 github 克隆任何项目时，可能会面临这个问题。

小开

对我来说，解决办法就是逃跑

npm install

然后卸载，然后重新加载在视觉工作室的项目。

小开

如果我们得到这种类型的错误，只需使用命令:

 npm i @anglar/core,
npm i @angular/common,
npm i @angular/http,
npm i @angular/router

安装后，这也显示错误只是删除几个字，然后再添加该字的工作。

小开

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

小开

我今天在 angular 5应用程序中遇到了这个问题。帮助我的方法很简单。我在 tsconfig.json文件中将 "moduleResolution": "node"添加到 compilerOptions。我完整的 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。你可以阅读更多关于这个 给你。

小开

最有可能缺少的 node_modules软件包的角度项目，运行:

npm install

在有棱角的项目文件夹内。

小开

从我的角度来看，您正在使用的 CLI 和库是不匹配的。离子 CLI 版本1不能为离子 CLI 版本4构建库。最好的解决方案是尝试升级 CLI 版本。否则，您可以使用 nvm，它允许您在同一操作系统上运行多个节点版本。这可以帮助您根据需求在不同的项目中使用不同的离子 CLI 版本。

看看 nvm@: 他们的官方 Windows 回购，也有一个 MAC 和 Linux 版本。

小开

如果需要更新、安装或清除缓存，则需要重新启动 VisualCode

小开

尝试使用:

npm audit fix --force

然后:

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

而不是在全球范围内保存 @ng-bootstrap/ng-bootstrap。

小开

我也遇到了同样的问题，我通过清除 npm 缓存解决了这个问题 “ C: 用户管理员 AppData 漫游 npm-cache”

或者你可以简单地跑:

npm cache clean --force

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

小开

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

小开

快跑

npm install

大多数情况下都会奏效

小开

我解决这个问题的方法如下:

  1. 使用项目打开 VisualStudio 代码。
  2. 终端机-> 新终端机。
  3. 写 npm install。
小开

对我来说，这是进口生产线的拼写错误。如果手动输入，请检查 @angular/core部分的拼写是否正确。

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

小开

对我来说，解决办法是导入整个项目。对于那些谁有这个问题在2019年请检查，如果你已经导入了整个项目，而不是项目的一部分。

小开

如果你做了我(愚蠢地)所做的... 那就是 将组件文件夹拖放到项目中，那么你可能能够通过做我所做的来解决它。

解释 : 基本上，通过某种方式，Angualar CLI 必须告诉 InteliJ @angular是什么意思。如果你只是把文件放在你的项目 没有使用角度 CLI 即 ng g componentName --module=app.module，然后角度 CLI 不知道更新这个引用，所以 IntelliJ 不知道它是什么。

方法 : 触发角度 CLI 来更新 @angular的引用。目前我只知道一种方法来做到这一点..。

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

希望这能帮到别人。

小开

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

npm update
npm install

那么 VS 代码，不要再说了。

小开

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

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

我试了很多他们告诉我的东西，都没有成功。之后，我才意识到我正在使用对 VSCode 扩展的 Deno 支持。我卸载了它，需要重新启动。重新启动后，问题就解决了。

小开

从项目文件夹中删除节点模块文件夹

npm cache clean --force npm install

应该可以。

小开

您需要手动安装它。

$ npm i @angular/core -s
小开

最有可能的是 npm 包丢失了。有时候 npm 安装并不能解决问题。

我也遇到过同样的问题，我已经通过删除 node_modules文件夹和 npm install来解决这个问题

小开

视觉工作室->

    Seems like you don't have `node_modules` directory in your project folder.
     

Execute this command where `package.json` file is located:
    

npm install
小开

我面临着同样的问题，可能有两个原因-

  1. 您的 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
}
}
  1. 您可能在 npm 中遇到问题，要解决这个问题，请打开命令窗口并运行 -npm install
小开

在 VSCode 状态栏中，它必须显示类型脚本版本，如下所示

enter image description here

点击那个版本号会显示这个，不同的版本可用。

enter image description here

如果您正在使用的 VSCode 版本，然后 切换到工作区版本解决了这个问题，如果它是 VScode 问题，而不是您的 tsconfig.json(我已经使用这一个，所以没有突出显示)

enter image description here

小开

试试这个，对我很管用:

npm i --save @angular/platform-server

然后重新打开 VS 代码

小开

这招对我很管用。

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

在我的例子中，当我将项目升级到角度10时，我出现了这个错误。

角点创建 tsconfig.json，tsconfig.base.json和 tsconfig.app.json时，我删除 Tsconfig.json和重命名为 Tsconfig.base.json到 Tsconfig.ts一切都将 OK。 您还必须将 Json内部的扩展更改为 < strong > tsconfig.json

小开

我对《崇高文本》也有同样的问题。

我想出了以下解决方案: 我只是编辑

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"
}
]
}
小开

我也面临着同样的问题, 当我试图在 VS 代码的角度项目工作。

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

  1. 如果您的项目文件夹中有 node _ module 文件夹，请删除该文件夹

在终端运行以下命令

Npm 安装

  1. 那就快跑 Npm 审计修复程序

  2. 那就快跑 Npm 审核修复程序——强制

现在问题解决了。

小开

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

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

然后不要忘记重新启动你的 VS 代码。它必须是固定的。

小开

从源代码控件(如 GIT)下载/复制代码时也会发生这种情况。将节点模块推送到源代码管理。Gitignore 文件，并且您需要在第一次从回购中获得工件时运行 npm install。


提交答案