programing

VSCode에서 모듈 '@angular/core' 또는 다른 모듈을 찾을 수 없습니다.

newstyles 2023. 5. 9. 22:09

VSCode에서 모듈 '@angular/core' 또는 다른 모듈을 찾을 수 없습니다.

제 프로젝트는 Angular CLI 버전 1.2.6으로 생성되었습니다.

프로젝트를 컴파일할 수 있고 잘 작동하지만 VSCode에서 항상 다음과 같은 오류가 발생합니다.

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

스크린샷 스크린샷

나나의내첨니다습부했을의 했습니다.tsconfig.json2시간 동안 문제를 파악하고 VSCode를 제거했다가 다시 설치했지만 작동하지 않습니다.

다음은 내 환경 사양입니다.

@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: 마이크로소프트 대 엔터프라이즈 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_modulesfolder

-@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을 확인할 수 없기 때문에 가져온 구성 요소의 경로를 확인할 수 없고 오류/경고를 제공하기 때문입니다.

는 반에각컴러는일파면는▁takes러▁whereas를 사용합니다.src기본적으로 baseurl로 컴파일할 수 있습니다.

참고:

이 변경 사항을 적용하려면 VS Code IDE를 다시 시작해야 합니다.

편집:

설명 중 하나에서 언급한 것처럼, 경우에 따라 작업 영역 버전을 변경하는 것도 효과적일 수 있습니다.자세한 내용은 여기에서 확인하십시오. https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

누락되었을 가능성이 높습니다.node_modules project, 실행:

npm install

각 프로젝트 폴더 안에 있습니다.

업데이트, 설치 또는 캐시 지우기 시 Visual Code 재시작 필요

나를 위한 해결책은 달리는 것이었습니다.

npm install

그런 다음 Visual Studio에서 프로젝트를 다시 로드합니다.

는 이 해 있었습니다.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여기에서 이에 대한 자세한 내용을 읽을 수 있습니다.

프로젝트 폴더에서 노드 모듈 폴더를 삭제합니다.아래 명령으로 실행

npm cache clean --force npm install

그건 작동할 거야.

저도 같은 문제에 직면했습니다. 두 가지 이유가 있을 수 있습니다.

  1. 당신의.src 수 . 이 하려면 를 하십시오.tsconfig.json 추니다합을 합니다.baseUrl"로서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. 수 . 이 문제를 을 실행하십시오. 를 실행하십시오.npm install

VSCode 상태 표시줄에 다음과 같은 유형의 스크립트 버전이 표시되어야 합니다.

여기에 이미지 설명 입력

해당 버전 번호를 클릭하면 사용 가능한 버전이 표시됩니다.

여기에 이미지 설명 입력

VSode 버전을 사용하는 경우 Workspace 버전으로 전환하면 VScode 문제가 아닌 문제가 해결됩니다.tsconfig.json하고 있으므로 강조 표시되지 않습니다 (이미사중강표시지되않음조로므용

여기에 이미지 설명 입력

저도 같은 문제가 있었습니다."C:"에 있는 npm 캐시를 삭제하여 해결했습니다.\Users\Administrator\AppData\Roaming\npm-cache"

또는 다음을 간단히 실행할 수 있습니다.

npm cache clean --force

그런 다음 vcode를 닫고 폴더를 다시 엽니다.

수동으로 설치해야 합니다.

$ npm i @angular/core -s

사용해 보십시오.

npm audit fix --force

다음과 같은 경우:

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

저장하는 @ng-bootstrap/ng-bootstrap세계적으로

VS code의 angular project 작업을 하려고 하니 저도 같은 문제에 직면했습니다.

이 문제가 해결된 해결 방법은 입니다.

  1. 프로젝트 폴더에 node_modules 폴더가 있으면 해당 폴더를 삭제합니다.

2.터미널에서 다음 명령을 실행합니다.

npm 설치

  1. 그런 다음 npm 감사 수정 실행

  2. 그런 다음 npm 감사 수정 --force를 실행

이제 문제가 해결됩니다.

이 문제가 발생하여 다음 명령을 통해 해결했습니다.

npm cache clean --force
npm i @angular/core -s

그런 다음 VS 코드를 다시 시작하는 것을 잊지 마십시오.고쳐져야 합니다.

저도 같은 문제가 있었는데, 프로젝트가 오류 없이 컴파일되고 실행되었기 때문에 이상했습니다.나는 npm을 업데이트하고 패키지를 다시 설치했습니다.

npm update
npm install

그러면 vs 코드는 그런 말 하지 마.

저는 여기 있는 남자들이 알려준 많은 것들을 시도했지만, 성공하지 못했습니다.그 후에야 비로소 Deno Support for VSCode 확장 기능을 사용하게 되었습니다.제거했고 다시 시작해야 했습니다.다시 시작한 후 문제가 해결되었습니다.

npm 패키지가 누락되었을 가능성이 높습니다.그리고 때때로 npm을 설치해도 문제가 해결되지 않습니다.

저는 동일한 문제에 직면했고 저는 이 문제를 삭제함으로써 해결했습니다.node_modules에 폴더및그다음다▁folder음그.npm install

GIT와 같은 소스 제어에서 코드를 다운로드/복제할 때도 이 문제가 발생합니다.노드 모듈은 .gitignore 파일을 사용하여 소스 제어로 푸시되지 않으며 repo에서 처음 아티팩트를 가져올 때 npm install을 실행해야 합니다.

이미 설치한 확장자를 모두 제거했는데, 아래 주소에서 자바스크립트와 타입스크립트 IntelliSense 확장자가 문제를 일으킨 것으로 나타났습니다.https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

여기서 요점은 웹 사이트를 방문할 때 미리 보기 릴리스에 있음을 알리는 노란색 레이블이 표시되지만, 확장 버전과 비교하여 탐색할 때 해당 레이블이 표시되지 않습니다.

확장자 https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript 은 나에게 비주얼 코드의 오류를 일으켰고, 나는 그것을 제거했고 그것은 나에게 잘 작동합니다.

제가 수정한 것은 프로젝트 전체를 가져오는 것이었습니다.2019년에 이 문제가 있으신 분들은 프로젝트의 일부가 아닌 전체 프로젝트를 수입하셨는지 확인 부탁드립니다.

만약 당신이 내가 한 것처럼 (바보적으로) 했다면...제 프로젝트에 구성요소 폴더를 끌어다 놓으면 제가 수정한 작업을 통해 문제를 해결할 수 있을 것입니다.

설명:기본적으로 Angualar CLI는 Intel iJ에게 다음과 같은 정보를 제공해야 합니다.@angular즉, Angular CLI를 사용하지 않고 프로젝트에 파일을 저장하는 것입니다.ng g componentName --module=app.moduleAngular CLI는 이 참조를 업데이트할 수 없으므로 IntelliJ는 이 참조가 무엇인지 알 수 없습니다.

접근 방식:Angular CLI를 트리거하여 의 참조를 업데이트합니다.@angular나는 현재 이것을 하는 방법을 오직 한 가지만 알고 있습니다.

구현:문제가 있는 구성 요소와 동일한 수준에서 새 구성 요소를 추가합니다. ng g tempComponent --module=app.module이렇게 하면 Angular CLI가 프로젝트에서 이러한 참조를 실행하고 업데이트해야 합니다.이제 방금 만든 tempComponent를 삭제하고 app.module에서 해당 tempComponent에 대한 참조를 삭제하는 것을 잊지 마십시오.

이것이 다른 사람에게 도움이 되기를 바랍니다.

저의 경우, 업그레이드 대 각도 10으로 프로젝트를 진행할 때 이러한 오류가 발생했습니다.

는 각미생을 합니다.tsconfig.json,tsconfig.base.json그리고.tsconfig.app.jsontsconfig.json을 삭제하고 tsconfig.base.json의 이름tsconfig.tson으로 바꾸면 모든 것이 정상입니다. 또한 tsconfig.app.json 내부의 확장자를 tsconfig.json으로 변경해야 합니다.

저도 Sublime Text와 같은 문제가 있었습니다.

저는 다음과 같은 해결책을 생각해냈습니다.방금 편집했습니다.

tsconfig.json

새로 만든 응용프로그램을 포함하는 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"
    }
  ]
    }

제 경우에는 수입선을 잘못 사용한 것입니다.맞춤법을 입력했는지 확인합니다.@angular/core수동으로 입력할 경우 부품을 올바르게 분할합니다.

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

저는 한 프로젝트에서 'npm install'을 실행하고 그것으로 충분하다고 생각했지만, 실제로 솔루션/repo는 두 개의 프로젝트가 있어서 다른 프로젝트에서도 'npm install'을 실행해야 했습니다.json 파일.문서를 읽는 것은 제가 이것을 이해하는 데 도움이 되었습니다.

이 명령은 패키지 및 패키지가 종속된 모든 패키지를 설치합니다.

패키지는 패키지로 설명되는 프로그램을 포함하는 폴더입니다.json 파일.

https://docs.npmjs.com/cli/v7/commands/npm-install

다음 두 가지 명령을 실행하면 문제가 해결됩니다.

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

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 

이것을 시도해 보세요, 저에게 효과가 있었습니다.

npm i --save @angular/platform-server  

그런 다음 VS 코드를 다시 엽니다.

이것은 저에게 효과가 있었습니다.

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

Visual Studio Code에서 기존 프로젝트를 복제하거나 열 때 발생합니다.합니다.npm install

언급URL : https://stackoverflow.com/questions/45903511/vscode-cannot-find-module-angular-core-or-any-other-modules