thingsboard/ui-ngx/src/app/core/services/resources.service.ts

///
/// Copyright © 2016-2019 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///     http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import { Injectable, Inject, ModuleWithComponentFactories, Compiler, Injector } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ReplaySubject, Observable, throwError } from 'rxjs';

declare const SystemJS;

@Injectable({
  providedIn: 'root'
})
export class ResourcesService {

  private loadedResources: { [url: string]: ReplaySubject<any> } = {};
  private loadedModules: { [url: string]: ReplaySubject<ModuleWithComponentFactories<any>> } = {};

  private anchor = this.document.getElementsByTagName('head')[0] || this.document.getElementsByTagName('body')[0];

  constructor(@Inject(DOCUMENT) private readonly document: any,
              private compiler: Compiler,
              private injector: Injector) {}

  public loadResource(url: string): Observable<any> {
    if (this.loadedResources[url]) {
      return this.loadedResources[url].asObservable();
    }

    let fileType;
    const match = /[.](css|less|html|htm|js)?((\?|#).*)?$/.exec(url);
    if (match !== null) {
      fileType = match[1];
    }
    if (!fileType) {
      return throwError(new Error(`Unable to detect file type from url: ${url}`));
    } else if (fileType !== 'css' && fileType !== 'js') {
      return throwError(new Error(`Unsupported file type: ${fileType}`));
    }
    return this.loadResourceByType(fileType, url);
  }

  public loadModule(url: string, modulesMap: {[key: string]: any}): Observable<ModuleWithComponentFactories<any>> {
    if (this.loadedModules[url]) {
      return this.loadedModules[url].asObservable();
    }
    const subject = new ReplaySubject<ModuleWithComponentFactories<any>>();
    this.loadedModules[url] = subject;
    if (modulesMap) {
      for (const moduleId of Object.keys(modulesMap)) {
        SystemJS.set(moduleId, modulesMap[moduleId]);
      }
    }
    SystemJS.import(url).then(
      (module) => {
        if (module.default) {
          this.compiler.compileModuleAndAllComponentsAsync(module.default).then(
            (compiled) => {
              try {
                compiled.ngModuleFactory.create(this.injector);
                this.loadedModules[url].next(compiled);
                this.loadedModules[url].complete();
              } catch (e) {
                this.loadedModules[url].error(new Error(`Unable to init module from url: ${url}`));
                delete this.loadedModules[url];
              }
            },
            (e) => {
              this.loadedModules[url].error(new Error(`Unable to compile module from url: ${url}`));
              delete this.loadedModules[url];
            }
          );
        } else {
          this.loadedModules[url].error(new Error(`Module '${url}' doesn't have default export!`));
          delete this.loadedModules[url];
        }
      },
      (e) => {
        this.loadedModules[url].error(new Error(`Unable to load module from url: ${url}`));
        delete this.loadedModules[url];
      }
    );
    return subject.asObservable();
  }

  private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> {
    const subject = new ReplaySubject();
    this.loadedResources[url] = subject;
    let el;
    let loaded = false;
    switch (type) {
      case 'js':
        el = this.document.createElement('script');
        el.type = 'text/javascript';
        el.async = true;
        el.src = url;
        break;
      case 'css':
        el = this.document.createElement('link');
        el.type = 'text/css';
        el.rel = 'stylesheet';
        el.href = url;
        break;
    }
    el.onload = el.onreadystatechange = (e) => {
      if (el.readyState && !/^c|loade/.test(el.readyState) || loaded) { return; }
      el.onload = el.onreadystatechange = null;
      loaded = true;
      this.loadedResources[url].next();
      this.loadedResources[url].complete();
    };
    el.onerror = () => {
      this.loadedResources[url].error(new Error(`Unable to load ${url}`));
      delete this.loadedResources[url];
    };
    this.anchor.appendChild(el);
    return subject.asObservable();
  }
}