Angular App: "export 'AnimationBuilder' was not found in '@angular/animations'"

Question

I have an Angular4 application (which was automatically generated by hyperledger composer).

I installed angular/animations using the following command:

npm install --save @angular/animations@4.0.0

I received the following warning:

@angular/animations@4.0.0 requires a peer of @angular/core@4.0.0 but none is installed. You must install peer dependencies yourself.

This warning warning made no sense because Angular/core@4.0.0 is installed (screenshot of package.json file):

Anyway ... When running the app, everything looks fine in the browser. But in the console, the following error message is displayed:

Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

After importing the BrowserAnimationsModule, however, the whole app break down.

In the browser, the following error message is displayed:

How can I fix this?

Answer 1

First of all

This warning warning made no sense because Angular/core@4.0.0 is installed.

In your dependencies, you have @angular/core: ^4.0.0. Notice the caret (^) at the beginning. The caret installs the most recent major version. This is why you have an unmet dependency error: You probably have one of the latest 4+ versions of @angular/core, but on the other hand, you are explicitly installing the 4.0.0 version of @angular/animations. You can check which exact version of @angular/core you are actually using by going into node_modules and navigating to @angular > core > package.json.

As for your main question, I believe AnimationBuilder was added in Angular 4.2, so that's why you are probably having an issue, since you are installing 4.0.0. Change the entry @angular/animations: 4.0.0 in package.json to @angular/animations: ^4.0.0 and then remove your node_modules and run npm i again.