Angular2 使用 Angular CLI 有条件地加载脚本？答案

【问题标题】：Angular2 load script conditionally using Angular CLI?Angular2 使用 Angular CLI 有条件地加载脚本？
【发布时间】：2017-06-04 03:10:39
【问题描述】：

我可以使用 Angular CLI 有条件地加载脚本吗？？？

在这个文件中，我想根据环境或变量加载一个脚本。所以在生产中我想在开发时加载一个脚本而不是。有没有办法做到这一点？怎么样？

angular-cli.json

...
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.js",
    "../node_modules/web-animations-js/web-animations.min.js",
    <---- LOAD HERE ONE SCRIPT DEPENDING ON ENVIRONMENT OR VARIABLE 
  ],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 ...

【问题讨论】：

标签： angularjs angular webpack angular-cli

【解决方案1】：

虽然@yuzuri 提出了一个非常简单的解决方案——它需要你编辑一个节点模块，这不是一个好主意..

这是一个简单的解决方法：

您可以在 package.json 文件下编辑您的“脚本”部分来获得：

"start": "cp angular-cli-dev.json angular-cli.json && ng serve"

"build": "cp angular-cli-prod.json angular-cli.json && ng build"

然后你应该将你的 angular-cli.json 文件重命名为 angular-cli-dev.json 和 angular-cli-prod.json 每个都应该有不同的配置 - 在我的例子中，“脚本”部分中的不同脚本。

希望在我们等待官方解决方案时有所帮助

【讨论】：

我不想编辑节点模块，所以在官方解决之前，这是简单和实践的。谢谢你们俩！
@Leo，除了您上面提到的那一项之外，是否还需要任何其他更改。我尝试了上述建议，但似乎对我不起作用。
对于 NPM 世界的新手，您可以使用以下命令运行上述脚本 a) npm run-script serve b) npm run-script build

【解决方案2】：

.angular-cli.json 支持configuration for multiple apps。因此，我们可以为同一个应用程序使用不同的脚本/样式进行完全不同的配置。

"apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "local": "environments/environment.local.ts"
      }
    },
    {
      "styles": [
        "styles.css",
        "../node_modules/select2/dist/css/select2.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/select2/dist/js/select2.full.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "local": "environments/environment.local.ts"
      }
    }

要为默认应用提供服务： $ ng 服务 --app=0

或

$ ng serve --app 0

为应用提供本地环境：

$ ng serve --app=1 --env=local --port=8091

【讨论】：