Cannot find module '@angular/platform-browser/animations'

Question

I get the error of "[ts] Cannot find module '@angular/platform-browser/animations'."

I have installed the following:

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

and try to import the BrowserAnimationsModule in the app.module like so: "import { BrowserAnimationsModule } from '@angular/platform-browser/animations';"

This is in my 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"
  }

Can you please show me how to correct this? Thank you.

Answer 1

It seems to me that you're trying to use the latest version of Angular Material with extremely outdated versions of Angular.

I suggest that you either stick to the 2.x.x versions of Angular Material and Angular CDK or that you follow the steps below:

Note #1: All commands should be run in the root of your project unless explicitly stated.

Note #2: Please don't copy the comments (aka the # symbol and the text after it) in commands. They are there for explaining what the command does.

---

1. Reinstall the Angular CLI in order to install the latest version by running the following commands:

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

2. Update your Angular project file to the new Angular CLI v6+ workspace file by running the following command:

   ng update @angular/cli
   

3. Install the latest version of TypeScript (v3.1.1) by running the following command:

   npm i -D typescript@latest
   

   This is required for Angular v7 and up.

4. Update all of your Angular dependencies to Angular v7+ by running the following command:

   ng update @angular/core
   

That should (hopefully) be it! If you need any clarifications, don't hesitate to leave a comment!

Note: The instructions above are adapted from the official Angular Update Guide.

Answer 2

The @angular dependencies in your package.json file are not aligned. From your configuration, @angular/animations is ^7.0.1 while all the other @angular/* libraries are set to ^2.4.0.

You should use the same semver for all the @angular scoped packages. You might have to upgrade typescript and some other libraries to if you decided to go up-to-date.

"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