typescript - Merk komponent som kun klientside i angular universal

Ved å bruke ASPNet Angular SPA-malen forsøker jeg å importere NGX-Charts, men de fungerer ikke med server-side forhåndsgjengivelse. Så jeg prøver å få dem til å gjengi bare på klientsiden ved å importere NGX Charts-modulen i app.module.browser.ts.

Men jeg får malparsefeil når jeg gjør dette:

Kan ikke binde til 'view' siden det ikke er en kjent egenskap for 'ngx-charts-advanced-pie-chart'.

Finnes det en korrekt måte å merke en komponent på for å kun rendre i nettleseren? Dette ser ikke ut til å være godt dokumentert hvis det finnes.

Alternativt, finnes det en korrekt måte å referere til NGX-Charts på i en Angular Universal-app?

Svar #1

Dette problemet gjelder for enhver tredjepartsmodul som ikke var optimalisert for server-side rendering.

Løsningen er å ekskludere modulen fra app.module.server.ts og i stedet importere en dummy-modul som stubber alle enheter fra den opprinnelige modulen, eller i det minste de som for øyeblikket brukes i applikasjonen:

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

Hvis det finnes tilbydere i bruk som ikke kan importeres fra originale moduler, bør de også stubbes.

Alternativet til falske komponenter og direktiver er å bruke tilpasset skjema. Bruken av NO_ERRORS_SCHEMA er uønsket fordi det også vil undertrykke nyttige feil.

Relaterte artikler