Mark component as client only in angular universal

Question

Using ASPNet Angular SPA Template I am trying to import NGX diagrams, but they do not work with server side pre-rendering. Therefore, I try to make them visualization only on the client side by importing the NGX chart module in app.module.browser.ts.

However, I get template analysis errors when I do this:

Cannot associate with 'view', because this is not a known property of 'ngx-charts-advanced-pie-chart'.

Is there a correct way to mark a component for visualization only in a browser? This does not look well documented, if any.

Alternatively, is there a proper way to reference NGX diagrams in a universal Angular application?

Answer 1

This issue applies to any third-party module that is not optimized for server-side rendering.

The workaround is to exclude the module from app.module.server.tsand instead import a dummy module that drowns out all the units from the original module, or at least those currently used in the application:

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

If there are vendors that cannot be imported from the source modules, they must also be drowned.

An alternative to dummy components and directives is to use a custom schema . Use is NO_ERRORS_SCHEMAundesirable as it also suppresses useful errors.