Augular 2 Router Animation - Cannot find module '@angular/platform-browser/animations'

Question

I have been following the Angular 2 Routing and Navigation example that can be found at this link: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info.

When I run the transpiler I get the error message: "client/app/app.module.ts(5,41): error TS2307: Cannot find module '@angular/platform-browser/animations'."

Based on my systemjs.config.js (shown below), I would expect the module '@angular/platform-browser/animations' to be the file, "platform-browser-animations.umd.js" located in node_modules/@angular/platform-browser/bundles, but it is not there.

//systemjs.config.js
(function (global) {
  System.config({
    paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
   },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  app: 'app',

  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
  '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  //app: {
  //  main: './main.js',
  //  defaultExtension: 'js'
  //},
  client: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
});
})(this);

Using npm I tried to install the install the missing frameworks but receive an unmet dependency error message:

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- UNMET PEER DEPENDENCY @angular/[email protected]

I then tried to install the dependent versions but continued to receive the unmet dependency message.

>npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] --save 

I noticed one warning that indicates that I should install Angular 4.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but no
ne was installed.

It looks like I have animations 4.0 installed and it requires core 4.0 which I do not want to install. Do I need to uninstall animations 4.0 and install an earlier version of animations? My package.json file is below.

//package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p client/",
"build:watch": "tsc -p client/ -w",
"build:e2e": "tsc -p e2e/",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "npm run build:watch",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./client/**/*.ts -t verbose"
  },
 "keywords": [], 
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^2.4.8",
"@angular/compiler": "~2.4.0",
"@angular/core": "^2.4.8",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "^2.4.10",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-animate": "^1.6.3",
"angular-in-memory-web-api": "~0.2.4",
"body-parser": "^1.17.0",
"bootstrap": "^3.3.7",
"cookie-parser": "^1.4.3",
"core-js": "^2.4.1",
"ejs": "^2.5.6",
"express": "^4.15.0",
"express-session": "^1.15.1",
"jade": "^1.11.0",
"jquery": "^3.1.1",
"mongoose": "^4.8.5",
"morgan": "^1.8.1",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"rxjs": "5.0.1",
"stylus": "^0.54.5",
"systemjs": "0.19.40",
"toastr": "^2.1.2",
"zone.js": "^0.7.4"
 },
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.0.10",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
 },
"repository": {}
}

It looks like the problem could be related to my animations version ? If you agree, how to uninstall the existing version and what version should I install that is compatible with the version of @angular/core I have, 2.4.8. If this is not the problem how do I install the missing file, @angular/platform-browser/bundles/platform-browser-animations.umd.js?

Answer 1

After researching for hours I could find no version of @angular/animations that was compatible with my version(s) of @angular/core which ranged from 2.4.0-2.4.8. I read the answer to this post, How to get list of versions for compatible Angular 2 modules?. This post indicated that all modules of angular 2 except the router are at the same version so I plugged @angular/animations 2.4.8 into my package.json and changed all versions to 2.4.8 including the animations entry as I wanted to be sure I was not missing something. I then ran npm install and this failed on the animations version.

I finally found this post; http://angularjs.blogspot.com/ on updating to Angular 4.0. The post also had a specific mention to the animations module I have been missing but only available with the upgrade. I followed the simple update instructions for windows and my application is now running fine. My app is very similar to the plunker example from the guide. Per the post, if you are running Angular 2.x.x then this should backward compatible for most applications. Below are the upgrade instructions.

Updating to 4.0.0

Updating to 4 is as easy as updating your Angular dependencies to the latest version, and double checking if you want animations. This will work for most use cases.

On Linux/Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

On Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Answer 2

Try below steps

Step-1

$ rm -rf node_modules

$ npm cache clear

Step -2

$ npm install @angular/animations@latest --save

$ npm install

Its worked for me