找不到模块'@angular/platform-b​​rowser/animations'

Question

我收到“[ts] 找不到模块'@angular/platform-b​​rowser/animations'”的错误。

我已经安装了以下：

1. npm install --save @angular/material @angular/cdk
2. npm install --save @angular/animations

并尝试在 app.module 中导入 BrowserAnimationsModule，如下所示： "从 '@angular/platform-b​​rowser/animations' 导入 { BrowserAnimationsModule }；"

这是在我的 package.json 中

"dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^7.0.1",
    "@angular/cdk": "^7.0.2",
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/material": "^7.0.2",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "animate.css": "^3.5.2",
    "arrive": "^2.3.1",
    "bootstrap": "^3.3.5",
    "bootstrap-notify": "^3.1.3",
    "bootstrap-select": "^1.12.2",
    "bootstrap-tagsinput": "^0.7.1",
    "chartist": "^0.9.4",
    "chartist-plugin-zoom": "^0.4.0",
    "chartjs-plugin-zoom": "^0.5.0",
    "core-js": "^2.4.1",
    "datatables": "1.10.12",
    "datatables.net-bs": "1.10.12",
    "datatables.net-responsive": "^2.1.1",
    "domready": "^1.0.8",
    "eonasdan-bootstrap-datetimepicker": "4.17.47",
    "fullcalendar": "^3.4.0",
    "googleapis": "^19.0.0",
    "jasny-bootstrap": "^3.1.3",
    "jquery": "^1.12.4",
    "nouislider": "^9.2.0",
    "rxjs": "^5.1.0",
    "twitter-bootstrap-wizard": "^1.2.0",
    "validate": "^3.0.1",
    "web-animations-js": "^2.2.2",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/bootstrap": "^3.3.32",
    "@types/chartist": "^0.9.34",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^1.10.31",
    "@types/node": "^6.0.73",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0"
  }

你能告诉我如何纠正这个问题吗？谢谢。

Answer 1

在我看来，您正在尝试将最新版本的 Angular Material 与极其过时的 Angular 版本一起使用。

我建议您要么坚持使用 Angular Material 和 Angular CDK 的 2.x.x 版本，要么按照以下步骤操作：

注意 #1：除非明确说明，否则所有命令都应在项目的根目录中运行。

注意 #2：请不要在命令中复制 cmets（又名 # 符号及其后面的文本）。他们在那里解释命令的作用。

---

1. 通过运行以下命令重新安装 Angular CLI 以安装最新版本：

   npm i -g @angular/cli # Globally installs the Angular CLI
   npm i @angular/cli # Locally installs the Angular CLI (to your project)
   

2. 通过运行以下命令将您的 Angular 项目文件更新为新的 Angular CLI v6+ 工作区文件：

   ng update @angular/cli
   

3. 通过运行以下命令安装最新版本的 TypeScript (v3.1.1)：

   npm i -D typescript@latest
   

   这是 Angular v7 及更高版本所必需的。

4. 通过运行以下命令将所有 Angular 依赖项更新到 Angular v7+：

   ng update @angular/core
   

应该（希望）就是它！如果您需要任何澄清，请随时发表评论！

注：以上说明改编自官方Angular Update Guide。

Answer 2

package.json 文件中的 @angular 依赖项未对齐。根据您的配置，@angular/animations 是 ^7.0.1，而所有其他 @angular/* 库都设置为 ^2.4.0。

您应该对所有 @angular 范围的包使用相同的 semver。如果您决定升级到最新版本，您可能需要升级 typescript 和其他一些库。

"dependencies": {
  "@agm/core": "^1.0.0-beta.0",
  "@angular/animations": "^7.0.1",
  "@angular/cdk": "^7.0.2",
  "@angular/common": "^2.4.0",                   // should be "^7.0.1"
  "@angular/compiler": "^2.4.0",                 // should be "^7.0.1"
  "@angular/core": "^2.4.0",                     // should be "^7.0.1"
  "@angular/forms": "^2.4.0",                    // should be "^7.0.1"
  "@angular/http": "^2.4.0",                     // should be "^7.0.1"
  "@angular/material": "^7.0.2",
  "@angular/platform-browser": "^2.4.0",         // should be "^7.0.1"
  "@angular/platform-browser-dynamic": "^2.4.0", // should be "^7.0.1"
  "@angular/router": "^3.4.0",                   // should be "^7.0.1"
                                                 // etc