5

Using the ASPNet Angular SPA Template I'm attempting to import NGX-Charts but they don't work with server side pre-rendering. So I'm trying to make them render client side only by importing the NGX charts module into app.module.browser.ts.

However I'm getting template parse errors when I do this:

Can't bind to 'view' since it isn't a known property of 'ngx-charts-advanced-pie-chart'.

Is there a correct way to mark a component to only render in the browser? This doesn't seem well documented if there is.

Alternatively, is there a correct way to reference NGX-Charts in an angular universal app?

gmn
  • 4,199
  • 4
  • 24
  • 46

1 Answers1

3

This problem is applicable to any third-party module that wasn't optimized for server side rendering.

The workaround is to exclude the module from app.module.server.ts and import a dummy module instead that stubs all units from original module, or at least the ones that are currently used in the application:

@Component({ selector: 'ngx-charts-advanced-pie-chart' })
class DummyAdvancedPieChartComponent {
  @Input('view') view;
}

If there are providers in use that cannot be imported from original modules, they should be stubbed as well.

The alternative to dummy components and directives is to use custom schema. The usage of NO_ERRORS_SCHEMA is undesirable because it will suppress useful errors as well.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Hi @estus, I don't suppose you know of a complete example with NGX charts anywhere, I did this and started getting the message "SVG not found" – gmn Oct 16 '17 at 15:56
  • I'm not sure what this message refers to in your case. I'd suggest to debug the app to the point where it becomes obvious where the message comes from even though the module under discussion was stubbed. Searching for `SVG not found` or `not found` through codebase including node_modules may help. Consider providing http://stackoverflow.com/help/mcve if you can. – Estus Flask Oct 20 '17 at 13:43