Adding custom libraries in Angular 4 using Angular CLI

Angular CLI is a build tool developed mainly for Angular applications.

Below is an example of adding a third party library within Angular apps.
As you can see, I use the moment, moment-locale, lodash and auth0 as external script libraries.
These get built into scripts.js file.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "favicon.png"
      ],
      "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/hammerjs/hammer.min.js",
        "./../node_modules/moment/min/moment.min.js",
        "./../node_modules/moment/locale/en-nz.js",
        "./../node_modules/lodash/lodash.min.js",
        "./../node_modules/auth0-js/build/auth0.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

In the src/typings.d add the following.

declare var moment: any;
declare var _: any;

Now moment and _ are available to be used in your Angular TS code.

In any component, just use the library as follow.

// use moment library
const today = moment().toDate();
One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image