Augular 2 Router Animation - Невозможно найти модуль '@angular/platform-browser/animations'

Я следил за примером Angular 2 Routing and Navigation, который можно найти по этой ссылке: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info.

Когда я запускаю transpiler, я получаю сообщение об ошибке: "client/app/app.module.ts(5,41): ошибка TS2307: не удается найти модуль '@ angular/platform-browser/animations'."

Основываясь на моем systemjs.config.js(показано ниже), я ожидаю, что модуль '@ angular/platform-browser/animations' будет файлом, "platform-browser-animations.umd.js", расположенный в node_modules/@angular/platform-browser/bundles, но его там нет.

//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, я попытался установить установку недостающих фреймворков, но получил сообщение об ошибке неудовлетворительной зависимости:

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

Затем я попытался установить зависимые версии, но продолжал получать неудовлетворительное сообщение о зависимости.

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

Я заметил одно предупреждение, которое указывает, что я должен установить Angular 4.

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

Похоже, у меня установлена ​​анимация 4.0, и для нее требуется ядро ​​4.0, которое я не хочу устанавливать. Нужно ли мне удалять анимацию 4.0 и устанавливать более раннюю версию анимации? Мой файл package.json находится ниже.

//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?

Ответы

Ответ 1

После нескольких часов работы я не мог найти версию @ angular/анимации, которая была совместима с моей версией @angular/core, которая варьировалась от 2.4.0-2.4.8. Я прочитал ответ на этот пост, Как получить список версий для совместимых Angular 2 модулей?. В этом сообщении указано, что все модули Angular 2, кроме маршрутизатора, имеют одну и ту же версию, поэтому я подключил @angular/animations 2.4.8 в свой пакет package.json и изменил все версии на 2.4.8, включая запись анимации, как я хотел быть уверенным, что я ничего не пропустил. Затем я запускал npm install, и это не удалось в версии анимации.

Наконец я нашел этот пост; http://angularjs.blogspot.com/ при обновлении до Angular 4.0. Сообщение также имело конкретное упоминание о модуле анимации, который я отсутствовал, но доступен только с обновлением. Я выполнил простые инструкции по обновлению для окон, и мое приложение теперь работает нормально. Мое приложение очень похоже на пример plunker из руководства. За сообщение, если вы используете Angular 2.x.x, тогда это должно быть обратно совместимым для большинства приложений. Ниже приведены инструкции по обновлению.

Обновление до 4.0.0

Обновление до 4 так же просто, как обновление ваших зависимостей Angular до последней версии, и двойная проверка, хотите ли вы анимации. Это будет работать для большинства случаев использования.

В 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

В 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/анимации @последние typescript @latest --save

Ответ 2

Попробуйте выполнить шаги

Шаг 1

$rm -rf node_modules

$npm cache clear

Шаг -2

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

$npm install

Сработало для меня