refactor(platform-browser): integrate external component style suppor…

…t into DOM renderer

The DOM renderer will now check for the presence of external runtime style metatadata
within a component type and render the styles via the `SharedStylesHost` if any style
URLs are present. To maintain style ordering, the external runtime styles are added
before any embedded styles from the `styles` metadata field. Currently, all external
runtime styles originate from file-based component stylesheets.

packages/platform-browser/src/dom/dom_renderer.ts

@@ -460,6 +460,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
 
 class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
   private readonly styles: string[];
+  private readonly styleUrls?: string[];
 
   constructor(
     eventManager: EventManager,
@@ -472,10 +473,22 @@ class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
     compId?: string,
   ) {
     super(eventManager, doc, ngZone, platformIsServer);
+
     this.styles = compId ? shimStylesContent(compId, component.styles) : component.styles;
+
+    const externalStyles = component.data['externalStyles'] as string[] | undefined;
+    if (Array.isArray(externalStyles)) {
+      // Add component ID search parameter `component` to support server-side style content shimming
+      this.styleUrls = externalStyles.map(
+        (value) => value + '?component' + (compId ? '=' + encodeURIComponent(compId) : ''),
+      );
+    }
   }
 
   applyStyles(): void {
+    if (this.styleUrls) {
+      this.sharedStylesHost.addExternalStyles(this.styleUrls);
+    }
     this.sharedStylesHost.addStyles(this.styles);
   }
 
@@ -485,6 +498,9 @@ class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
     }
 
     this.sharedStylesHost.removeStyles(this.styles);
+    if (this.styleUrls) {
+      this.sharedStylesHost.removeExternalStyles(this.styleUrls);
+    }
   }
 }