使用Angular CLI有条件地加载Angular2脚本?

时间:2017-01-19 12:09:14

标签: angularjs angular webpack angular-cli

我可以使用Angular CLI ???

有条件地加载脚本

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

角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"
  }
 ...

2 个答案:

答案 0 :(得分:5)

虽然@yuzuri提出了一个非常好的解决方案 - 它要求你编辑一个不太好的节点模块..

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

您可以编辑&#34;脚本&#34; 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 每个应该有不同的配置 - 在我的例子中,&#34;脚本&#34;部分。

希望在等待正式解决方案时有所帮助

答案 1 :(得分:0)

.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 serve --app = 0

$ ng serve --app 0

使用本地环境提供应用程序:

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