How to use PrimeNG with Angular in aspnetcore-spa template

Question

You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(

Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.

Here is what I have done in my current effort (the latest of many, starting fresh each time):

1) Added to the package.json file: "primeng": "4.1.0-rc.2"

2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.

3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):

import { FileUploadModule } from 'primeng/components/fileupload/fileupload';

And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):

<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>

4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.

Then I hit F5 to run the project, and I got this error:

Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->

So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):

import { FileUploadModule } from 'primeng/primeng';

But got the same exact error. What am I missing??? Any help would be most appreciated.

did you added FileUploadModule module inside imports array of metadata option of your AppModule?? like imports: [FileUploadModule, OtherModule] — Pankaj Parkar
I had not, but adding that did not change anything - the same error continues. — JRS
I also tried adding import { FileUploadModule } from 'primeng/primeng'; to the boot-client.ts and the boot.server.ts files, but that also did not help anything. Still the same error. — JRS
Now, without changing anything else, I closed my Visual Studio 2017 instance, re-opened it, rebuilt the application, an then hit F5 again. This time, I got a new error: Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: Event is not defined. Prior research suggests that this may be because PrimeNG does not support server-side rendering. If so, where does that leave me? — JRS
Some success! Based on this SO entry: stackoverflow.com/questions/43442770/…, I changed "asp-prerender-module" on the Index.cshtml page to "asp-ng2-prerender-module", and I see the control now. It seems to need some CSS files, but at least it is present. Of course, I no longer have the server-side rendering, making the builds much slower, and that is not so good. Would love a better solution. — JRS

JRS JRS · Accepted Answer · 2017-06-19T18:49:44

I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:

import { FileUploadModule } from 'primeng/components/fileupload/fileupload';

rather than like this:

import { FileUploadModule } from 'primeng/primeng';

The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341

This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you @pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(

How to use PrimeNG with Angular in aspnetcore-spa template

1 Answers