Angular – Cannot find module ‘@angular/platform-browser/animations’

angularangular-material

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.

Best Answer

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.

Related Topic