[解決済み] Angular Compiler は TypeScript >=3.4.0 と <3.5.0 を要求しているが、代わりに 3.5.3 が検出された

質問

npm run buildを行うと、以下のエラーが発生します。

Angular コンパイラは TypeScript >=3.4.0 と <3.5.0 を要求していますが、3.5.3 です。 が代わりに見つかりました。

以下のことを別途試してみました。

npm install typescript@">=3.4.0 <3.5.0". その後、node_modulesとpackage.jsonを削除。npm installを実行。

npm update --force. その後、node_modulesとpackage.jsonを削除。npm installを実行します。

まだエラーが出ます。

私のpackage.jsonには、以下の依存関係が含まれています。

  "dependencies": {
    "@angular/animations": "8.1.0",
    "@angular/cdk": "^8.0.2",
    "@angular/cli": "^8.1.0",
    "@angular/common": "8.1.0",
    "@angular/compiler": "8.1.0",
    "@angular/core": "8.1.0",
    "@angular/forms": "8.1.0",
    "@angular/http": "7.2.15",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "8.1.0",
    "@angular/platform-browser-dynamic": "8.1.0",
    "@angular/router": "8.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-user-idle": "^2.1.2",
    "angular2-cookie": "^1.2.6",
    "core-js": "^2.6.7",
    "rxjs": "6.5.2",
    "rxjs-tslint": "^0.1.5",
    "stream": "0.0.2",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.0",
    "@angular/compiler-cli": "8.1.0",
    "@angular/language-service": "8.1.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.6.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "^3.4.5"
  }

ng --version は以下のような出力をします。

Angular CLI: 8.1.2
Node: 10.16.0
OS: win32 x64
Angular: 8.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@angular/cdk                      8.1.1
@angular/cli                      8.1.2
@angular/http                     7.2.15
@angular/material                 8.1.1
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.35.2

ここで何が問題なのでしょうか？

解決方法は？

Angular 12に適用可能

Angular 12 の最新バージョンで動作するプロジェクトでは、TypeScript v4.2.x から 4.3.x を使用する必要があります。

npm i -D [email protected]

Angular 11に適用されます。

Angular 11の最新バージョン（11.2.x）で動作するプロジェクトでは、TypeScript v4.1.5までサポートします。

npm i -D [email protected]

Angular 10に適用されます（2020年6月現在）

Angular 10をご利用の方は、TypeScript 3.9のインストールが必要なため、メンテナから TypeScript 3.8 のサポートを終了しました。 . 最新バージョンのTypeScriptをインストールするのが最も安全な方法でしょう。

npm i -D [email protected]

Angular 9に適用されます（2020年5月現在）

Angular 9の最新バージョンで稼働しているプロジェクト向け( v9.1.x ) では、TypeScript v3.8.3 までをサポートしています。それよりも新しいもの（TypeScript v3.9.0など）を使っている場合は、ダウングレードして対応したバージョンをインストールする必要があります。

npm i -D [email protected]

Angular 9の以前のバージョンで動作しているプロジェクトでは、( v9.0.x サポートされるTypeScriptのバージョンは、TypeScript v3.6.5からv3.7.5（を含む）です。） それ以外のバージョン（3.8.3など）をインストールすると、このようなエラーになります。

ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.8.0 but 3.8.3 was found instead

この問題を解決するには、エラーメッセージに記載されている対応バージョンをインストールする必要があります。Typescript 3.7.x をインストールすると、Optional Chaining や Nullish Coalescing などの便利な機能がアンロックされるので、これをお勧めします。

npm i -D [email protected]

また、Angularを最新のマイナーバージョン（v9.1.x）にアップデートすることも可能です。

Angular 8に適用可能（当初の回答）

TypeScriptの最新版（v3.5.3）がインストールされているようです。代わりにAngular 8でサポートされているバージョンのTypeScript v3.4.5をインストールする必要があります。

最新版ではなく、特定のバージョンのTypeScriptをインストールするには、このコマンドを試してみてください。

npm i -D [email protected]

さらに、キャレットを変更することを検討するとよいでしょう ^ を、package.json にある TypeScript のバージョンに置き換えてください。

• 完全に削除すると、npmが最新のマイナーバージョン（3.5.3）をインストール/使用するのを防ぐということです。

  "typescript": "3.4.5"。

• これを "~" に変更すると、任意のパッチリリースが許容されることを npm に伝えることができます。

  "typescript": "~3.4.5" // 3.4.X にマッチする最新バージョンを使用します。

npm パッケージのバージョン管理の使用に関する詳細については、こちらをご覧ください。 https://docs.npmjs.com/about-semantic-versioning

Angular2～7など、古いバージョンのAngularを使用している方に適用されます。

|-----------------|--------------------|
| Angular version | TypeScript version |
|-----------------|--------------------|
|       6.1.x     |       3.6.x        |
|-----------------|--------------------|
|       7.2.x     |       2.9.x        |
|-----------------|--------------------|                                 

同様に、他のAngularのバージョンを使っている場合は、それぞれのTypeScriptのバージョンをインストールすることができます。

npm i -D [email protected]

ソース - 各AngularバージョンでサポートされるTypeScriptの全バージョンをご参照ください。

その他の便利な情報

プロジェクトにインストールされているAngularのバージョンで「サポートされていない」TypeScriptのバージョンをインストールする方法が実際にあります。 フェリペシルバ . そうすることの利点は、最新バージョンの TypeScript ( TypeScript 4.1.2 またはベータ版リリースのいずれか) をプロジェクトに適用します。

あなたの tsconfig.json を設定するだけです。 disableTypeScriptVersionCheck として true .

{
  // ...
  "angularCompilerOptions": {
    // ...
    "disableTypeScriptVersionCheck": true
  }
}

ただし、このような方法は Angularの公式ドキュメント :

サポートされていないバージョンのTypeScriptでは、以下のような問題が発生する可能性があるため、推奨しません。 未定義の動作をします。