vs code nie może znaleźć modułu „@ angular / core” ani żadnych innych modułów

mój projekt został wygenerowany za pomocą [Angular CLI] w wersji 1.2.6.

Mogę skompilować projekt i działa dobrze, ale zawsze otrzymuję błąd w kodzie vs, który mówi mi, że nie mogę znaleźć modułu „@ angular / core”, nie można znaleźć modułu „@ angular / router”, nie można znaleźć modułu .....

Załączam zawartość mojego pliku tsconfig.json, co było dla mnie naprawdę frustrujące, spędziłem 2 godziny, aby dowiedzieć się, co jest nie tak, również odinstalowałem i ponownie zainstalowałem kod VS, który nie działa.

oto moja specyfikacja środowiska:

@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

system operacyjny: Microsoft kontra 10 Enterprise

folder główny projektu

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

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

Z tym problemem miałem do czynienia tylko podczas importowania własnych stworzonych komponentów / usług.Dla tych z Was takich jak ja, dla których przyjęte rozwiązanie nie zadziałało, mogą wypróbować:

Dodaj

"baseUrl": "src"

w Twoim tsconfig.json . Powodem jest to, że IDE kodu wizualnego nie jest w stanie rozpoznać podstawowego adresu URL, więc nie może znaleźć ścieżki do importowanych komponentów i wyświetla błąd / ostrzeżenie.

Podczas gdy kompilator kątowy srcdomyślnie przyjmuje jako baseurl, więc jest w stanie skompilować.

UWAGA:

Musisz ponownie uruchomić VS Code IDE, aby ta zmiana zaczęła obowiązywać.

EDYTOWAĆ:

Jak wspomniano w jednym z komentarzy, w niektórych przypadkach zmiana wersji obszaru roboczego może również działać. Więcej szczegółów tutaj: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

Najprawdopodobniej brakuje pakietu node_modules w projekcie kątowym, uruchom:

npm install

wewnątrz folderu projektu kątowego.

Ponowne uruchomienie kodu wizualnego jest wymagane w przypadku jakiejkolwiek aktualizacji lub instalacji lub wyczyszczenia pamięci podręcznej

Rozwiązaniem dla mnie był bieg

npm install

a następnie wyładuj, a następnie załaduj ponownie projekt w programie Visual Studio.

Miałem angular 5dzisiaj do czynienia z tym problemem w mojej aplikacji. Rozwiązanie, które mi pomogło, było proste. Dodałem "moduleResolution": "node"do compilerOptionsw tsconfig.jsonpliku. Moja pełna tsconfig.jsonzawartość pliku znajduje się poniżej.

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

moduleResolutionOkreślić moduł strategii rozdzielczości. Wartość tego ustawienia może wynosić nodelub classic. Możesz przeczytać więcej na ten temat tutaj .

Usuń folder Node Modules z folderu projektu Uruchom poniższe polecenie

npm cache clean --force npm install

Powinno działać.

Spróbuj użyć:

npm audit fix --force

i wtedy:

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

zamiast oszczędzać na @ng-bootstrap/ng-bootstrapcałym świecie.

Miałem ten sam problem. Rozwiązałem to, czyszcząc pamięć podręczną npm, która znajduje się w „C: \ Users \ Administrator \ AppData \ Roaming \ npm-cache”

Lub możesz po prostu uruchomić:

npm cache clean --force

a następnie zamknij vscode, a następnie ponownie otwórz folder.

Miałem do czynienia z tym samym problemem, mogą być dwa powody:

1. Twój podstawowy folder src mógł nie zostać zadeklarowany. Aby rozwiązać ten problem, przejdź do tsconfig.json i dodaj podstawowy adres URL jako „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. możesz mieć problem z npm, Aby rozwiązać ten problem, otwórz okno poleceń i uruchomnpm install

Odinstalowałem wszystkie rozszerzenia, które już zainstalowałem, i okazuje się, że problem spowodował rozszerzenie JavaScript i TypeScript IntelliSense z poniższego adresu. https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

chodzi o to, że kiedy odwiedzasz witrynę, na której widzisz, pojawia się żółta etykieta, informująca, że ​​jest w wersji zapoznawczej, ale kiedy przeglądasz w porównaniu z rozszerzeniami, nie widzisz tej etykiety.

Próbowałem wielu rzeczy, które informowali tutaj chłopaki, bez powodzenia. Potem właśnie zdałem sobie sprawę, że używam rozszerzenia Deno Support dla VSCode. Odinstalowałem go i wymagane było ponowne uruchomienie. Po ponownym uruchomieniu problem został rozwiązany.

Musisz go zainstalować ręcznie.

$ npm i @angular/core -s

to rozszerzenie https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript powodowało błąd w kodzie wizualnym, odinstalowałem je i działa dla mnie

W moim przypadku była to błędna pisownia wiersza importu. Sprawdź, czy poprawnie wpisałeś @ kątową / rdzeń, jeśli wpisujesz ją ręcznie.

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

Rozwiązaniem dla mnie było zaimportowanie całego projektu. Dla tych, którzy mają ten problem w 2019 roku, sprawdź, czy zaimportowałeś cały projekt, a nie część projektu.

Jeśli zrobiłeś to, co ja (głupio) zrobiłem ... co polegało na przeciągnięciu i upuszczeniu folderu komponentów do mojego projektu , prawdopodobnie będziesz w stanie go rozwiązać, robiąc to, co zrobiłem, aby to naprawić.

Wyjaśnienie : Zasadniczo Angualar CLI musi w jakiś sposób powiedzieć InteliJ, co @angularoznacza. Jeśli po prostu umieścisz plik w swoim projekcie bez użycia Angular CLI, to znaczy, że ng g componentName --module=app.moduleAngular CLI nie wie, aby zaktualizować to odniesienie, więc IntelliJ nie ma pojęcia, co to jest.

Podejście : uruchom Angular CLI, aby zaktualizować odwołania do @angular. Obecnie znam tylko jeden sposób, aby to zrobić ...

Implementacja : dodaj nowy komponent na tym samym poziomie, co komponent, z którym masz problemy. ng g tempComponent --module=app.module Powinno to zmusić interfejs wiersza poleceń Angular do uruchomienia i zaktualizowania tych odwołań w projekcie. Teraz po prostu usuń właśnie utworzony tempComponent i nie zapomnij usunąć wszelkich odniesień do niego w app.module .

Mam nadzieję, że to pomoże komuś innemu.

Miałem ten sam problem, było dziwne, ponieważ projekt został skompilowany i działał bez błędów. Zaktualizowałem npm, a następnie ponownie zainstalowałem pakiety

npm update
npm install

wtedy vs Code przestań to mówić.

Wszystko, co musisz zrobić, to uwzględnić w projekcie folder „nodes_modules”. Możesz napotkać ten problem podczas klonowania dowolnego projektu z github za pomocą wiersza poleceń git.

Występuje podczas klonowania lub otwierania istniejących projektów w Visual Studio Code. W zintegrowanym terminalu uruchom polecenie npm install

Rozwiązałem ten problem w następujący sposób:

1. Otwórz kod Visual Studio w swoim projekcie.
2. Terminal -> Nowy terminal.
3. Napisz npm install.

Wykonanie następujących dwóch poleceń rozwiązuje problem za mnie:

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

Najprawdopodobniej brakuje pakietu npm. Czasami instalacja npm nie rozwiązuje problemu.

Zmierzyłem się z tym samym i rozwiązałem ten problem, usuwając node_modulesfolder, a następnienpm install

dla programu 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 

Na pasku stanu VSCode musi pokazywać wersję maszynopisu - w ten sposób

Kliknięcie tego numeru wersji pokaże ci to, różne dostępne wersje.

Jeśli używasz wersji VSCode, przejście na wersję Workspace rozwiązuje problem, jeśli jest to problem z VScode, a nie tsconfig.json (już używam tej wersji, więc nie jest wyróżniona)

Spróbuj tego, zadziałało dla mnie:

npm i --save @angular/platform-server  

Następnie ponownie otwórz kod VS

To zadziałało dla mnie.

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

W moim przypadku, kiedy aktualizuję vs Project do Angular 10, miałem ten błąd.

Angular cli tworzy tsconfig.json, tsconfig.base.jsona tsconfig.app.jsonkiedy usuwam tsconfig.json i zmieniam nazwę tsconfig.base.json na tsconfig.ts, wszystko będzie dobrze. należy również zmienić extends wewnątrz tsconfig.app.json na tsconfig.json

Miałem te same problemy z Sublime Text.

Wymyśliłem następujące rozwiązanie: właśnie zredagowałem

tsconfig.json

w katalogu głównym obszaru roboczego Angular, aby uwzględnić moją świeżo utworzoną aplikację.

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

Biegnij

npm install 

będzie działać w większości przypadków

Z mojego punktu widzenia CLI, którego używasz, i biblioteki są niedopasowane. Jonowy interfejs CLI w wersji 1 nie może budować bibliotek dla jonowego interfejsu CLI w wersji 4. Najlepszym rozwiązaniem jest próba zaktualizowania wersji CLI. W przeciwnym razie możesz użyć nvm, który umożliwia uruchamianie wielu wersji węzłów w tym samym systemie operacyjnym. Może to pomóc w używaniu różnych wersji jonowego interfejsu wiersza polecenia w różnych projektach, w zależności od wymagań.

Sprawdź nvm @: ich oficjalne repozytorium systemu Windows. Istnieje również wersja na MAC i Linux.