web-dev-qa-db-fra.com

Erreur de navigation dans angular2

J'ai mis à jour la version angular packages de 2.4.10 à 4.0.0 après la mise à jour, je reçois 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
        ),
node.jsangularwebpack-2typescript2.1
39
Vignesh

J'ai résolu le problème. J'ai ajouté un nouveau package: @angular/animations.

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

Et j'ai importé le module:

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})
54
Vignesh

C'est un changement de 4.0.0-rc.1 .

Selon eux, "Nous avons intégré les animations dans leur propre package. Cela signifie que si vous n'utilisez pas les animations, ce code supplémentaire ne se retrouvera pas dans vos bundles de production. Cela vous permet également de trouver plus facilement la documentation et de mieux prendre avantage de la saisie semi-automatique. 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 pourrez 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
     ]
 })
25
PrazSam

Cela dépend si vous voulez utiliser Angular ou non

Si vous ne souhaitez pas l'utiliser (c'est-à-dire que cela réduira la taille du bundle de production), importez le NoopAnimationsModule:

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

imports: [
   NoopAnimationsModule 
   // ...
]
9
mareks

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

Vous pouvez obtenir ce message d'erreur: node_modules/@ angular/platform-browser‌/bundles/platform-br‌ owser.umd.js/animati‌ ons 404 (Not Found)

Pour le corriger, si vous utilisez systemjs.config.js, vous devez le placer sur cette ligne: '@ angular/platform-browser/animations': 'npm: @ angular/platform-browser/bundles/platform-browser- animations.umd.js ',

Voici un exemple de contenu de systemjs.config.js qui résout 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'essaie. (Pas une recommandation)

7
user2367418