Twitter Bootstrap Question posted in

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

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.

Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search