Angular2 load script conditionally using Angular CLI?

Question

Can I load scripts conditionally using Angular CLI???

In this file, I want to load one script depending on the enviroment or a variable. So In production I want to l

Answer 1

While @yuzuri suggested a very eleegnat solution - it requires you to edit a node module which is not a good idea..

Here is simple workaround:

You can edit your "scripts" section under package.json file to have that:

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

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

Then you should rename your angular-cli.json file to angular-cli-dev.json and angular-cli-prod.json Each should have different configuration - in my case, different scripts in "scripts" section.

Hope that helps while we wait for an official solution

Answer 2

The .angular-cli.json supports configuration for multiple apps. Therefore we can put completely different configuration with different scripts/styles for the same app.

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

To serve the default app: $ ng serve --app=0

or

$ ng serve --app 0

To serve the app with local environment:

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