angular - 在 Angular2 服务中包装外部脚本

Question

我有一个 angular-cli生成的项目，我想与 deployd 一起使用后端。 Deployd 提供了一个脚本来访问它的 API，可以从 http://<deployd-host>/dpd.js 加载它。 .这将创建一个全局 dpd可以从 javascript 全局上下文(例如从 Chrome 开发工具控制台)访问 API 的对象。

我想将它包装在一个 Angular2 服务中，这样我就可以注入(inject)一个模拟服务来进行测试等。任务是从 URL 加载脚本，然后获得对全局 dpd 的访问权限。目的。我看过 this所以发布但无法获得公认的工作答案。如果我手动将脚本添加到 document对象，我无法访问 window 上的 dpd 对象.

此外，加载脚本的 URL 将根据环境而有所不同，例如http://localhost:3000/dpd.js对于本地开发人员，http://dev.example.com/dpd.js用于分期和 http://www.example.com/dpd.js用于生产。所以理想情况下，我也可以在服务中配置它。

寻找类似下面的东西。

@Injectable()
export class DpdService {
  constructor() {
    if (getEnvironmentSomeHow() == 'development') {
      loadScriptFrom("http://localhost:3000/dpd.js");
    } else {
      loadScriptFrom("http://dev.example.com/dpd.js");
    }
    dpd = window.dpd;
  }

  public session(): Observable<Session> {
    return Observable.fromPromise(dpd.sessions.get());
  }
}

Answer 1

应用环境完全取决于开发者的选择。这些可以是有条件地包含依赖于 Node 环境变量的 TS 文件。它可以是根据客户端全局变量定义 Angular 提供程序的单个文件(可能随 Webpack DefinePlugin 或 EnvironmentPlugin 一起提供，例如参见 angular2-webpack-starter)。在其最简单的形式中，它只是客户端全局 ENV 变量，所有决定都是就地做出的 - 它甚至可以通过服务器端模板在 HTML 中设置:

<script>
   window.ENV = <% SERVER_SIDE_ENV_VARIABLE %>
</script>

由于脚本应该在应用程序初始化时加载，因此必须在 APP_INITIALIZER multiprovider 中加载:

...
import {APP_INITIALIZER} from '@angular/core'
import {DOCUMENT} from '@angular/platform-browser'

@Injectable()
export class DpdService {
  dpd: any;

  constructor(@Inject(DOCUMENT) document: Document) {}

  load() {
    const srcBase = window.ENV === 'dev'
      ? 'http://localhost:3000/'
      : 'http://dev.example.com/';

    const script = this.document.createElement('script');
    this.document.body.appendChild(script);

    return new Promise((resolve, reject) => {
      script.onload = resolve;
      script.onerror = reject;
      script.async = true;
      script.src = srcBase + 'dpd.js';
    }).then(() => {
      this.dpd = window.dpd;
    });
  }

  session(): Observable<Session> {
    return Observable.fromPromise(this.dpd.sessions.get());
  }
}

export function dpdAppInitializerFactory(dpdService: DpdService) {
  return () => dpdService.load();
}

...
providers: [
  DpdService,
  {
    provide: APP_INITIALIZER,
    useFactory: dpdAppInitializerFactory,
    deps: [DpdService],
    multi: true
  }
],

...

在应用程序初始化时，load 方法的 promise 得到履行，dpd 属性被设置。