vscodeはモジュール '@ angular / core'または他のモジュールを見つけることができません

私のプロジェクトは[AngularCLI]バージョン1.2.6で生成されました。

プロジェクトをコンパイルでき、正常に動作しますが、vsコードで常にエラーが発生し、モジュール '@ angular / core'がモジュールを見つけることができません '@ angular / router'がモジュールを見つけることができません.....

tsconfig.jsonファイルのコンテンツを添付しました。これは私にとって本当に苛立たしいことで、何が悪いのかを理解するために2時間費やしました。また、動作しないvsコードをアンインストールして再インストールしました。

これが私の環境仕様です：

@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 vs10エンタープライズ

プロジェクトルートフォルダ

.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を解決できないため、インポートされたコンポーネントへのパスを解決できず、エラー/警告が表示されるためです。

一方、Angularコンパイラはsrcデフォルトでbaseurlを使用するため、コンパイルできます。

注意：

この変更を有効にするには、VS CodeIDEを再起動する必要があります。

編集：

コメントの1つで述べたように、場合によっては、ワークスペースのバージョンを変更しても機能することがあります。詳細はこちら：https：//github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

Angularプロジェクトでnode_modulesパッケージが欠落している可能性が最も高いので、以下を実行します。

npm install

Angularプロジェクトフォルダー内。

キャッシュを更新、インストール、またはクリアする場合は、VisualCodeの再起動が必要です

私の修正は実行することでした

npm install

次にアンロードしてから、VisualStudioでプロジェクトをリロードします。

私は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

動作するはずです。

使用してみてください：

npm audit fix --force

その後：

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

@ng-bootstrap/ng-bootstrapグローバルに保存する代わりに。

私も同じ問題を抱えていました。「C：\ Users \ Administrator \ AppData \ Roaming \ npm-cache」にあるnpmキャッシュをクリアすることで解決しました

または、単に実行することもできます。

npm cache clean --force

次に、vscodeを閉じてから、フォルダーを再度開きます。

私は同じ問題に直面していました、これには2つの理由が考えられます-

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とTypeScriptIntelliSense拡張機能が問題の原因であることがわかりました。 https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

ここでのポイントは、Webサイトにアクセスすると、プレビューリリース中であることを示す黄色のラベルが表示されますが、vs拡張機能を参照すると、そのラベルは表示されません。

私はここでみんなが知らせたたくさんのことを試しましたが、成功しませんでした。その後、VSCode拡張機能のDenoSupportを使用していることに気づきました。アンインストールしたところ、再起動が必要でした。再起動後、問題は解決しました。

手動でインストールする必要があります。

$ npm i @angular/core -s

この拡張機能https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescriptにより、ビジュアルコードでエラーが発生しました。アンインストールすると、機能します。

私の場合、それはインポート行のスペルミスでした。手動で入力する場合は、@ angular / core部分のスペルが正しいことを確認してください。

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

私にとっての修正は、プロジェクト全体をインポートすることでした。2019年にこの問題が発生した場合は、プロジェクトの一部ではなくプロジェクト全体をインポートしたかどうかを確認してください。

私が（ばかげて）やったことをやったら...コンポーネントフォルダをプロジェクトにドラッグアンドドロップしたなら、おそらく私がやったことを修正することでそれを解決できるでしょう。

説明：基本的に、AngualarCLIは何らかの方法でInteliJに意味を伝える必要があります@angular。Angular CLIを使用せずにプロジェクトにファイルを配置するだけの場合、つまりng g componentName --module=app.moduleAngular CLIはこの参照を更新することを認識しないため、IntelliJはそれが何であるかを認識しません。

アプローチ：Angular CLIをトリガーして、の参照を更新します@angular。私は現在これを行う唯一の方法を知っています...

実装：問題のあるコンポーネントと同じレベルで新しいコンポーネントを追加します。ng g tempComponent --module=app.module これにより、AngularCLIがプロジェクト内のこれらの参照を実行および更新するように強制されます。ここで、作成したtempComponentを削除し、app.moduleでそれへの参照を削除することを忘れないでください。

これが他の誰かを助けることを願っています。

私は同じ問題を抱えていましたが、プロジェクトがコンパイルされてエラーなしで実行されたため、奇妙でした。npmを更新してから、パッケージを再インストールしました

npm update
npm install

その後、vscodeはそれを言うのをやめます。

あなたがする必要があるのはあなたがあなたのプロジェクトに「nodes_modules」フォルダを含める必要があるということだけです。gitコマンドラインからgithubからプロジェクトのクローンを作成すると、この問題が発生する可能性があります。

Visual StudioCodeで既存のプロジェクトのクローンを作成または開くときに発生します。統合端末でコマンドnpminstallを実行します

私はこの問題を次のように解決しました：

1. プロジェクトでVisualStudioコードを開きます。
2. ターミナル->新しいターミナル。
3. 書くnpm install。

次の2つのコマンドを実行すると、問題が解決します。

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

npmパッケージが欠落している可能性があります。また、npminstallで問題が解決しない場合もあります。

私は同じことに直面し、node_modulesフォルダを削除してからこの問題を解決しましたnpm install

VisualStudioの場合->

    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バージョンを使用している場合、ワークスペースバージョンに切り替えると、tsconfig.jsonではなくVScodeの問題である場合に問題が解決します（私はすでにそれを使用しているため、強調表示されていません）

これを試してください、それは私のために働きました：

npm i --save @angular/platform-server  

次に、VSコードを再度開きます

これは私のために働いた。

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

私の場合、vsプロジェクトをAngular 10にアップグレードすると、このエラーが発生しました。

角度のCLIは作成しtsconfig.json、tsconfig.base.jsonそしてtsconfig.app.json私が削除したときtsconfig.jsonと改名tsconfig.base.jsonにtsconfig.tsすべてのものオクラホマます。また、tsconfig.app.json内のextendsをtsconfig.jsonに変更する必要があります

私はSublimeTextでも同じ問題を抱えていました。

私は次の解決策を思いついた：私はちょうど編集した

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

実行する

npm install 

ほとんどの場合に機能します

私の見解では、使用しているCLIとライブラリが一致していません。ionic CLIバージョン1は、ionic CLIバージョン4のライブラリを構築できません。最善の解決策は、CLIバージョンをアップグレードしてみることです。それ以外の場合は、同じOSで複数のノードバージョンを実行できるnvmを使用できます。これにより、要件に応じて、さまざまなプロジェクトでさまざまなionicCLIバージョンを使用できます。

nvm @をチェックしてください：彼らの公式ウィンドウリポジトリ。MACバージョンとLinuxバージョンもあります。