vs โค้ดไม่พบโมดูล '@ angular / core' หรือโมดูลอื่น ๆ

โครงการของฉันสร้างขึ้นด้วย [Angular CLI] เวอร์ชัน 1.2.6

ฉันสามารถรวบรวมโครงการและทำงานได้ดี แต่ฉันมักจะได้รับข้อผิดพลาดในรหัสเทียบกับที่บอกว่าไม่พบโมดูล '@ angular / core' ไม่พบโมดูล '@ angular / router' ไม่พบโมดูล .....

ฉันได้แนบเนื้อหาของไฟล์ tsconfig.json ของฉันซึ่งทำให้ฉันหงุดหงิดมากใช้เวลา 2 ชั่วโมงเพื่อค้นหาว่ามีอะไรผิดพลาดฉันได้ถอนการติดตั้งและติดตั้งใหม่เทียบกับโค้ดที่ใช้ไม่ได้

นี่คือข้อกำหนดสภาพแวดล้อมของฉัน:

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

ฉันประสบปัญหานี้เฉพาะในขณะที่นำเข้าส่วนประกอบ / บริการที่สร้างขึ้นเองสำหรับผู้ที่คุณเช่นฉันซึ่งวิธีแก้ปัญหาที่ยอมรับไม่ได้ผลสามารถลองสิ่งนี้:

เพิ่ม

"baseUrl": "src"

ในtsconfig.jsonไฟล์. เหตุผลก็คือรหัสภาพ IDE ไม่สามารถแก้ไข URL พื้นฐานได้จึงไม่สามารถแก้ไขเส้นทางไปยังส่วนประกอบที่นำเข้าและให้ข้อผิดพลาด / คำเตือน

ในขณะที่คอมไพเลอร์เชิงมุมรับsrcเป็นฐานโดยค่าเริ่มต้นดังนั้นจึงสามารถคอมไพล์ได้

บันทึก:

คุณต้องรีสตาร์ท VS Code IDE เพื่อให้การเปลี่ยนแปลงนี้มีผล

แก้ไข:

ดังที่ได้กล่าวไว้ในความคิดเห็นข้อหนึ่งในบางกรณีการเปลี่ยนเวอร์ชันของพื้นที่ทำงานอาจใช้งานได้เช่นกัน รายละเอียดเพิ่มเติมที่นี่: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

เป็นไปได้มากว่าแพ็คเกจ node_modules ที่หายไปในโครงการเชิงมุมให้เรียกใช้:

npm install

ภายในโฟลเดอร์โครงการเชิงมุม

จำเป็นต้องรีสตาร์ท Visual Code หากมีการอัปเดตหรือติดตั้งหรือล้างแคช

การแก้ไขสำหรับฉันคือการวิ่ง

npm install

จากนั้นยกเลิกการโหลดจากนั้นโหลดโปรเจ็กต์ใหม่ในวิชวลสตูดิโอ

วันนี้ฉันประสบปัญหานี้ใน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คุณอาจจะอ่านรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่

ลบโฟลเดอร์ Node Modules ออกจากโฟลเดอร์โครงการเรียกใช้คำสั่งด้านล่าง

npm cache clean --force npm install

มันควรจะทำงาน

ลองใช้:

npm audit fix --force

แล้ว:

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

แทนที่จะประหยัด@ng-bootstrap/ng-bootstrapทั่วโลก

ผมมีปัญหาเดียวกัน. ฉันแก้ไขได้โดยการล้างแคช npm ซึ่งอยู่ที่ "C: \ Users \ Administrator \ AppData \ Roaming \ npm-cache"

หรือคุณสามารถเรียกใช้:

npm cache clean --force

จากนั้นปิด vscode จากนั้นเปิดโฟลเดอร์ของคุณอีกครั้ง

ฉันประสบปัญหาเดียวกันอาจมีสาเหตุสองประการสำหรับสิ่งนี้ -

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
  }
}

2. คุณอาจมีปัญหาใน npm ในการแก้ไขปัญหานี้ให้เปิดหน้าต่างคำสั่งของคุณและเรียกใช้ -npm install

ฉันถอนการติดตั้งส่วนขยายทั้งหมดที่ฉันติดตั้งไว้แล้วและปรากฎว่าส่วนขยาย JavaScript และ TypeScript IntelliSense จากที่อยู่ด้านล่างทำให้เกิดปัญหา https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

ประเด็นนี้ก็คือเมื่อคุณเยี่ยมชมเว็บไซต์ที่คุณเห็นมีป้ายกำกับสีเหลืองบอกคุณว่าอยู่ในรุ่นตัวอย่าง แต่เมื่อคุณเรียกดูในส่วนขยายคุณจะไม่เห็นป้ายกำกับนั้น

ฉันลองหลายอย่างที่พวกเขาแจ้งที่นี่ แต่ไม่ประสบความสำเร็จ หลังจากนั้นฉันเพิ่งรู้ว่าฉันใช้ส่วนขยาย Deno Support สำหรับ VSCode ฉันถอนการติดตั้งและจำเป็นต้องรีสตาร์ท หลังจากรีสตาร์ทปัญหาได้รับการแก้ไข

คุณต้องติดตั้งด้วยตนเอง

$ npm i @angular/core -s

ส่วนขยายนี้https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescriptทำให้ฉันเกิดข้อผิดพลาดในโค้ดภาพฉันถอนการติดตั้งและใช้ได้กับฉัน

ในกรณีของฉันมันเป็นการสะกดผิดของบรรทัดการนำเข้า ตรวจสอบว่าคุณสะกดส่วน @ angular / core อย่างถูกต้องหากพิมพ์ด้วยตนเอง

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

การแก้ไขสำหรับฉันคือการนำเข้าโครงการทั้งหมด สำหรับผู้ที่มีปัญหานี้ในปี 2019 โปรดตรวจสอบว่าคุณได้นำเข้าโครงการทั้งหมดไม่ใช่ส่วนหนึ่งของโครงการหรือไม่

หากคุณทำในสิ่งที่ฉัน (โง่เขลา) ทำ ... ซึ่งเป็นการลากและวางโฟลเดอร์คอมโพเนนต์ลงในโปรเจ็กต์ของฉันคุณอาจสามารถแก้ไขได้โดยทำในสิ่งที่ฉันทำเพื่อแก้ไข

คำอธิบาย : โดยพื้นฐานแล้ว Angualar CLI ต้องบอก InteliJ ว่า@angularหมายถึงอะไร หากคุณเพียงแค่ดึงไฟล์ในโปรเจ็กต์ของคุณโดยไม่ใช้ Angular CLI นั่นคือng g componentName --module=app.moduleAngular CLI ไม่ทราบว่าจะอัปเดตข้อมูลอ้างอิงนี้ดังนั้น IntelliJ จึงไม่รู้ว่ามันคืออะไร

วิธีการ : ทริกเกอร์ Angular CLI เพื่ออัปเดตการอ้างอิงของ@angularอ้างอิงปรับปรุง ตอนนี้ฉันรู้วิธีเดียวเท่านั้นที่จะทำสิ่งนี้ ...

การนำไปใช้งาน : เพิ่มองค์ประกอบใหม่ในระดับเดียวกับองค์ประกอบที่คุณมีปัญหา ng g tempComponent --module=app.module สิ่งนี้ควรบังคับให้ Angular CLI รันและอัปเดตการอ้างอิงเหล่านี้ในโครงการ ตอนนี้เพียงแค่ลบ tempComponent ที่คุณเพิ่งสร้างขึ้นและอย่าลืมลบการอ้างอิงใด ๆ ใน app.moduleapp.module

หวังว่านี่จะช่วยคนอื่นได้

ฉันมีปัญหาเดียวกันแปลกเพราะโครงการรวบรวมและทำงานโดยไม่มีข้อผิดพลาด ฉันอัปเดต npm แล้วติดตั้งแพ็คเกจใหม่

npm update
npm install

เทียบกับรหัสหยุดพูดอย่างนั้น

สิ่งที่คุณต้องทำก็คือคุณต้องรวมโฟลเดอร์ "nodes_modules" ไว้ในโปรเจ็กต์ของคุณ คุณอาจประสบปัญหานี้เมื่อคุณโคลนโครงการใด ๆ จาก github throu git command line

เกิดขึ้นเมื่อโคลนหรือเปิดโครงการที่มีอยู่ใน Visual Studio Code ในเทอร์มินัลรวมให้รันคำสั่ง npm install

ฉันแก้ไขปัญหานี้ได้ดังนี้:

1. เปิดโค้ด Visual studio กับโครงการของคุณ
2. Terminal -> Terminal ใหม่
3. เขียนnpm install.

การดำเนินการสองคำสั่งต่อไปนี้ช่วยแก้ปัญหาให้ฉันได้:

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

แพ็กเกจ npm ที่เป็นไปได้มากที่สุดหายไป และบางครั้งการติดตั้ง npm ไม่สามารถแก้ไขปัญหาได้

ฉันต้องเผชิญกับสิ่งเดียวกันและฉันได้แก้ไขปัญหานี้โดยการลบnode_modulesโฟลเดอร์แล้วnpm install

สำหรับ 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 

ในแถบสถานะ VSCode จะต้องแสดงเวอร์ชัน typescript - เช่นนี้

การคลิกที่หมายเลขเวอร์ชันนั้นจะแสดงให้คุณเห็นซึ่งมีเวอร์ชันต่างๆ

หากคุณใช้เวอร์ชัน VSCode การเปลี่ยนเป็นเวอร์ชัน Workspace จะช่วยแก้ปัญหาได้หากเป็นปัญหา VScode แทนที่จะเป็น tsconfig.json ของคุณ (ฉันใช้เวอร์ชันนั้นอยู่แล้วจึงไม่ได้เน้น)

ลองสิ่งนี้มันได้ผลสำหรับฉัน:

npm i --save @angular/platform-server  

จากนั้นเปิดรหัส VS อีกครั้ง

สิ่งนี้ได้ผลสำหรับฉัน

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

ในกรณีของฉันเมื่อฉันอัปเกรดเทียบกับโปรเจ็กต์เป็นเชิงมุม 10 ฉันมีข้อผิดพลาดนี้

Angular cli สร้างtsconfig.jsonขึ้นtsconfig.base.jsonและtsconfig.app.jsonเมื่อฉันลบtsconfig.jsonและเปลี่ยนชื่อtsconfig.base.jsonเป็นtsconfig.tsทุกสิ่งจะตกลง คุณต้องเปลี่ยนขยายภายในtsconfig.app.jsonเป็นtsconfig.json

ฉันมีปัญหาเดียวกันกับ Sublime Text

ฉันคิดวิธีแก้ปัญหาต่อไปนี้: ฉันเพิ่งแก้ไข

tsconfig.json

ในรากของพื้นที่ทำงานเชิงมุมเพื่อรวมแอปพลิเคชันที่สร้างขึ้นใหม่ของฉัน

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

มันจะใช้งานได้เกือบทุกกรณี

จากมุมมองของฉัน CLI ที่คุณใช้และไลบรารีไม่ตรงกัน ไอออนิก CLI เวอร์ชัน 1 ไม่สามารถสร้างไลบรารีสำหรับไอออนิก CLI เวอร์ชัน 4 ได้ทางออกที่ดีที่สุดคือลองอัปเกรดเวอร์ชัน CLI ของคุณ หรือคุณสามารถใช้ nvm ซึ่งช่วยให้คุณสามารถรันโหนดหลายเวอร์ชันบน OS เดียวกันได้ซึ่งจะช่วยให้คุณใช้เวอร์ชันไอออนิก CLI ที่แตกต่างกันในโปรเจ็กต์ต่างๆได้ขึ้นอยู่กับข้อกำหนด

ลองดู nvm @: windows repo อย่างเป็นทางการของพวกเขา นอกจากนี้ยังมีเวอร์ชัน MAC และ Linux