CODEWITHSUNDEEP
angularesbuildangular-elementsangular19
IamCracker
IamCracker

Reputation: 23

Issue with external styles in custom elements after upgrading to Angular 19

Recently I upgraded my project with NX to Angular 19 and encountered an issue with custom elements.

I have 2 apps in my NX monorepo:

  1. App with custom element (Widget);
  2. Playground where the widget is embedded (Playground);

When I'm trying to serve Widget its the styles for components are now being extracted into external files by default, using something called ExternalStylesFeature.

When embedding Widget (main.js on localhost:4100) into a webpage on a different domain (Playground on localhost:4200), it tries to fetch these external styles from the playground's domain rather than the domain hosting the script. This results to Can not get /%hash%.css page and it causes an error for the styles, and the Widget is rendered without them.

In Angular 18, this wasn’t an issue, as styles were either inlined or handled differently.

in Angular v19 it looks like (please, take a look at features prop)

i063.\u0275\u0275defineComponent({
  type: _AppComponent,
  selectors: [["app-root"]],
  features: [i063.\u0275\u0275ExternalStylesFeature(["241c379bb156b1b0663d39081d590a739dbf14c8a7eb7606c4da2ae30c9a61d5.css"])],
  decls: 0,
  vars: 0,
  template: function AppComponent_Template(rf, ctx) {},
  encapsulation: 2,
  changeDetection: 0
});

in Angular v18 it looks like (please, take a look at features prop)

i0.\u0275\u0275defineComponent({
  type: _AppComponent,
  selectors: [["app-root"]],
  standalone: true,
  features: [i0.\u0275\u0275StandaloneFeature],
  decls: 0,
  vars: 0,
  template: function AppComponent_Template(rf, ctx) {},
  styles: ['/* apps/widget/src/app/app.component.scss */\...'],
  encapsulation: 2,
  changeDetection: 0
});

Has anyone encountered something similar, how can I turn it off or learn to live with it?

Upvotes: 0

Views: 43

Answers (0)

Related Questions