Erreur de navigation dans angular2

Question

J'ai mis à jour la version des paquets angulaires de 2.4.10 à 4.0.0. Après la mise à jour, j'obtiens les erreurs suivantes lors de la navigation.

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

Et j'ai changé la configuration de webpack.common.js. voir le code ci-dessous

 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

J'ai corrigé le problème. J'ai ajouté un nouveau paquet : @angular/animations .

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

Et j'ai importé le module :

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Answer 2

C'est un changement par rapport à 4.0.0-rc.1 .

Selon eux, "nous avons intégré les animations dans leur propre paquet. Cela signifie que si vous n'utilisez pas Animations, ce code supplémentaire ne se retrouvera pas dans vos paquets de production. Cela vous permet également de trouver plus facilement la documentation et de mieux profiter de l'autocomplétion. Si vous avez besoin d'animations, des bibliothèques comme Material importeront automatiquement le module (une fois que vous l'aurez installé via NPM), ou vous pouvez l'ajouter vous-même à votre NgModule principal."

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

3. Ajoutez-le aux importations.

    @NgModule({
        imports: [
          BrowserAnimationsModule
        ]
    })

Answer 3

Cela dépend si vous voulez utiliser les animations Angular ou non.

Si vous ne voulez pas l'utiliser (c'est-à-dire si cela réduit la taille du paquet de production), importez le NoopAnimationsModule :

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

imports: [
   NoopAnimationsModule 
   // ...
]

Answer 4

On peut rencontrer un problème avec import {BrowserAnimationsModule} de '@angular/platform-browser/animations' ;

Vous pouvez obtenir ce message d'erreur : node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations 404 (Non trouvé)

Pour résoudre ce problème, si vous utilisez systemjs.config.js, vous devez ajouter cette ligne : '@angular/platform-browser/animations' : 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

Voici un exemple du contenu de systemjs.config.js qui corrige le problème :

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

Remarque : les références à primeng ne sont pas nécessaires, sauf si vous l'utilisez. Il se trouve que j'en fais l'essai. (Ce n'est pas une recommandation)

Answer 5

N'oubliez pas d'ajouter la ligne suivante dans votre fichier System.config.js. Si vous avez l'intention d'utiliser des animations dans votre projet angulaire, vous devez inclure ces lignes dans votre dépôt angulaire.

---

 '@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',

---