Question

如何有条件地（基于环境）将Angular 2+中包含第三方JS。

我需要包括需要包含脚本的Adobe Analytics。

所包含的脚本应针对登台和生产环境而定，因为URL /代码对于跟踪而言是不同的。

任何建议/帮助将不胜感激。

Answer 1

您可以使用以下代码在文档的script标签中添加新的DOM元素head：

let node = document.createElement('script');
node.src = ...;
node.type = 'text/javascript';
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);

请注意，仅执行一次此代码。（例如，在单实例服务内部）。同时也是检查document是否存在的最佳实践。

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ScriptService {
  constructor() {
    // call once, because of 'providedIn: root' => singleton instance
    if (document && environment.production) {
      // browser platform
      let node = document.createElement('script');
      node.src = 'https://....analytics.js';
      node.type = 'text/javascript';
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }
}

然后，在组件内部注入单例服务：

export class HelloComponent {
  @Input() name: string;

  constructor(
    private scriptService: ScriptService
  ) { }
}

首次实例化组件时，ScriptService也将实例化，但仅实例化一次，并且只有在生产环境下，您的script元素才会被添加到document中

Answer 2

如果您使用的是Angular CLI v 6 and above，则可以使用angular.json中的配置部分为不同的环境加载和替换不同的文件

出于您的目的，创建两个相似的索引文件（如src/index.html），并分别命名为src/index.prod.html和src/index.staging.html

添加 src/index.prod.html

<html>
    <head>
      ...
      <script type="text/javascript" src="//analytics.prod.js"></script>
      ...
   </head>
   ...
</html>

添加 src/index.staging.html

<html>
    <head>
      ...
      <script type="text/javascript" src="//analytics.staging.js"></script>
      ...
   </head>
   ...
</html>

更新 angular.json

...

"configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/index.prod.html"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                },
                {
                  "replace": "src/index.html",
                  "with": "src/index.staging.html"
                }
              ]
            },
...

如何有条件地在angular 2+中包含第三方JS（基于环境）

2 个答案: