Question

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

我可以编译项目并且它工作正常，但我总是在vs代码告诉我时出错找不到'@ angular / core'模块找不到'@ angular / router'模块找不到模块.....

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

这是我的环境规范：

@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

os：Microsoft vs 10 enterprise

项目根文件夹

.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_module文件夹

-@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"
    ]
  }
}

Answer 1

仅在导入我自己创建的组件/服务时才遇到此问题对于那些喜欢我的人，对于那些被接受的解决方案不起作用的人，可以试试这个：

添加

"baseUrl": "src"

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

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

注意：

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

修改

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

Answer 2

在角度项目中最有可能丢失的node_modules包，运行：

npm install

在角度项目文件夹中。

Answer 3

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

Answer 4

我的修复是运行

npm install

然后卸载，然后在visual studio中重新加载项目。

Answer 5

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

npm cache clean --force npm install

应该可以。

Answer 6

尝试使用：

npm audit fix --force

然后：

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

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

Answer 7

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

可能未声明您的src基本文件夹，要解决此问题，请转到tsconfig.json并将基本URL添加为“ 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

Answer 8

我有同样的问题。我通过清除npm缓存来解决它 “ C：\ Users \ Administrator \ AppData \ Roaming \ npm-cache”

或者您可以简单地运行：

npm cache clean --force

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

Answer 9

我今天在angular 5应用程序中遇到了这个问题。而且对我有帮助的修复很简单。我在"moduleResolution": "node"文件的compilerOptions中添加了tsconfig.json。我完整的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。

Answer 10

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

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

Answer 11

我尝试了很多家伙在这里告知的内容，但没有成功。之后，我才意识到我正在使用Deno支持VSCode扩展。我将其卸载，需要重新启动。重新启动后，问题得以解决。

Answer 12

您需要手动安装。

$ npm i @angular/core -s

Answer 13

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

说明：基本上，Angualar 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 中删除对其的任何引用。

希望这可以帮助其他人。

Answer 14

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

npm update
npm install

然后，vs代码停止这么说。

Answer 15

以我为例，当我将vs项目升级到angular 10时，出现了此错误。

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

Answer 16

这对我有用。

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

Answer 17

我遇到了这个问题，并通过以下命令修复了它。

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

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

Answer 18

我在使用 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"
    }
  ]
    }

Answer 19

尝试一下，它对我有用：

npm i --save @angular/platform-server

然后重新打开VS代码

Answer 20

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

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

如果您使用的是VSCode版本，那么切换到工作区版本可以解决问题，如果是VScode问题而不是您的tsconfig.json（我已经在使用该代码了，所以不突出显示）

Answer 21

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

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

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

2.在终端运行以下命令

npm 安装

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

现在问题将得到解决。

Answer 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

Answer 23

很可能缺少npm软件包。有时npm install无法解决问题。

我也遇到了同样的问题，我先删除了node_modules文件夹，然后删除了npm install

，从而解决了这个问题

Answer 24

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

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

Answer 25

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

Answer 26

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

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

Answer 27

我如下解决了这个问题：

在您的项目中打开Visual Studio代码。
终端->新终端。
写npm install。

Answer 28

此扩展名https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript导致了我的视觉代码错误，我将其卸载了，并且对我有用

Answer 29

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

Answer 30

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

Answer 31

我在这个问题上停留了几个小时，我所做的只是重新启动VS Code，问题消失了。

Answer 32

面对同样的问题。我重新启动了Visual Code Editor，它解决了我的问题。

Answer 33

运行

npm install

在大多数情况下都可以使用

Answer 34

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

检出nvm @：Their official windows repo. There is also a MAC and Linux version.

Answer 35

如果出现此类错误，请使用以下命令：

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

安装此工具后还会显示错误，只需删除几个单词，然后再次添加该单词即可。

vs代码找不到模块'@angular / core'或任何其他模块

35 个答案: