Charts are not rendering in console when Integrating angular2 universal with interactive charts - primeng

[vinodbhargava]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
• [X ] bug report
• feature request
• support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this pull-request
• express-engine
• grunt-prerender
• gulp-prerender
• hapi-engine
• preboot
• universal-preview
• [ X] universal
• webpack-prerender
• Do you want to request a feature or report a bug?
  bug
• What is the current behavior?
  Charts are getting rendered in UI, but server rendering is giving exception as below
  EXCEPTION: Error in ./LineChartDemoComponent class LineChartDemoComponent - inline template:1:2
ORIGINAL EXCEPTION: ReferenceError: Chart is not defined
ORIGINAL STACKTRACE:
ReferenceError: Chart is not defined
  at UIChart.initChart (D:\Development\Angular2\2016_06_22\Universal-Starter\node_modules\primeng\components\chart\chart.js:41:26)`
• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

1. Cloned angular2-universal starter
2. installed primeng modules using below commands -
   npm install primeui --save
npm install primeng --save
npm install chart.js --save
3. Created new component LineChartDemoComponent.ts
   import {UIChart} from 'primeng/primeng';
import {Component} from '@angular/core';

@Component({selector: 'line-chart-demo-universal',
template:

Line Chart Demo

<p-chart type="line" [data]="data"> ,``
directives:[UIChart]
`})`
`export class LineChartDemoComponent {`
`data: any; `
`options: any;`

`constructor() {`
    `this.data = {`
        `labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],`
        `datasets: [`
            `{`
                `label: 'First Dataset',`
                `data: [65, 59, 80, 81, 56, 55, 40]`
            `},`
            `{`
                `label: 'Second Dataset',`
                `data: [28, 48, 40, 19, 86, 27, 90]`
            `}`
        `]`
    `}`

    `this.options = {`
        `title: {`
            `display: true,`
            `text: 'My Title',`
            `fontSize: 16`
        `},`
        `legend: {`
            `position: 'bottom'`
        `}`
    `};`
`}`

}
4. Used the above component in app component

1. deployed the application.
2. On UI chart is getting generated and rendering properly, but on server it is giving the exception -
   

• What is the expected behavior?
  Plain HTML with chart contents should be rendered on server.
• What is the motivation / use case for changing the behavior?
• Please tell us about your environment:
• Angular version: 2.0.0-rc.1
• Browser: [all ]
• Language: [TypeScript 1.8.9 ]
• OS: [Windows ]
• Platform: [NodeJs]
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[MarkPieszak]

I think the problem here will be that Chart manipulates the DOM directly & also attaches itself to the window. I'm not sure how this could be implemented to be used w/ Universal, but it does seem pretty important that it does.

window.Chart = module.exports = Chart;

[vinodbhargava]

@MarkPieszak so does this means we cannot render charts using universal or it is specific to chart.js only?

[jeffwhelpley]

@vinodbhargava it depends on how you are generating a chart. Currently, Universal on the server side doesn't work with any jQuery or browser-specific libraries. If you can generate the charts in a headless fashion via a normal node.js library then it could work, BUT just be aware that this type of resource intensive job would cause issues with scalability on your web server. For the near term, I suggest only doing charts on the client side. In the long term once #512 is implemented, you will be able to "prerender" pages with charts on the server.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}