asp.net core, angular 2, PrimeNG

Question

I use aspnetcore-spa template as starting point to create admin panel. Next I add PrimeNG library to use it's components.

Unfortunately, when I import i.e. ButtonModule to app.module.ts and refresh, I get an error 'Event is undefined'. I can't figure out what is the reason for several days, so can anyone help me?

UPDATE

• So first of all I generate the stub with yo aspnetcore-spa
• Next npm install font-awesome primeng --save

• Then I add font-awesome and PrimeNG css files to webpack.config.vendor.js

   vendor: [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/platform-server',
      'angular2-universal',
      'angular2-universal-polyfills',
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-shim',
      'es6-promise',
      'event-source-polyfill',
      'jquery',
      'zone.js',            
      'font-awesome/css/font-awesome.css',
      'primeng/resources/themes/sunny/theme.css',
      'primeng/resources/primeng.css'
  ]
  

• Rebuild vendor dependencies webpack --config webpack.config.vendor.js

• Then I import ButtonModule to app.module.ts

Now if I start the app I'll get exception

Exception point to this fragment of code

 __decorate([
    core_1.HostListener('mouseenter', ['$event']), 
    __metadata('design:type', Function), 
    __metadata('design:paramtypes', [Event]), 
    __metadata('design:returntype', void 0)

UPDATE 2

I've figured out that problem was in server-side rendering, so I removed it. It works for me, but it is still interesting how to solve this without turning of server-side rendering.

Answer 1

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

<app>Loading...</app>

you need to disable the pre render from the server side, from index.cshtml.

change

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

to

<app>Loading...</app>

Answer 2

According to http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

There are limitations with server-side rendering. Notably, your application code can’t just assume it always runs in a browser. If you try to reference the browser’s DOM directly, you’ll get an error like window is undefined when it runs server-side. Fortunately that’s rarely a problem, because in a well-architected Angular app (or React, etc.), the framework really doesn’t want you to mess with the DOM directly anyway, so you shouldn’t be assuming browser primitives regardless of server-side rendering.

Lookimng at the javascript file in primeng, some control is manipulating the DOM tree

I am using the same template as you, if you do the following, you can keep the

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

The answer is, instead of doing

import { AccordionModule } from 'primeng/primeng';

do

import { AccordionModule } from 'primeng/components/accordion/accordion';
import { BlockUIModule } from 'primeng/components/blockui/blockui';

AccordionModule is dependent on BlockUI if you open accordion.d.ts, so we have to import it as well

It works for me without removing the prerendering

then go to web.config.vendor.js, modify

 module: {
    loaders: [
        { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
        { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
    ]
},

to

 module: {
    loaders: [
        { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
        { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
    ]
},

also in web.config.vendor.js, vendor section, add

'font-awesome/css/font-awesome.min.css',
        'primeng/resources/primeng.min.css',
        'primeng/resources/themes/bootstrap/theme.css',

then open visual studio command prompt, and navigate to the solution path

   webpack --config web.config.vendor.js

However, there are some controls which will still throw an error In this case, no choice but to modify the js file

Answer 3

I found out a solution and got it working on one my pet project.

Just follow these steps (I skip the installation since you've already done that):

1- Add the loader for gif files since they are required in related css files:

loaders: [
    ...
    { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
]

2- Add the styles to your webpack.config.vendor.js:

vendor: [
   ...
   'font-awesome/css/font-awesome.css',
   'primeng/resources/themes/lightness/theme.css',
   'primeng/resources/primeng.css'
]

3- add the modules you want to top of the app.module.ts:

import { AccordionModule } from 'primeng/components/accordion/accordion';
import { BlockUIModule } from 'primeng/components/blockui/blockui';

4- Add it to your imports as well:

imports: [
   UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
   RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'counter', component: CounterComponent },
        { path: 'fetch-data', component: FetchDataComponent },
        { path: '**', redirectTo: 'home' }
    ]),
    AccordionModule
]

And voila...

You can find the working code here.