Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  17] [ 6]  / answers: 1 / hits: 19448  / 7 Years ago, tue, march 28, 2017, 12:00:00

I have been following the Angular 2 Routing and Navigation example that can be found at this link:

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.

(function (global) {
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'

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.

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?

More From » angularjs


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; 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

[#58362] Saturday, March 25, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 344
Total Questions: 95
Total Answers: 114

Location: Wales
Member since Mon, May 17, 2021
3 Years ago