Primeng: Compilation failed with primeNG 8.0.0-rc.1 in Angular 8

[josineiaraujo]

I just upgraded my project to angular 8, after that, I also updated the primeNG package to version 8.0.0 RC1

ERROR in ./node_modules/primeng/components/chart/chart.js

Module not found: Error: Can't resolve 'chart.js' in 'C:\wamp64\www\Angularnode_modules\primeng\components\chart'
ERROR in ./node_modules/primeng/components/editor/editor.js

Module not found: Error: Can't resolve 'quill' in 'C:\wamp64\www\Angularnode_modules\primeng\components\editor'

I'm sorry if I did not express myself well, writing in English, because I'm Brazilian ...

[fernandogomesdf]

I just upgraded my project to angular 8, after that, I also updated the primeNG package to version 8.0.0 RC1

ERROR in ./node_modules/primeng/components/chart/chart.js

Module not found: Error: Can't resolve 'chart.js' in 'C:\wamp64\www\Angularnode_modules\primeng\components\chart'
ERROR in ./node_modules/primeng/components/editor/editor.js

Module not found: Error: Can't resolve 'quill' in 'C:\wamp64\www\Angularnode_modules\primeng\components\editor'

I'm sorry if I did not express myself well, writing in English, because I'm Brazilian ...

try:

npm install chart.js --save
npm install quill --save

also remember to update your angular.json file:

"scripts": [
"node_modules/chart.js/dist/Chart.js"
"node_modules/quill/dist/quill.js"
]

[MakesNine]

I also have an issue with the Chart and Editor (quill) components. I have the proper packages installed and the included scripts in Angular.json. It worked well using Angular 8.0.0 and PrimeNG 7.1.3.

With PrimeNG 8.0.0-rc.1 my app compiles, but at runtime I get the following error messages in Devtools:
chart_js_1.default is not a constructor
quill_1.default is not a constructor

There is a closed issue regarding changes that were made to the Chart and Editor components for this release: https://github.com/primefaces/primeng/issues/7763 and a related commit: https://github.com/primefaces/primeng/commit/8fddfcba75702adf60c23342448fb80961ab1a78

I don't know however if this is an intended breaking change and we need to change the way we use these components or if it's simply something that should be fixed.

[josineiaraujo]

In my case, I only use the TurboTable of primeNG. so I commented the lines that instantiate the libraries chart.js and quill.

./node_modules/primeng/components/chart/chart.js
line 14
// var chart_js_1 = require ("chart.js");

/node_modules/primeng/components/editor/editor.js
line 28
// var quill_1 = require ("quill");

However, this is not the solution! I did this because I did not use the resources that these libraries require.

[pavankjadda]

I just upgraded my project to angular 8, after that, I also updated the primeNG package to version 8.0.0 RC1
ERROR in ./node_modules/primeng/components/chart/chart.js
Module not found: Error: Can't resolve 'chart.js' in 'C:\wamp64\www\Angularnode_modules\primeng\components\chart'
ERROR in ./node_modules/primeng/components/editor/editor.js
Module not found: Error: Can't resolve 'quill' in 'C:\wamp64\www\Angularnode_modules\primeng\components\editor'
I'm sorry if I did not express myself well, writing in English, because I'm Brazilian ...

try:

npm install chart.js --save
npm install quill --save

also remember to update your angular.json file:

"scripts": [
"node_modules/chart.js/dist/Chart.js"
"node_modules/quill/dist/quill.js"
]

This workaround works. Hoping for the fix

[jmesa-sistel]

Other solution is modify node_modules/primeng/primeng.js and remove:

__export(require("./components/chart/chart"));
__export(require("./components/editor/editor"));

if you are not using this components

[jmesa-sistel]

After more investigation I recommend not to use imports like:
import { ButtonModule } from 'primeng/primeng';
The best way is:
import { ButtonModule } from 'primeng/button';
or
import { ButtonModule } from 'primeng/components/button/button';
This way you avoid import all components defined in primeng/primeng.js.
So if you are not using chart or editor modules then Chart.js or quill.js are not used and you can avoid to add this libraries in the bundle.

Edit:
Also I have added primeng/primeng in the tslint.js blacklist section so the imports try to use the submodules

[krojew]

I tried adding ./node_modules/chart.js/dist/Chart.js to "scripts", but I still get this error.

[mattslocum]

https://github.com/primefaces/primeng/pull/7780

[Zory1]

I had the error 'chart_js_1.default is not a constructor' in devtools and no chart displayed on latest version of primeng, chart.js and angular 8. Spent an hour trying things and eventually got it working by removing primeng (npm remove primeng) and installing previous version (npm install [email protected]).

Then of course making sure that angular.json has
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/quill/dist/quill.js"
]"

In my module I had to use import like this:
"import {ChartModule} from 'primeng/chart';"

Before that I also installed types for chart.js (not sure if that helped or not but command was 'npm i @types/chart.js --save' and I had to updated tsconfig.json to have option "allowSyntheticDefaultImports": true )

Hope it helps someone out there.

[softgandhi]

Many thanks @Zory1 , your steps helped me to fix it.

[cagataycivici]

primeng/primeng was deprecated a long time ago as it loads the entire suite and causes issues like this, it will be removed in a future version. Please always import the component from its own shorthand like;

import { ButtonModule } from 'primeng/button';

For example, if you don't use the chart component, there is no need to install chart.js or similarly no need to install quill if you don't use editor.

[JimmyTheNerd]

I followed every advice above (thanks!), but the only working solution was to downgrade to 7.1.3:

npm remove primeng
npm install [email protected]

Additional lessons learnt:

1. Never import from primeng/primeng
2. Add primeng/primeng to the import-blacklist of tslint.json

[mattslocum]

I simply copied the library to be local and manually applied the fix https://github.com/primefaces/primeng/pull/7780. Once that change it released, you can switch back to npm.

[fernandogomesdf]

primeNG 8.0.0 final fix the issue

[josineiaraujo]

@fernandogomesdf ,
I updated it for the latest version and the error continues!

[CheckMater]

Well, after updating to PrimeNg 8.0.0 and changing the imports in the modules I was receiving the same error, but I forgot to also check the imports in my components after I changed them from primeng/primeng to their respective component path then it started to work properly.

Thanks!

[fernandogomesdf]

@fernandogomesdf ,
I updated it for the latest version and the error continues!

i really dont know why...

[TekTimmy]

primeNG 8.0.0 final fix the issue

I just upgraded to PrimeNG 8 and still ran into this issue!

[simplicitytrade]

@TekTimmy
I just upgraded to PrimeNG 8 and still ran into this issue!

Did you make sure you have non "primeng/primeng" imports anymore? - as mentioned above from @CheckMater

[andresbm05]

For those running into this issue even after changing all imports from 'primeng/primeng' to 'primeng/X', take into account that if you use a library with a peerDependency on primeng and that libray has an import from 'primeng/primeng' this error would also happend.

In my case, I had to update all libraries in my company in order to remove all 'primeng/primeng' imports and that way my application build successfully.

[rukshandangalla]

Well, after updating to PrimeNg 8.0.0 and changing the imports in the modules I was receiving the same error, but I forgot to also check the imports in my components after I changed them from primeng/primeng to their respective component path then it started to work properly.

Thanks!

Exactly this was my problem too. Make sure you check your inner components for 'primeng/primeng'