javascript - not - Animación de enrutador Augular 2: no se puede encontrar el módulo ''@ angular/platform-browser/animations''

export ''__ platform_browser_private__'' was not found in ''@ angular platform browser

Question

He estado siguiendo el ejemplo de enrutamiento y navegación Angular 2 que se puede encontrar en este enlace: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info .

Cuando ejecuto el transpiler, aparece el mensaje de error: "client / app / app.module.ts (5,41): error TS2307: No se puede encontrar el módulo ''@ angular / platform-browser / animations''".

Según mi systemjs.config.js (que se muestra a continuación), esperaría que el módulo ''@ angular / platform-browser / animations'' sea el archivo, "platform-browser-animations.umd.js" ubicado en node_modules / @ angular / platform-browser / bundles, pero no está ahí.

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

Usando npm traté de instalar la instalación de los marcos faltantes pero recibo un mensaje de error de dependencia no satisfecha:

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

Luego intenté instalar las versiones dependientes pero seguí recibiendo el mensaje de dependencia no cumplido.

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

Noté una advertencia que indica que debo instalar Angular 4.

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

Parece que tengo animaciones 4.0 instaladas y requiere un núcleo 4.0 que no quiero instalar. ¿Necesito desinstalar animaciones 4.0 e instalar una versión anterior de las animaciones? Mi archivo package.json está abajo.

//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": {}
}

Parece que el problema podría estar relacionado con mi versión de animaciones? Si está de acuerdo, cómo desinstalar la versión existente y qué versión debo instalar que sea compatible con la versión de @ angular / core que tengo, 2.4.8. Si este no es el problema, ¿cómo instalo el archivo faltante, @ angular / platform-browser / bundles / platform-browser-animations.umd.js?

Answer 1

Después de investigar durante horas, no pude encontrar ninguna versión de @ angular / animations que fuera compatible con mi (s) versión (s) de @ angular / core, que iban desde 2.4.0-2.4.8. Leí la respuesta a esta publicación, ¿Cómo obtener la lista de versiones para los módulos de Angular 2 compatibles? . Esta publicación indicó que todos los módulos de angular 2 excepto el enrutador están en la misma versión, así que conecté @ angular / animations 2.4.8 en mi package.json y cambié todas las versiones a 2.4.8, incluida la entrada de animaciones, ya que quería estar seguro. No me faltaba algo. Luego ejecuté npm install y esto falló en la versión de animaciones.

Finalmente encontré este post; http://angularjs.blogspot.com/ sobre la actualización a Angular 4.0. La publicación también tenía una mención específica al módulo de animaciones que faltaba, pero solo estaba disponible con la actualización. Seguí las sencillas instrucciones de actualización para Windows y mi aplicación ahora funciona bien. Mi aplicación es muy similar al ejemplo de plunker de la guía. Según la publicación, si está ejecutando Angular 2.xx, esto debería ser compatible con versiones anteriores para la mayoría de las aplicaciones. A continuación se presentan las instrucciones de actualización.

Actualizando a 4.0.0

Actualizar a 4 es tan fácil como actualizar sus dependencias angulares a la última versión, y verificar si desea animaciones. Esto funcionará para la mayoría de los casos de uso.

En Linux / Mac:

npm install @ angular / {común, compilador, compilador-cli, núcleo, formularios, http, plataforma-navegador, plataforma-navegador-dinámico, plataforma-servidor, enrutador, animaciones} @latest typescript @ más reciente --save

En 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 mecanografiado @ latest --save

Answer 2

Prueba los siguientes pasos

Paso 1

$ rm -rf node_modules

$ npm caché claro

Paso 2

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

$ npm instalar

Funciono para mi