Home » Featured, Headline, Software Development

Adding custom libraries in Angular 4 using Angular CLI

20 June 2017 One Comment

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 »

  • Edythe said:

    This is really interesting, You are a very skilled blogger.

    I’ve joined your feed and look forward to seeking more
    of your fantastic post. Also, I have shared
    your site in my social networks!

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*
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