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?
