Menu
Nadzweb.com
Nadzweb.com

Adding custom libraries in Angular 4 using Angular CLI

Posted on June 20, 2017June 20, 2017 by admin

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();

1 thought on “Adding custom libraries in Angular 4 using Angular CLI”

  1. Edythe says:
    September 12, 2017 at 8:50 am

    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!

    Reply

Leave a Reply Cancel reply

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

Tags

.htaccess angular angular2 angular2-pipes angular4 angularjs apache bigdata blockchain children codeigniter computer graphics ethereum flot flot charts funny hadoop http javascript jquery kanban lena linux love math mathematics microsoft misc node js php phpframework php frameworks postgres pun-intended python react sass scrum scss silverstripe software ssl story valentines day wordpress

Archives

Recent Posts

  • Install only Postgres client 11 on Ubuntu 18.04
  • PostgreSQL – Granting access to users
  • Querying JSONB Postgres fields in SQLAlchemy
  • Angular – Writing unit tests for setTimeout in functions
  • Angular 6 – getting previous url from angular router
©2021 Nadzweb.com | Powered by WordPress & Superb Themes