vs code не может найти модуль '@ angular / core' или любые другие модули

87

мой проект был создан с помощью [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

ОС: Microsoft против 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_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"
    ]
  }
}
Сыпь
источник
2
Это потому, что вы установили angular core как global. Intellisense не может найти его в node_modules.
Prajwal
angular core находится в моем node_module
Араш
25
Вы открывали проект vscodeраньше вас npm install? Если после этого yesпопытаться перезапустить vscode?
kuncevic.dev
6
я перезагружался 100 раз
Араш
Можете ли вы попробовать создать новый проект с помощью cli, npm installа затем посмотреть, есть ли то же самое с этим?
kuncevic.dev

Ответы:

115

Я столкнулся с этой проблемой только при импорте моих собственных созданных компонентов / сервисов. Те из вас, как я, для кого принятое решение не сработало, могут попробовать следующее:

Добавить

"baseUrl": "src"

в твоем tsconfig.json . Причина в том, что IDE визуального кода не может определить базовый URL-адрес, поэтому не может определить путь к импортированным компонентам и выдает ошибку / предупреждение.

В то время как компилятор angular srcпо умолчанию принимает baseurl, поэтому он может компилироваться.

НОТА:

Вам необходимо перезапустить VS Code IDE, чтобы это изменение вступило в силу.

РЕДАКТИРОВАТЬ:

Как упоминалось в одном из комментариев, в некоторых случаях изменение версии рабочей области также может работать. Подробнее здесь: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

пытаюсь выучить
источник
это сработало для меня ... но теперь появляется еще одна ошибка Build: Class 'Subject <T>' неправильно расширяет базовый класс 'Observable <T>'
sam
@sam, который, похоже, не связан с этой проблемой. Возможно, разместите его как новый вопрос вместе с вашим кодом.
tryToLearn
2
Это сработало для меня. Я добавил src в basUrl в файле tsconfig.app.json. "baseUrl": "src",
howserss
1
Добавление «baseUrl»: «src» в файл tsconfig.json сработало для меня.
Чаму
1
Хорошо, добавив "baseUrl": "src" в tsconfig и перезапустив IDE, чтобы решить мою проблему.
Gauttam Jada
74

Скорее всего, в проекте angular отсутствует пакет node_modules, запустите:

npm install

внутри папки проекта angular.

Стефан Митич
источник
2
что на земле! начиная с angular это спасло меня сегодня
M-sAnNan
Дерево каталогов в исходном вопросе содержало папку node_moduls / @ angular / core, но, возможно, она была пустой.
eckes
3
затем перезапустите VSCode
андрейкашин
Так получилось в 2020 году. Спасибо.
Акито
36

При обновлении, установке или очистке кеша требуется перезапуск Visual Code.

vbrgr
источник
Код VS обновился без моего ведома. Помог перезагрузка.
nikoalset
18

исправление для меня было запустить

npm install

а затем выгрузите, а затем перезагрузите проект в Visual Studio.

jbooker
источник
14

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. Вы можете прочитать об этом здесь .

Сибиш Вену
источник
спас мою карьеру!
null
Лучший ответ!
Хосе Нето,
6

Удалите папку Node Modules из папки проекта. Выполните команду ниже.

npm cache clean --force npm install

Он должен работать.

Крути
источник
5

Попробуйте использовать:

npm audit fix --force

а потом:

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

вместо сохранения @ng-bootstrap/ng-bootstrapглобально.

theChosenOne.Duh
источник
5

У меня такая же проблема. Я решил это, очистив кеш npm, который находится в "C: \ Users \ Administrator \ AppData \ Roaming \ npm-cache"

Или вы можете просто запустить:

npm cache clean --force

а затем закройте vscode, а затем снова откройте свою папку.

waqas.sidd
источник
3

Я столкнулся с той же проблемой, для этого могло быть две причины -

  1. Возможно, ваша базовая папка 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
  }
}
  1. у вас может быть проблема в npm. Чтобы решить эту проблему, откройте командное окно и запустите -npm install
Сандеш Тайде
источник
2

Я удалил все расширения, которые я уже установил, и оказалось, что расширение JavaScript и TypeScript IntelliSense по адресу ниже вызывало проблему. https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

Дело здесь в том, что когда вы посещаете веб-сайт, вы видите желтый ярлык, говорящий вам, что он находится в предварительной версии, но когда вы просматриваете vs extension, вы не видите этот ярлык.

Сыпь
источник
К сожалению, у меня все еще есть эта проблема, даже после удаления всех расширений и перезапуска VS Code. : /
Джонатан
1
Извините, я должен был сообщить обновленную информацию по этому поводу. Да, вроде прояснилось, но я не уверен, что точно помню, как. Тем не менее, некоторые вещи, которые я определенно сделал: A) полностью удалил и воссоздал свое решение, B) удалил и повторно установил Angular CLI, C) перезагрузил мою машину. Надеюсь, это может кому-то помочь. Если это произойдет снова, я постараюсь быть более методичным в определении того, как я это исправлю, чтобы я мог сообщить о повторяемом решении.
Джонатан
1
Другое возможное решение - щелкнуть строку состояния и выбрать «Использовать версию рабочей области», см. Github.com/Microsoft/vscode/issues/34681
Луис Кантеро,
2

Я пробовал многое из того, что рассказали здесь ребята, но безуспешно. После этого я просто понял, что использую расширение Deno Support for VSCode. Я удалил его, и потребовалась перезагрузка. После перезагрузки проблема решилась.

Джетер Коста и Силва
источник
1

это расширение https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript вызывало у меня ошибку в визуальном коде, я удалил его, и он работает для меня

Матео Ринкон
источник
«Это расширение не публикуется в Marketplace. Вы можете удалить его». по состоянию на 11 ноября 2019 г. упоминается на marketplace.visualstudio.com/…
RajKon
1

В моем случае это было неправильное написание строки импорта. Убедитесь, что вы правильно написали часть @ angular / core, если набираете ее вручную.

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

Адамантус
источник
1

Для меня решением было импортировать весь проект. Тем, у кого возникла эта проблема в 2019 году, проверьте, импортировали ли вы весь проект, а не его часть.

Мастер RSL
источник
1

Если бы вы сделали то, что сделал я (по глупости) ... То есть перетащили папку компонентов в мой проект то вы, вероятно, сможете решить эту проблему, сделав то же, что и я.

Объяснение : По сути, Angualar CLI каким-то @angularобразом должен сообщать InteliJ, что это значит. Если вы просто вставляете файл в свой проект без использования 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. .

Надеюсь, это поможет кому-то другому.

Трипп Каннелла
источник
1

У меня была такая же проблема, это было странно, потому что проект скомпилировался и работал без ошибок. Я обновил npm, а затем переустановил пакеты

npm update
npm install

тогда vs code перестань это говорить.

Сантьяго Серон
источник
1

Вам нужно установить его вручную.

$ npm i @angular/core -s
Прити
источник
0

Все, что вам нужно сделать, это включить в свой проект папку «nodes_modules». Вы можете столкнуться с этой проблемой при клонировании любого проекта из github через командную строку git.

Ананд
источник
Вероятно, это не так, поскольку при запуске npm install в корне вашего сайта в папке, содержащей ваш файл package.json, эта папка автоматически создается для вас с необходимыми модулями.
Кинан Стюарт
ага. если запустить nmp install, он загрузит необходимый пакет, проверив файл package.json ..
Ананд
0

Происходит при клонировании или открытии существующих проектов в Visual Studio Code. Во встроенном терминале запустите команду npm install

Paras Rawat
источник
1
Это уже давалось несколько раз. Хотите добавить что-нибудь новое?
Нико Хаасе
0

Я решил эту проблему следующим образом:

  1. Откройте код Visual Studio с вашим проектом.
  2. Терминал -> Новый терминал.
  3. Напишите npm install.
Мохамад Альхамид
источник
1
Уже есть как минимум 2 разных ответа с надписью «беги npm install»
barbsan
0

Выполнение следующих двух команд решает проблему для меня:

npm install -g @angular/cli
ng update --all --force
АбдусСалам
источник
1
Публикация нескольких идентичных ответов в лучшем случае «не одобряется», и ваши ответы могут быть удалены. В вашем случае вы также неправильно написали Angular во всех ответах.
Дэвид Бак
Пожалуйста, добавьте пояснения к своему коду, чтобы другие могли извлечь из него уроки
Нико Хаасе,
0

Скорее всего отсутствует пакет npm. А иногда установка npm не решает проблему.

Я столкнулся с тем же, и я решил эту проблему, удалив node_modulesпапку, а затемnpm install

Кази
источник
0

для 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 
Йодхрадж Патил
источник
0

В строке состояния VSCode должна отображаться версия машинописного текста - вот так введите описание изображения здесь

Нажав на этот номер версии, вы увидите, что доступны разные версии. введите описание изображения здесь

Если вы используете версию VSCode, переключение на версию Workspace решает проблему, если это проблема VScode, а не ваш tsconfig.json (я уже использую его, поэтому не выделен) введите описание изображения здесь

Санкет Сардесай
источник
0

Попробуйте это, у меня это сработало:

npm i --save @angular/platform-server  

Затем снова откройте код VS

VEEZ
источник
-1

Беги

npm install 

это будет работать в большинстве случаев

ВинК
источник
Это неверно. В вопросах говорится, что он компилируется правильно, и проблема связана с VSCode, а не с компиляцией
ManavM
1
Мой проект правильно компилировался и работал, и проблема была в VSCode, а не в компиляции, и npm install просто исправил ее.
Treer
-3

С моей точки зрения, используемый вами интерфейс командной строки и библиотеки не соответствуют друг другу. Ionic CLI версии 1 не может создавать библиотеки для ionic CLI версии 4. Лучшее решение - попробовать обновить версию CLI. В противном случае вы можете использовать nvm, который позволяет запускать несколько версий узлов в одной ОС. Это может помочь вам использовать разные версии ionic CLI в разных проектах в зависимости от требований.

Проверьте nvm @: Их официальное хранилище Windows. Также есть версия для MAC и Linux.

Сиунду254
источник
-5

Если мы получим такую ​​ошибку, просто воспользуйтесь командой:

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

После установки это также показывает ошибку, просто удалите несколько слов, а затем снова добавьте это слово, которое работает.

прашант
источник
1
В исходном package.json они уже были установлены. Что означает «убрать несколько слов»?
eckes