vs code ne peut pas trouver le module '@ angular / core' ou tout autre module

mon projet a été généré avec [Angular CLI] version 1.2.6.

Je peux compiler le projet et cela fonctionne bien, mais j'obtiens toujours une erreur dans le code vs me disant que je ne trouve pas le module '@ angular / core' ne peut pas trouver le module '@ angular / router' ne peut pas trouver le module .....

J'ai joint le contenu de mon fichier tsconfig.json, cela a été vraiment frustrant pour moi, passant 2 heures à comprendre ce qui ne va pas, j'ai également désinstallé et réinstallé le code vs cela ne fonctionne pas.

voici mes spécifications d'environnement:

@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 contre 10 entreprise

dossier racine du projet

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

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

Je faisais face à ce problème uniquement lors de l'importation de mes propres composants / services créés.Pour ceux d'entre vous comme moi, pour qui la solution acceptée ne fonctionnait pas, peuvent essayer ceci:

Ajouter

"baseUrl": "src"

dans votre tsconfig.json. La raison en est que l'IDE de code visuel est incapable de résoudre l'URL de base, il est donc incapable de résoudre le chemin d'accès aux composants importés et donne une erreur / un avertissement.

Alors que le compilateur angulaire prend srccomme baseurl par défaut, il est donc capable de compiler.

REMARQUE:

Vous devez redémarrer VS Code IDE pour que cette modification entre en vigueur.

ÉDITER:

Comme mentionné dans l'un des commentaires, dans certains cas, la modification de la version de l'espace de travail peut également fonctionner. Plus de détails ici: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

Package node_modules probablement manquant dans le projet angular, exécutez:

npm install

dans le dossier de projet angulaire.

Le redémarrage de Visual Code est nécessaire en cas de mise à jour ou d'installation ou d'effacement du cache

le correctif pour moi était de courir

npm install

puis déchargez, puis rechargez le projet dans Visual Studio.

J'étais confronté à ce problème dans ma angular 5candidature aujourd'hui. Et la solution qui m'a aidé était simple. J'ai ajouté "moduleResolution": "node"à compilerOptionsdans le tsconfig.jsonfichier. Le tsconfig.jsoncontenu complet de mon fichier est ci-dessous.

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

La moduleResolutionstratégie de résolution de module de spécification. La valeur de ces paramètres peut être nodeou classic. Vous pouvez en savoir plus ici .

Supprimer le dossier Modules de nœuds du dossier de projet Exécutez la commande ci-dessous

npm cache clean --force npm install

Ça devrait marcher.

Essayez d'utiliser:

npm audit fix --force

puis:

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

au lieu d'économiser @ng-bootstrap/ng-bootstrapglobalement.

J'ai eu le même problème. Je l'ai résolu en effaçant le cache npm qui se trouve dans "C: \ Users \ Administrator \ AppData \ Roaming \ npm-cache"

Ou vous pouvez simplement exécuter:

npm cache clean --force

puis fermez vscode, puis ouvrez à nouveau votre dossier.

J'étais confronté au même problème, il pourrait y avoir deux raisons à cela -

1. Votre dossier de base src n'a peut-être pas été déclaré, pour résoudre ce problème, accédez à tsconfig.json et ajoutez l'URL de base en tant que "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
  }
}

2. vous pourriez avoir un problème dans npm, pour résoudre cela, ouvrez votre fenêtre de commande et exécutez-npm install

J'ai désinstallé toutes les extensions que j'avais déjà installées, et il s'avère que JavaScript et l'extension TypeScript IntelliSense de l'adresse ci-dessous ont causé le problème. https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

le point ici est que lorsque vous visitez le site Web que vous voyez, il y a une étiquette jaune, vous indiquant qu'il est en version préliminaire, mais lorsque vous naviguez dans vs extensions, vous ne voyez pas cette étiquette.

J'ai essayé beaucoup de trucs que les gars ont informés ici, sans succès. Après, je viens de réaliser que j'utilisais l'extension Deno Support for VSCode. Je l'ai désinstallé et un redémarrage était nécessaire. Après le redémarrage, le problème a été résolu.

cette extension https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript me causait l'erreur dans le code visuel, je l'ai désinstallée et cela fonctionne pour moi

Dans mon cas, c'était une faute d'orthographe de la ligne d'importation. Vérifiez que vous avez correctement orthographié la partie @ angular / core si vous la saisissez manuellement.

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

Le correctif pour moi était d'importer le projet entier. Pour ceux qui ont ce problème en 2019, veuillez vérifier si vous avez importé l'intégralité du projet ne faisant pas partie du projet.

Si vous avez fait ce que j'ai (bêtement) fait ... qui était de glisser-déposer un dossier de composants dans mon projet, vous serez probablement en mesure de le résoudre en faisant ce que j'ai fait pour le réparer.

Explication : Fondamentalement, Angualar CLI doit dire à InteliJ ce que cela @angularsignifie. Si vous placez simplement le fichier dans votre projet sans utiliser la CLI angulaire, c'est-à-dire que la CLI ng g componentName --module=app.moduleAngular ne sait pas mettre à jour cette référence, donc IntelliJ n'a aucune idée de ce que c'est.

Approche : déclenchez la CLI angulaire pour mettre à jour les références de @angular. Je ne connais actuellement qu'une seule façon de faire cela ...

Implémentation : ajoutez un nouveau composant au même niveau que le composant avec lequel vous rencontrez des problèmes.ng g tempComponent --module=app.module Cela devrait forcer Angular CLI à exécuter et à mettre à jour ces références dans le projet. Maintenant, supprimez simplement le tempComponent que vous venez de créer et n'oubliez pas de supprimer toute référence à celui-ci dans app.module .

J'espère que cela aide quelqu'un d'autre.

J'ai eu le même problème, c'était étrange parce que le projet compilé et fonctionnait sans erreurs. J'ai mis à jour npm puis réinstallé les packages

npm update
npm install

alors vs code arrêtez de dire ça.

Vous devez l'installer manuellement.

$ npm i @angular/core -s

Tout ce que vous avez à faire est d'inclure le dossier "nodes_modules" dans votre projet. Vous pouvez être confronté à ce problème lorsque vous clonez un projet à partir de github via la ligne de commande git.

Se produit lors du clonage ou de l'ouverture de projets existants dans Visual Studio Code. Dans le terminal intégré, exécutez la commande npm install

J'ai résolu ce problème comme suit:

1. Ouvrez le code Visual Studio avec votre projet.
2. Terminal -> Nouveau terminal.
3. Écrivez npm install.

L'exécution des deux commandes suivantes résout le problème pour moi:

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

Le package npm est probablement manquant. Et parfois, l'installation de npm ne résout pas le problème.

J'ai fait face à la même chose et j'ai résolu ce problème en supprimant le node_modulesdossier, puisnpm install

pour 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 

Dans la barre d'état VSCode, il doit afficher la version dactylographiée - comme ceci

Cliquer sur ce numéro de version vous montrera ceci, différentes versions disponibles.

Si vous utilisez la version VSCode, le passage à la version Workspace résout le problème s'il s'agit d'un problème VScode plutôt que de votre tsconfig.json (j'utilise déjà celui-là, donc pas mis en évidence)

Essayez ceci, cela a fonctionné pour moi:

npm i --save @angular/platform-server  

Puis rouvrez le code VS

Courez

npm install 

cela fonctionnera la plupart des cas

De mon point de vue, la CLI que vous utilisez et les bibliothèques ne correspondent pas. La version 1 de l'interface de ligne de commande ionique ne peut pas créer de bibliothèques pour la version 4 de l'interface de ligne de commande ionique. La meilleure solution consiste à essayer de mettre à niveau votre version de l'interface de ligne de commande. Sinon, vous pouvez utiliser nvm qui vous permet d'exécuter plusieurs versions de nœuds sur le même système d'exploitation. Cela peut vous aider à utiliser différentes versions de CLI ionique dans différents projets en fonction des exigences.

Découvrez nvm @: leur repo Windows officiel. Il existe également une version MAC et Linux.

Si nous obtenons ce type d'erreur, utilisez simplement la commande:

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

Après avoir installé cette erreur, supprimez simplement quelques mots, puis ajoutez à nouveau ce mot.