Augular 2路由器动画 - 找不到模块'@ angular / platform-browser / animations' [英] Augular 2 Router Animation - Cannot find module '@angular/platform-browser/animations'
问题描述
我一直关注可以在此链接找到的Angular 2路由和导航示例： https ：//plnkr.co/edit/I4ArEQTniO7MJtfzpBWl？p = info 。
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.
当我运行转发器时，我收到错误消息：client / app / app.module.ts（5,41）：错误TS2307：找不到模块'@ angular / platform-browser / animations'。
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'."
基于我的systemjs.config .js（如下所示），我希望模块'@ angular / platform-browser / animations'成为文件，platform-browser-animations.umd.js位于node_modules / @ angular / platform-browser / bundles中，但它不存在。
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);
使用npm我试图安装缺少的框架但是收到一条未满足的依赖项错误消息：
Using npm I tried to install the install the missing frameworks but receive an unmet dependency error message:
+-- UNMET PEER DEPENDENCY @angular/common@2.4.8
+-- UNMET PEER DEPENDENCY @angular/core@2.4.8
`-- UNMET PEER DEPENDENCY @angular/platform-browser@2.4.10
然后我尝试安装依赖版本，但继续接收未满足的依赖性消息。
I then tried to install the dependent versions but continued to receive the unmet dependency message.
>npm install @angular/common@2.4.8 @angular/core@2.4.8 @angular/platform-browser@2.4.10 --save
我注意到一个警告表明我应该安装Angular 4.
I noticed one warning that indicates that I should install Angular 4.
npm WARN @angular/animations@4.0.0 requires a peer of @angular/core@4.0.0 but no
ne was installed.
看起来我安装了动画4.0，它需要我不想安装的核心4.0。我是否需要卸载动画4.0并安装早期版本的动画？我的package.json文件在下面。
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": {}
}
看起来问题可能与我的动画版本有关？如果您同意，如何卸载现有版本以及我应该安装哪个版本与我拥有的@ angular / core版本兼容，2.4.8。如果这不是问题，我该如何安装丢失的文件，@ angular / platform-browser / bundles / platform-browser-animations.umd.js？
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?
推荐答案
经过几个小时的研究，我找不到与我的@ angular / core版本兼容的@ angular / animations版本，其范围为2.4.0-2.4.8。我看了这篇文章的答案，如何获取兼容的Angular 2模块的版本列表？。这篇帖子表明除路由器之外的所有角度2的模块都是相同的版本所以我将@ angular / animations 2.4.8插入我的package.json并将所有版本更改为2.4.8，包括动画条目，因为我想确定我没有错过什么。然后我运行了npm install，这在动画版本上失败了。
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.
我终于找到了这篇文章;关于更新到Angular 4.0的 http://angularjs.blogspot.com/ 。该帖子还特别提到了我一直缺少的动画模块，但仅在升级时可用。我按照Windows的简单更新说明，我的应用程序现在运行正常。我的应用程序非常类似于指南中的plunker示例。根据帖子，如果您运行Angular 2.x.x，那么这应该向后兼容大多数应用程序。以下是升级说明。
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.
更新到4.0.0
更新到4就像更新你的一样简单与最新版本的Angular依赖关系，如果您想要动画，请仔细检查。这适用于大多数用例。
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.
在Linux / Mac上：
On Linux/Mac:
npm install @ angular / {common ，编译器，编译器 - cli，核心，表单，http，平台浏览器，平台 - 浏览器 - 动态，平台 - 服务器，路由器，动画} @latest typescript @ latest --save
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
在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
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
这篇关于Augular 2路由器动画 - 找不到模块'@ angular / platform-browser / animations'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
