Navigation Error in angular2

Question

I have updated the angular packages version from 2.4.10 to 4.0.0 after updating i am getting the following errors while navigating.

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

And i changed the webpack.common.js configuration. see the below code

 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

Don't forget to add the following line in your System.config.js file. If you are going to use animations in your angular project then you need to include this lines in your angular repo.

---

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

One can run into a problem with import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

You can get this error message: node_modules/@angular/platform-browser‌​/bundles/platform-br‌​owser.umd.js/animati‌​ons 404 (Not Found)

To fix it, if you are using systemjs.config.js then you need to have this line it it: '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

Here is example contents of systemjs.config.js that fixes the problem:

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

Note: The references to primeng are not necessary unless you are using it. I happen to be giving it a try. (Not a recommendation)

Answer 3

It's a change from 4.0.0-rc.1.

In their words, "We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule."

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

3. Add it to imports.

    @NgModule({
        imports: [
          BrowserAnimationsModule
        ]
    })
   

Answer 4

I have fixed the issue. I added a new package: @angular/animations.

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

And I imported the module:

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Answer 5

That depends on whether you want to use Angular animations or not

In case you do not want to use it (i.e. it will reduce the production bundle size) then import the NoopAnimationsModule :

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

imports: [
   NoopAnimationsModule 
   // ...
]