kode vs tidak dapat menemukan modul '@ angular / core' atau modul lainnya


90

proyek saya dibuat dengan [Angular CLI] versi 1.2.6.

Saya dapat mengkompilasi proyek dan berfungsi dengan baik, tetapi saya selalu mendapatkan kesalahan dalam kode vs yang memberi tahu saya tidak dapat menemukan modul '@ angular / core' tidak dapat menemukan modul '@ angular / router' tidak dapat menemukan modul .....

tangkapan layar tangkapan layar

Saya telah melampirkan konten file tsconfig.json saya, ini benar-benar membuat saya frustrasi, menghabiskan 2 jam untuk mencari tahu apa yang salah, saya juga telah menghapus dan menginstal ulang kode vs itu tidak berfungsi.

berikut adalah spesifikasi lingkungan saya:

@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 perusahaan

folder akar proyek

.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
Itu karena Anda telah menginstal inti sudut sebagai global. Intellisense tidak dapat menemukannya di node_modules.
Prajwal

inti sudut ada di node_module saya
Arash

26
Apakah Anda membuka proyek vscodesebelum Anda npm install? Jika yessudah coba restart vscodesetelah itu?
kuncevic.dev

6
saya telah memulai ulang 100 kali
Arash

Dapatkah Anda mencoba membuat proyek baru menggunakan cli, npm installlalu melihat apakah ada hal yang sama dengan proyek itu?
kuncevic.dev

Jawaban:


120

Saya menghadapi masalah ini hanya saat mengimpor komponen / layanan yang saya buat sendiri. Bagi Anda seperti saya, yang solusi yang diterima tidak berfungsi, dapat mencoba ini:

Menambahkan

"baseUrl": "src"

di Anda tsconfig.json. Alasannya adalah bahwa IDE kode visual tidak dapat menyelesaikan url dasar sehingga tidak dapat menyelesaikan jalur ke komponen yang diimpor dan memberikan kesalahan / peringatan.

Sedangkan angular compiler srcsecara default mengambil baseurl sehingga bisa dikompilasi.

CATATAN:

Anda perlu memulai ulang VS Code IDE agar perubahan ini berlaku.

EDIT:

Seperti yang disebutkan di salah satu komentar, dalam beberapa kasus, mengubah versi ruang kerja mungkin juga berfungsi. Detail lebih lanjut di sini: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869


1
ini berhasil untuk saya ... tapi sekarang mendapatkan kesalahan lain Build: Class 'Subject <T>' salah memperluas kelas dasar 'Observable <T>'
sam

@sam yang tampaknya tidak terkait dengan masalah ini. Mungkin mempostingnya sebagai pertanyaan baru bersama kode Anda.
TryToLearn

2
Ini berhasil untuk saya. Saya menambahkan src ke basUrl di file tsconfig.app.json. "baseUrl": "src",
howsers

1
Menambahkan "baseUrl": "src" di file tsconfig.json berhasil untuk saya.
Chamu

1
Bagus dengan Menambahkan "baseUrl": "src" ini di tsconfig dan mulai ulang IDE menyelesaikan masalah saya.
Gauttam Jada

75

Paket node_modules yang kemungkinan besar hilang dalam proyek sudut, jalankan:

npm install

di dalam folder proyek sudut.


2
apa-apaan ini! dimulai dengan sudut ini menyelamatkan saya hari ini
M-sAnNan

Pohon direktori dalam pertanyaan awal berisi folder node_moduls / @ angular / core, tapi mungkin folder itu kosong.
eckes

3
kemudian mulai ulang VSCode
andreikashin

Ini berhasil pada tahun 2020. Terima kasih.
Akito

36

Kode Visual restart diperlukan jika ada pembaruan atau menginstal atau menghapus cache


VS Code diperbarui tanpa saya menyadarinya. Restart membantu.
nikoalset

19

perbaikan bagi saya adalah lari

npm install

lalu bongkar, lalu muat ulang proyek di studio visual.


15

Saya menghadapi masalah ini dalam angular 5aplikasi saya hari ini. Dan perbaikan yang membantu saya, sederhana. Saya menambahkan "moduleResolution": "node"ke compilerOptionsdalam tsconfig.jsonfile. tsconfig.jsonIsi file lengkap saya ada di bawah.

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

The moduleResolutionmenentukan strategi resolusi modul. Nilai pengaturan ini bisa nodeatau classic. Anda dapat membaca lebih lanjut tentang ini di sini .


menyelamatkan karir saya!
null

Jawaban terbaik yang pernah ada!
José Neto

Ke atas denganmu!
Adam

7

Hapus folder Node Modules dari folder proyek. Jalankan perintah di bawah ini

npm cache clean --force npm install

Ini harus berhasil.


5

Coba gunakan:

npm audit fix --force

lalu:

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

bukannya menabung @ng-bootstrap/ng-bootstrapsecara global.


5

Saya memiliki masalah yang sama. Saya menyelesaikannya dengan membersihkan cache npm yang ada di "C: \ Users \ Administrator \ AppData \ Roaming \ npm-cache"

Atau Anda bisa langsung menjalankan:

npm cache clean --force

lalu tutup vscode, lalu buka folder Anda lagi.


5

Saya menghadapi masalah yang sama, mungkin ada dua alasan untuk ini-

  1. Folder dasar src Anda mungkin tidak dideklarasikan, untuk mengatasinya, buka tsconfig.json dan tambahkan url dasar sebagai "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. Anda mungkin mengalami masalah di npm, Untuk mengatasinya, buka jendela perintah Anda dan jalankan-npm install

2

Saya mencopot semua ekstensi yang sudah saya instal, dan ternyata ekstensi JavaScript dan TypeScript IntelliSense dari alamat di bawah ini menyebabkan masalah. https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

intinya di sini adalah ketika Anda mengunjungi situs web, Anda melihat ada label kuning, memberi tahu Anda bahwa itu dalam rilis pratinjau, tetapi ketika Anda menjelajah di ekstensi vs, Anda tidak melihat label itu.


Sayangnya saya masih mengalami masalah ini, bahkan setelah mencopot semua ekstensi dan memulai ulang VS Code. : /
Jonathan

1
Maaf, saya harus memberikan update tentang ini. Ya, sepertinya sudah beres, tapi saya tidak yakin saya ingat persis bagaimana. Namun, beberapa hal yang pasti saya lakukan: A) sepenuhnya menghapus dan membuat ulang solusi saya, B) mencopot dan menginstal ulang Angular CLI, C) me-reboot mesin saya. Semoga ini bisa membantu seseorang. Jika itu terjadi lagi, saya akan mencoba lebih metodis dalam menentukan cara memperbaikinya, sehingga saya dapat melaporkan kembali solusi yang dapat diulang.
Jonathan

1
Solusi lain yang mungkin adalah mengklik bilah status dan pilih "Gunakan Versi Ruang Kerja", lihat github.com/Microsoft/vscode/issues/34681
Luis Cantero

2

Saya mencoba banyak hal yang diberitahukan orang-orang di sini, tetapi tidak berhasil. Setelah itu, saya baru menyadari bahwa saya menggunakan ekstensi Deno Support for VSCode. Saya mencopot pemasangannya dan perlu memulai ulang. Setelah restart, masalah terpecahkan.


2

Anda perlu menginstalnya secara manual.

$ npm i @angular/core -s


1

Dalam kasus saya, itu adalah kesalahan eja pada baris impor. Periksa apakah Anda telah mengeja bagian @ angular / inti dengan benar jika mengetiknya secara manual.

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


1

Perbaikan bagi saya adalah mengimpor seluruh proyek. Bagi mereka yang mengalami masalah ini di tahun 2019 harap periksa apakah Anda telah mengimpor seluruh proyek bukan bagian dari proyek.


1

Jika Anda melakukan apa yang saya (bodoh) lakukan ... yaitu menyeret dan melepas folder komponen ke dalam proyek saya, maka Anda mungkin dapat menyelesaikannya dengan melakukan apa yang saya lakukan untuk memperbaikinya.

Penjelasan : Pada dasarnya, CLI Angualar harus memberitahu InteliJ apa @angularartinya. Jika Anda hanya memasukkan file dalam proyek Anda tanpa menggunakan CLI Angular misalnya, ng g componentName --module=app.modulemaka Angular CLI tidak tahu untuk memperbarui referensi ini sehingga IntelliJ tidak tahu apa itu.

Pendekatan : Memicu CLI Angular untuk memperbarui referensi @angular. Saat ini saya hanya tahu satu cara untuk melakukan ini ...

Penerapan : Tambahkan komponen baru pada tingkat yang sama dengan komponen yang bermasalah. ng g tempComponent --module=app.module Ini harus memaksa CLI Angular untuk menjalankan dan memperbarui referensi ini dalam proyek. Sekarang hapus saja tempComponent yang baru saja Anda buat dan jangan lupa untuk menghapus referensi apa pun padanya di app.module .

Semoga ini bisa membantu orang lain.


1

Saya memiliki masalah yang sama, aneh karena proyek dikompilasi dan berjalan tanpa kesalahan. Saya memperbarui npm dan kemudian menginstal ulang paket

npm update
npm install

kemudian kode vs berhenti mengatakan itu.


0

Yang perlu Anda lakukan adalah Anda harus menyertakan folder "node_modules" dalam proyek Anda. Anda mungkin menghadapi masalah ini saat Anda mengkloning proyek apa pun dari baris perintah github throu git.


mungkin tidak demikian karena ketika Anda menjalankan npm install di root situs Anda di folder yang berisi file package.json Anda, folder ini secara otomatis dibuat untuk Anda dengan modul yang diperlukan.
Keenan Stewart

yah. jika menjalankan nmp install maka itu akan mengunduh paket yang diperlukan dengan memeriksa file package.json ..
Anand

0

Terjadi saat mengkloning atau membuka proyek yang ada di Visual Studio Code. Di terminal terintegrasi, jalankan perintah npm install


1
Ini sudah diberikan beberapa kali. Ada kabar baru yang ingin Anda tambahkan?
Nico Haase

0

Saya memecahkan masalah ini sebagai berikut:

  1. Buka kode Visual studio dengan proyek Anda.
  2. Terminal -> Terminal Baru.
  3. Menulis npm install.

1
Setidaknya sudah ada 2 jawaban berbeda yang mengatakan "lari npm install"
barbsan

0

Menjalankan dua perintah berikut memecahkan masalah bagi saya:

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

1
Memposting beberapa jawaban yang identik paling-paling "sangat disukai" dan jawaban Anda kemungkinan besar akan dihapus. Dalam kasus Anda, Anda juga salah mengeja Angular di semua jawaban.
David Buck

Harap tambahkan beberapa penjelasan ke kode Anda sehingga orang lain dapat mempelajarinya
Nico Haase

0

Kemungkinan besar paket npm hilang. Dan terkadang npm install tidak menyelesaikan masalah.

Saya menghadapi hal yang sama dan saya telah menyelesaikan masalah ini dengan menghapus node_modulesfolder dan kemudiannpm install


0

untuk 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

Di bilah status VSCode, itu harus menampilkan versi skrip - seperti ini masukkan deskripsi gambar di sini

Mengklik nomor versi itu akan menunjukkan ini, versi berbeda yang tersedia. masukkan deskripsi gambar di sini

Jika Anda menggunakan versi VSCode, beralih ke versi Workspace memecahkan masalah jika itu adalah masalah VScode daripada tsconfig.json Anda (Saya sudah menggunakan yang itu, jadi tidak disorot) masukkan deskripsi gambar di sini


0

Coba ini, ini berhasil untuk saya:

npm i --save @angular/platform-server  

Kemudian buka kembali kode VS.


0

Ini berhasil untuk saya.

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

0

Dalam kasus saya, ketika saya memutakhirkan vs proyek ke sudut 10, saya mengalami kesalahan ini.

Cli sudut membuat tsconfig.json, tsconfig.base.jsondan tsconfig.app.jsonketika saya menghapus tsconfig.json dan mengganti nama tsconfig.base.json menjadi tsconfig.ts semua akan baik-baik saja. Anda juga harus mengubah meluas di dalam tsconfig.app.json menjadi tsconfig.json


0

Saya memiliki masalah yang sama dengan Sublime Text.

Saya datang dengan solusi berikut: Saya baru saja mengedit

tsconfig.json

di root ruang kerja Angular untuk menyertakan aplikasi yang baru saya buat.

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

-1

Jalankan

npm install 

itu akan bekerja pada sebagian besar kasus


Ini salah Pertanyaan menyatakan bahwa itu dikompilasi dengan benar dan masalahnya ada pada VSCode, bukan kompilasi
ManavM

1
Proyek saya terkompilasi dengan benar dan berjalan, dan masalahnya ada di dalam VSCode, bukan kompilasi, dan npm install baru saja memperbaikinya.
Treer

-3

Dari sudut pandang saya CLI yang Anda gunakan dan perpustakaan tidak cocok. CLI ionik versi 1 tidak dapat membuat pustaka untuk CLI ionik versi 4. Solusi terbaik adalah mencoba meningkatkan versi CLI Anda. Jika tidak, Anda dapat menggunakan nvm yang memungkinkan Anda menjalankan beberapa versi node pada OS yang sama. Ini dapat membantu Anda menggunakan versi ionik CLI yang berbeda di proyek yang berbeda tergantung pada persyaratan.

Lihat nvm @: Repo windows resmi mereka. Ada juga versi MAC dan Linux.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.