【解決済み】VSCodeでAngularプロジェクトをビルドするときに発生する「'angular/core'モジュールが見つからない」エラーの解決方法

2024-04-09

VSCodeで「'angular/core' モジュールが見つからない」エラーが発生した場合の解決方法

Visual Studio Code（VSCode）でAngularプロジェクトを開発している際に、「'angular/core' モジュールが見つからない」というエラーが発生することがあります。このエラーは、いくつかの原因によって発生する可能性があります。

原因

考えられる原因は以下の通りです。

@angular/core モジュールのインストール不足
@angular/cli バージョンの不一致
tsconfig.json ファイルの設定誤り
VSCodeの設定誤り

解決方法

以下の方法で解決を試みてください。

まず、@angular/core モジュールがインストールされていることを確認してください。インストールされていない場合は、以下のコマンドを実行します。

npm install @angular/core

@angular/cli バージョンが、プロジェクトで使用している @angular/core モジュールのバージョンと一致していることを確認してください。バージョンが一致していない場合は、以下のコマンドを実行して @angular/cli を更新します。

npm install -g @angular/cli@<version>

tsconfig.json ファイルの compilerOptions プロパティに baseUrl と paths プロパティが設定されていることを確認してください。これらのプロパティは、VSCodeがモジュールを解決するために使用されます。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"]
    }
  }
}

VSCodeの settings.json ファイルに javascript.ts.implicitProjectConfig.experimental プロパティが true に設定されていることを確認してください。このプロパティは、VSCodeがワークスペース内の TypeScript ファイルのプロジェクト設定を自動的に検出するために使用されます。

{
  "javascript.ts.implicitProjectConfig.experimental": true
}

キャッシュのクリア

上記の方法で解決しない場合は、VSCodeのキャッシュをクリアしてみてください。

その他

使用している Angular バージョン
エラーメッセージの詳細
プロジェクト構成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular App</title>
</head>
<body>
  <my-app>Loading...</my-app>
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.min.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script>
    System.config({
      defaultJSExtensions: true,
      transpiler: "typescript",
      paths: {
        "@angular/*": "node_modules/@angular/*",
        "rxjs/*": "node_modules/rxjs/*"
      }
    });
    System.import('app/main').then(null, console.error.bind(console));
  </script>
</body>
</html>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor() {}
}

/* AppComponent */
.my-app {
  display: block;
}

このコードは、Angular プロジェクトの基本的な構成を示しています。

ファイル構成

index.html: アプリケーションのメイン HTML ファイル
app.component.ts: アプリケーションのメインコンポーネントファイル

コード解説

index.html ファイル:
- node_modules フォルダーにある JavaScript ライブラリを読み込みます。
- SystemJS を使用して、アプリケーションのモジュールを読み込みます。
app.component.ts ファイル:
- @Component デコレータを使用して、コンポーネントを定義します。
- selector プロパティは、コンポーネントのセレクターを指定します。
app.component.html ファイル:
- コンポーネントのテンプレートを記述します。