I want to add amcharts to angular-cli.json in my angular 4 cli app

Question

I want to add amcharts to angular-cli.json in my angular 4 cli app

I'm using: angular4, typescript, webpack.

I did: npm install --save amcharts

I now need to add amcharts to my angular-cli.json file but not sure how to exactly.

This is my angular-cli.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/lodash/lodash.js",
        "../node_modules/@agm/core",
        "../node_modules/angular2-google-maps/core",
        "../node_modules/amcharts"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

Answer 1

Usually frameworks like AngularX, React, ... have their own lifecycle. This means that the libraries you are trying to use need to integrate into that lifecycle.

So you can use libraries that provide means which adapt the implementation to Angular, React, ... or you need to create the means to adapt that implementation yourself.

For AmCharts there is a plugin for Angular2 on their GITHUB .

This means that you will need:

1. npm install amcharts/amcharts3 --save
2. npm install amcharts/amcharts3-angular2 --save
3. add each script individually (ending in .js) in order inside scripts
4. Follow each step from their Github page for adding the AmChartsModule to your preferred module and initializing the charts

NOTE: According to AmCharts issue which is still open, they do not provide UMD/AMD support. So these cannot be loaded with import or require and need to be loaded in the proper order.