primeng 4.0.0-rc.1: Could not resolve @angular/animations relative to /node_modules/primeng/components/accordion/accordion.d.ts

[danny-swimmer]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
In my angular 2 project, I upgraded primeng this morning from version 2.0.2 to 4.0.0-rc.1.
When I run "ng build --prod", I get these errors:
ERROR in Error encountered resolving symbol values statically. Could not resolve @angular/animations relative to
/node_modules/primeng/components/accordion/accordion.d.ts., resolving symbol AccordionTab in
/node_modules/primeng/components/accordion/accordion.d.ts, resolving symbol AccordionTab in
/node_modules/primeng/components/accordion/accordion.d.ts, resolving symbol AccordionTab in
/node_modules/primeng/components/accordion/accordion.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/web_if/ewp/src'
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts

When I revert to primeng version 2.0.2, the errors go away.

Expected behavior
Project should build without errors

Minimal reproduction of the problem with instructions
Steps to reproduce:

1. rm -rf node_modules
2. npm install
3. ng build --prod

Here is my package.json file:
{ "name": "d3", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/cli": "v1.0.0-rc.2", "@angular/common": "2.4.9", "@angular/compiler": "2.4.9", "@angular/core": "2.4.9", "@angular/forms": "2.4.9", "@angular/http": "2.4.9", "@angular/platform-browser": "2.4.9", "@angular/platform-browser-dynamic": "2.4.9", "@angular/router": "3.4.9", "@angular/material": "2.0.0-beta.2", "@types/hammerjs": "2.0.34", "hammerjs": "2.0.8", "angular2-material-datepicker": "0.5.0", "core-js": "2.4.1", "primeng": "4.0.0-rc.1", "rxjs": "5.2.0", "ts-helpers": "1.1.2", "zone.js": "0.8.2" }, "devDependencies": { "@types/jasmine": "2.5.45", "@types/node": "7.0.8", "@types/webrtc": "0.0.21", "angular2-template-loader": "0.6.2", "codelyzer": "3.0.0-beta.3", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "3.2.0", "karma": "1.5.0", "karma-chrome-launcher": "2.0.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-remap-istanbul": "0.6.0", "protractor": "5.1.1", "ts-node": "2.1.0", "tslint": "4.5.1", "typescript": "2.1.5", "webdriver-manager": "12.0.4" } }

Please tell us about your environment:
OS: Ubuntu 14.04
Package manager: npm

• Angular version: 2.0.X
  2.4.9

• PrimeNG version: 2.0.X
  4.0.0-rc.1

[nick1247]

I think the problem is that you forget to add @angular/animations to package.json

[digitalcraftco]

I think you'll need to upgrade to Angular 4.0.0-x to use new animations and PrimeNG 4.0.0-rc.1.

[danny-swimmer]

Thanks @nick1247 and @digitalcraftco.
I added "@angular/animations": "4.0.0-rc.3" to package.json, and that got rid of the "Could not resolve @angular/animations" error.
However now I'm getting a different error when I run "ng build --prod":
ERROR in Cannot read property 'stateChangeExpr' of null

[cagataycivici]

This is not related to PrimeNG so closing.

[danny-swimmer]

Hi @cagataycivici,

Perhaps the root cause of this issue is not inside PrimeNG. However the result is that I can't upgrade to PrimeNG 4.0.0-rc.1 - I'm stuck at PrimeNG 2.0.2.
Obviously there was some change between v2.0.2 and v4.0.0-rc.1 which at least exposed a bug somewhere else.
It would be helpful if you could at least suggest what I need to change, so that I can upgrade to PrimeNG 4.0.0-rc.1. Thanks.

[cagataycivici]

If you are on Angular 2, you need to use PrimeNG 2.x, like today's 2.0.4 release.

[vg33]

I had the same problem, which was solved by adding @angular/animations to package.json as suggested by @nick1247

[pratik-trianz]

where exactly in package.json we need to add

I am geting this error
Failed to compile.

./primeng/components/accordion/accordion.js
Module not found: Error: Can't resolve '@angular/animations' in 'D:\Git-Repo\trianz-studionode_modules\primeng\components\accordion'
@ ./~/primeng/components/accordion/accordion.js 13:19-49
@ ./~/primeng/primeng.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

[orendin]

Hi all
I have just upgraded to angular4.0.1 and I have run into the described problem with primeng. From what I could see, angular animations is NOT a required part of angular at this stage.
Adding the reference to @angular/animations is the solution to get primeng to work, but it was not specified anywhere.
Could I recommend adding the required angular packages as separate dependencies to the documentation to make it clearer what the angular requirements are? I think especially people upgrading from 2 to 4 will keep running into this problem and we could help them by making a slight adjustment to the doc.

Cheers

Ben

[nick1247]

Migration to ng4 has been described in angular changelog

[vg33]

Hi @pratik-trianz

I added @angular/animations to package.json under dependencies as follows:

"dependencies": {
   "@angular/animations": "^4.0.0",
  ...
}

You could also install via npm:

npm install @angular/animations --save

[ukaaa]

I have "@angular/animations": "^4.0.1" and "primeng": "^4.0.0-rc.2" but I still get the error.

[alyssa19]

I tried all the suggested solution here but still im getting error which is related to primeNG. I just tried to use primeNG schedule to another branch but it gives me an error so when I switch to the branch that im working with, now i have the same error. i did not merge it

[Sachin124]

You can Just update your package using npm

npm install [email protected]