Mark component as clientside only in angular universal

Question

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?

Answer 1

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.