node.js - Error de navegación en angular2

webpack-2 typescript2.1

Question

He actualizado la versión de paquetes angulares de 2.4.10 a 4.0.0 después de la actualización. Obtengo los siguientes errores mientras navego.

ERROR Error: Uncaught (in promise): Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

Y cambié la configuración de webpack.common.js. mira el código a continuación

 new webpack.ContextReplacementPlugin(
            // The (//|//) piece accounts for path separators in *nix and Windows
            /angular(//|//)core(//|//)@angular/,
            helpers.root(''./src''), // location of your src
            {} // a map of your routes
        ),

Answer 1

Es un cambio de 4.0.0-rc.1 .

En sus palabras, "hemos incluido Animaciones en su propio paquete. Esto significa que si no usa Animaciones, este código adicional no terminará en sus paquetes de producción. Esto también le permite encontrar documentación y tomar mejor ventaja de la autocompletación. Si necesita animaciones, bibliotecas como Material importarán automáticamente el módulo (una vez que lo instale a través de NPM) o lo puede agregar usted mismo a su NgModule principal ".

1. npm install @angular/animations --save
2. Dentro de AppModule >> import {BrowserAnimationsModule} from ''@angular/platform-browser/animations''

3. Agrégalo a las importaciones.

    @NgModule({
        imports: [
          BrowserAnimationsModule
        ]
    })

Answer 2

Eso depende de si desea usar animaciones angulares o no

En caso de que no desee utilizarlo (es decir, reducirá el tamaño del paquete de producción), importe el NoopAnimationsModule:

import { NoopAnimationsModule } from ''@angular/platform-browser/animations'';

imports: [
   NoopAnimationsModule 
   // ...
]

Answer 3

He solucionado el problema. Agregué un nuevo paquete: @angular/animations .

import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';

E importé el módulo:

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Answer 4

No olvide agregar la siguiente línea en su archivo System.config.js. Si va a utilizar animaciones en su proyecto angular, entonces necesita incluir estas líneas en su repositorio angular.

 ''@angular/animations'': ''npm:@angular/animations/bundles/animations.umd.js'',
 ''@angular/animations/browser'': ''npm:@angular/animations/bundles/animations-browser.umd.js'',
  @angular/platform-browser/animations'': ''npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js'',

Answer 5

Uno puede tener un problema con la importación {BrowserAnimationsModule} de ''@ angular / platform-browser / animations'';

Puede obtener este mensaje de error: node_modules / @ angular / platform-browser / bundles / platform-br owser.umd.js / animati ons 404 (Not Found)

Para solucionarlo, si está usando systemjs.config.js, entonces necesita tener esta línea: ''@ angular / platform-browser / animations'': ''npm: @ angular / platform-browser / bundles / platform-browser- animations.umd.js '',

Aquí hay un ejemplo de contenido de systemjs.config.js que soluciona el problema:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(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 bundles
      ''@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-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/animations'': ''npm:@angular/animations/bundles/animations.umd.js'',
      ''@angular/animations/browser'': ''npm:@angular/animations/bundles/animations-browser.umd.js'',
      ''@angular/platform-browser/animations'': ''npm:@angular/platform-browser/bundles/platform-browser-animations.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'',
      ''primeng'':                   ''npm:primeng'' 
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: ''./main.js'',
        defaultExtension: ''js''
      },
      rxjs: {
        defaultExtension: ''js''
      },
      primeng: {
          defaultExtension: ''js''
      }
    }
  });
})(this);

Nota: Las referencias a primeng no son necesarias a menos que lo esté usando. Yo lo estoy probando. (No es una recomendación)