Function resolveComponentResources

packages/core/src/metadata/resource_loading.ts:49–115

(
  resourceResolver: (url: string) => Promise<string | {text(): Promise<string>; status?: number}>,
)

 * contents of the resolved URL. Browser's `fetch()` method is a good default implementation.
 */
export async function resolveComponentResources(
  resourceResolver: (url: string) => Promise<string | {text(): Promise<string>; status?: number}>,
): Promise<void> {
  const currentQueue = componentResourceResolutionQueue;
  componentResourceResolutionQueue = new Map();

  // Cache so that we don't fetch the same resource more than once.
  const urlCache = new Map<string, Promise<string>>();

  // Helper to dedupe resource fetches
  function cachedResourceResolve(url: string): Promise<string> {
    const promiseCached = urlCache.get(url);
    if (promiseCached) {
      return promiseCached;
    }

    const promise = resourceResolver(url).then((response) => unwrapResponse(url, response));
    urlCache.set(url, promise);

    return promise;
  }

  const resolutionPromises = Array.from(currentQueue).map(async ([type, component]) => {
    if (component.styleUrl && component.styleUrls?.length) {
      throw new Error(
        '@Component cannot define both `styleUrl` and `styleUrls`. ' +
          'Use `styleUrl` if the component has one stylesheet, or `styleUrls` if it has multiple',
      );
    }

    const componentTasks: Promise<void>[] = [];

    if (component.templateUrl) {
      componentTasks.push(
        cachedResourceResolve(component.templateUrl).then((template) => {
          component.template = template;
        }),
      );
    }

    const styles =
      typeof component.styles === 'string' ? [component.styles] : (component.styles ?? []);
    component.styles = styles;

    let {styleUrl, styleUrls} = component;
    if (styleUrl) {
      styleUrls = [styleUrl];
      component.styleUrl = undefined;
    }

    if (styleUrls?.length) {
      const allFetched = Promise.all(styleUrls.map((url) => cachedResourceResolve(url))).then(
        (fetchedStyles) => {
          styles.push(...fetchedStyles);
          component.styleUrls = undefined;
        },
      );