Angular 4.4.6环境下如何根据生产环境切换外部Script标签？

针对你遇到的场景——在app-root外部有QA环境的script标签，需要在生产环境自动替换成生产地址，确实可以通过.angular-cli.json实现，同时还有几种更灵活的方案，我给你详细拆解：

方案1：直接用.angular-cli.json的环境专属配置 #

Angular CLI 4.x的.angular-cli.json支持为不同环境指定要注入的脚本，步骤很清晰：

1. 先在项目根目录复制一份.angular-cli.json，分别命名为.angular-cli.qa.json和.angular-cli.prod.json。
2. 打开.angular-cli.qa.json，找到apps下的scripts数组，添加你的QA脚本地址：

   "scripts": ["someUrlForQa"]
   

3. 同理，在.angular-cli.prod.json的scripts里替换成生产环境的地址：

   "scripts": ["someUrlForProd"]
   

4. 构建时指定对应的配置文件：
   • 打包QA环境：ng build --qa --config .angular-cli.qa.json
   • 打包生产环境：ng build --prod --config .angular-cli.prod.json
     这样CLI会自动把对应环境的script标签注入到最终生成的index.html里，完全不用手动改模板。

方案2：结合环境变量+index.html条件替换 #

如果想在src/index.html里直观控制脚本显示，这种方式更灵活：

1. 先在environments文件夹的两个环境文件里加个标识：
   • environment.ts（QA/开发用）：

     export const environment = {
       production: false,
       isQAEnv: true
     };
     

   • environment.prod.ts（生产用）：

     export const environment = {
       production: true,
       isQAEnv: false
     };
     

2. 然后在src/index.html里用Angular CLI的模板条件语法：

   <!-- % if environment.isQAEnv % -->
   <script src="someUrlForQa"></script>
   <!-- % else % -->
   <script src="someUrlForProd"></script>
   <!-- % endif % -->
   

3. 构建时指定环境参数就行：
   • QA环境：ng build --env=dev
   • 生产环境：ng build --env=prod
     打包后index.html里的脚本会自动切换成对应环境的版本。

方案3：动态创建脚本（适合复杂场景） #

如果你的脚本需要依赖Angular初始化后的环境，或者要做加载失败处理，可以写个服务动态加载：

1. 先建一个脚本加载服务：

   import { Injectable } from '@angular/core';
   import { environment } from '../environments/environment';
   
   @Injectable()
   export class ScriptLoaderService {
     loadExternalScript() {
       const targetUrl = environment.isQAEnv ? 'someUrlForQa' : 'someUrlForProd';
       const scriptTag = document.createElement('script');
       scriptTag.src = targetUrl;
       scriptTag.async = true;
       // 可以加加载成功/失败的回调
       scriptTag.onload = () => console.log('脚本加载完成');
       scriptTag.onerror = () => console.error('脚本加载失败');
       document.body.appendChild(scriptTag);
     }
   }
   

2. 在app.component.ts的初始化方法里调用：

   import { Component, OnInit } from '@angular/core';
   import { ScriptLoaderService } from './script-loader.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements OnInit {
     constructor(private scriptLoader: ScriptLoaderService) {}
   
     ngOnInit() {
       this.scriptLoader.loadExternalScript();
     }
   }
   

   注意这种方式脚本会被插入到app-root内部的body里，不是外部，但功能上完全能满足需求。

关于.angular-cli.json的可行性 #

再明确回答你的问题：完全可以通过.angular-cli.json实现环境切换脚本，方案1就是最直接的CLI配置方式，优势是不用碰模板文件，CLI会自动处理脚本的注入顺序和打包，适合简单的环境切换场景。

内容的提问来源于stack exchange，提问作者Kraken