VSCODE kan geen module ‘@ hoek / kern’ of andere modules

Mijn project werd gegenereerd met hoekige CLI-versie 1.2.6.

Ik kan het project compileren en het werkt prima, maar ik krijg altijd fouten in VSCODE die mij vertelt:

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

Ik heb inhoud van mijn tsconfig.json-bestand bijgevoegd
Dit is echt frustrerend voor mij, uitgaven 2 uur om erachter te komen wat er mis is,
Ik heb ook de VSCODE verwijderd en opnieuw geïnstalleerd
het werkt niet.

Hier is mijn omgevingspecificatie:

@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

Project root map

.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_modulesMAP

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

Antwoord 1, autoriteit 100%

Ik ondervond dit probleem alleen tijdens het importeren van mijn eigen gemaakte componenten/services
Voor degenen onder jullie zoals ik, voor wie de geaccepteerde oplossing niet werkte, kunnen dit proberen:

Toevoegen

"baseUrl": "src"

in uw tsconfig.json. De reden is dat visuele code IDE de basis-URL niet kan oplossen, dus het pad naar geïmporteerde componenten niet kan oplossen en een fout/waarschuwing geeft.

Terwijl hoekige compiler standaard srcals baseurl gebruikt, zodat het kan compileren.

OPMERKING:

U moet VS Code IDE opnieuw opstarten om deze wijziging door te voeren.

BEWERKEN:

Zoals vermeld in een van de opmerkingen, kan het in sommige gevallen ook werken om de versie van de werkruimte te wijzigen. Meer details hier: https://github.com/Microsoft/vscode/issues/34681 #issuecomment-331306869

Antwoord 2, autoriteit 67%

Hoogstwaarschijnlijk ontbrekend pakket node_modulesin het hoekproject, voer uit:

npm install

in de hoekige projectmap.

3, Autoriteit 33%

Visual Code Restart is nodig als een update of het installeren of wissen van cache

4, Autoriteit 17%

De oplossing voor mij was om

te draaien

npm install

En vervolgens lossen, herlaad het project in Visual Studio.

5, Autoriteit 5%

Ik was tegenover hetzelfde probleem, er kunnen twee redenen voor zijn –

1. Uw srcBASE-map is mogelijk niet gedeclareerd om dit te laten gaan naar tsconfig.jsonen voeg de baseUrltoe als “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. U kunt een probleem hebben in NPM, om dit op te lossen, opent u uw opdrachtvenster en uitgevoerd – npm install

6, Autoriteit 4%

Probeer het gebruik van:

npm audit fix --force

en dan:

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

In plaats van @ng-bootstrap/ng-bootstrapwereldwijd op te slaan.

7, Autoriteit 4%

Ik had hetzelfde probleem. Ik heb het opgelost door de NPM-cache te wissen die is
“C: \ gebruikers \ beheerder \ appdata \ roaming \ npm-cache”

of u kunt eenvoudig uitvoeren:

npm cache clean --force

en sluit vervolgens VSCODE en open vervolgens opnieuw uw map.

8

Ik probeerde veel dingen die de jongens hier hebben geïnformeerd, zonder succes. Daarna realiseerde ik me net dat ik de Deno-ondersteuning gebruikte voor VSCODE-extensie. Ik heb het verwijderd en een herstart was vereist. Na het opnieuw opstarten werd het probleem opgelost.

9

U moet deze handmatig installeren.

$ npm i @angular/core -s

10

In de VSCODE-statusbalk moet het typescript-versie laten zien – zoals deze

Als u op dat versienummer klikt, ziet u dit, verschillende versies beschikbaar.

Als u de VSCode-versie gebruikt, overschakelen naar de Workspace-versie lost het probleem opals het een VScode-probleem is in plaats van uw tsconfig.json(die gebruik ik al , dus niet gemarkeerd)

Antwoord 11

Ik heb alle extensies verwijderd die ik al had geïnstalleerd, en het blijkt dat de JavaScript- en TypeScript IntelliSense-extensie van het onderstaande adres het probleem heeft veroorzaakt.
https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript- typoscript

het punt hier is dat wanneer je de website bezoekt, je ziet dat er een geel label is, dat aangeeft dat het in de preview-versie is, maar wanneer je naar extensies bladert, zie je dat label niet.

Antwoord 12

deze extensie https://marketplace.visualstudio.com/items?itemName =sourcegraph.javascript-typescriptveroorzaakte de fout in visuele code, ik heb het verwijderd en het werkt voor mij

Antwoord 13

De oplossing voor mij was om het hele project te importeren. Voor degenen die dit probleem hebben in 2019, controleer of je het hele project hebt geïmporteerd en geen onderdeel van het project.

Antwoord 14

Als je deed wat ik (dwaas) deed… Dat was een componentmap naar mijn project slepen en neerzetten, dan kun je het waarschijnlijk oplossen door te doen wat ik deed om het te repareren het.

Uitleg: In principe moet Angualar CLI InteliJ op de een of andere manier vertellen wat @angularbetekent. Als u het bestand gewoon in uw project plop zonderde Angular CLI te gebruiken, dwz ng g componentName --module=app.module, dan weet Angular CLI niet om deze referentie bij te werken dus IntelliJ heeft geen idee wat het is.

Aanpak: activeer de Angular CLI om referenties van @angularbij te werken. Ik weet momenteel maar één manier om dit te doen…

Implementatie: Voeg een nieuwe component toeop hetzelfde niveau als de component waarmee u problemen ondervindt. ng g tempComponent --module=app.module
Dit zou de Angular CLI moeten dwingen om deze verwijzingen in het project uit te voeren en bij te werken.
Nu gewoon verwijder de tempComponentdie je zojuist hebt gemaakt en vergeet niet om alle verwijzingen ernaar in app.modulete verwijderen.

Ik hoop dat dit iemand anders helpt.

Antwoord 15

Ik had hetzelfde probleem, was vreemd omdat het project zonder fouten werd gecompileerd en uitgevoerd.
Ik heb npm bijgewerkt en de pakketten opnieuw geïnstalleerd

npm update
npm install

dan vs code stop dat te zeggen.

Antwoord 16

In mijn geval was het een spelfout van de importregel. Controleer of u het gedeelte @angular/corecorrect hebt gespeld als u het handmatig typt.

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

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

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

npm i --save @angular/platform-server  

npm install --save-dev @angular-devkit/build-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"
    }
  ]
    }

npm install