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
        ),

Scrawl

If you get this when running the unit tests, but not when running the actual application, you need to import into your testbed configuration. See this answer on a different question: https://mcmap.net/q/408087/-upgrading-angular-from-4-0-0-beta-5-to-4-0-0-breaks-animations-and-unit-tests – Maquis

Answer 1

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
    ]
})

Scrawl

Answer 2

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
        ]
    })
   

Quisling

i am getting an error GET http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations 404 (Not Found) – Yuma

@Yuma If you are using systemjs you need to update the config file too. Check out @user2367418's answer for adding @angular/platform-browser/animations, @angular/animations/browser and @angular/animations to your config file – Minuend

Answer 3

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 
   // ...
]

Whall

If it didn't work, check this: maybe you got misleading error message problem. github.com/angular/angular/issues/15581 – Spinning

Answer 4

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)

Inartistic

Answer 5

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

---

Shiite

This answer has already posted by the user @user2367418. So before posting the answer check the previous answers & post your relevant answer. – Scrawl