PrimeNG v12.0.1 UMD file has styleUrls which causes an error when using systemjs

[pgarge]

Current behavior

Expected behavior Like older versions umd file shouldn't have style url's

Minimal reproduction of the problem with instructions This is causing following error:

• Angular version: 12.1.3

• PrimeNG version: 12.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[HoneyBadgerSeeker]

Hello, we have the same issue with Angular12/PrimeNG12/Webpack5. When we launch our app with,

platformBrowserDynamic() .bootstrapModule(AppModule, { preserveWhitespaces: true }) .then(() => console.log(Application started)) .catch(err => console.error(err));

Angular parse all module, it does its magic and when it's time to handle PrimeNG module Angular go through compiler.js and more specially through this function (https://github.com/angular/angular/blob/9e30824ef8d9af87c5c4a4b09bbc42f19ad8f7d5/packages/compiler/src/directive_normalizer.ts#L157)

_normalizeTemplateMetadata(prenormData, preparsedTemplate) { return SyncAsync.then(this._loadMissingExternalStylesheets(preparsedTemplate.styleUrls.concat(preparsedTemplate.inlineStyleUrls)), (externalStylesheets) => this._normalizeLoadedTemplateMetadata(prenormData, preparsedTemplate, externalStylesheets)); }

The problem here, as mentioned by @pgarge, is that UMD file of PrimeNG module has now styleUrls: ['./[name].css']. Which leads Angular to call the next function

SyncAsync.then(this._loadMissingExternalStylesheets(preparsedTemplate.styleUrls.concat(preparsedTemplate.inlineStyleUrls)), (externalStylesheets) => this._normalizeLoadedTemplateMetadata(prenormData, preparsedTemplate, externalStylesheets));

and it tries to retrieve the CSS file through a GET call of localhost:9000/autocomplete.css (for the Autocomplete module for instance).

But the file doesn't exists in our target/www so Angular completely crash/shows a blank page and return us 404 not found localhost:9000/[name].css for every PrimeNG component. And that's it, our application just stopped.

So, we can not migrate to Angular12/PrimeNG12 because we cannot launch our app with the new UMD files.

A workaround is to drop all *.css file called by localhost:9000/[name].css inside our target/www. But we find it to be a bad solution. We will try to overload _normalizeTemplateMetadata to bypass all PrimeNG module but it might not work.

[vzorge]

We are having the same issue. We want to migrate to primeNG for our current APP, which is based on webpack. This issue is causing us to have to reconsider after a succesful POC on version 11. Is there any workaround or update on this?

[krupasodha]

Having same issue while trying to upgrade from PrimeNG 7 to primeNG 12. Our application is using SystemJs. Please suggest some solution/workaround

[HoneyBadgerSeeker]

Is there any workaround or update on this?

You can drop all needed .css from your node_modules/primneg/...to your target/www(for instance when building the application with webpack). This way your application will launch. But it's not a very clean solution.

[krupasodha]

Is there any workaround or update on this?

You can drop all needed .css from your node_modules/primneg/...to your target/www(for instance when building the application with webpack). This way your application will launch. But it's not a very clean solution.

Any idea if PrimeNG is planning to fix this in further release?

[HoneyBadgerSeeker]

Any idea if PrimeNG is planning to fix this in further release?

I don't know, unless you're a paid user, you'll have to wait.

[bart-kors]

I have the same issue can it be solved with a webpack settings?

[HoneyBadgerSeeker]

I have the same issue can it be solved with a webpack settings?

You can use copy-webpack-plugin and copy/past the needed css inside your target/www. You can find copy/past example from node_module here.

[BPattersonRaven]

I also have come across this issue evaluating primeng for our angularjs app that recently has started to transition to Angular.

[Liorkooznits]

Same issue here, using primeng 12.2.3 and angular 12> any update from the library owners?

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,