include an external Javascript library into an Angular Project Globally & Properly

Question

We often need to use external JS libraries when developing in Angular, So I'm asking today for the cleanest way to do this globally.

Actually I'm trying to include dateFormat JS Library : https://www.npmjs.com/package/dateformat

Question 1: JS libraries are they created with the same architecture or there is more than a method to include them in a project.

Question 2: How to include this specific library globally in my project, can I do something in my app.module.ts to make it usable in all the project?

What I do actually is:

npm install dateformat

And I'm trying to add it simply in one component But I failed with this method:

import * as dateformat from "dateformat";

@Component({
  selector: 'page-notifications',
  templateUrl: 'notifications.html'
})

export class NotificationsPage {

    constructor(){
        console.log("test",dateFormat(new Date(), "dddd, mmmm dS, yyyy, h:MM:ss TT") );
    }

}

Answer 1

The best way to include an external, plain javascript, library is to install it using npm install ... and then add all the .js and .css files (from the node_modules folder) in your angular.json file respectively in the scripts and styles properties. Those scripts and styles will be bundled with your application and in every component you can access the global variables they define.

For example you can npm install jQuery, add it in the angular.json file in the script property like this:

"scripts": ["../node_modules/jquery/dist/jquery.min.js"]

declare it on top like this:

import * as $ from 'jquery';

and then you can use it as you would normally

EXAMPLE

Answer 2

It depends per library how to do it. You can try to see if there is wrapper library for angular. For a global library you can add it to your index.html or to the scripts array of your angular.json .

You can also just use the import like you did, which if the library allows it, is the cleanest way. As far as I can see, the dateformat library is okay, you just need to correct a typo: (dateformat vs dateFormat)

import * as dateFormat from "dateformat";

dateFormat(new Date(), "dddd, mmmm dS, yyyy, h:MM:ss TT")

Answer 3

To achieve expected result, use below option of using npm install @types/dateformat along with dateformat

Issue: Type declarations is possible in TypeScript 2.0 without any tools and just from npm. The @types scope package contains type definitions for external libraries(eg. lodash, jQuery, dateformat) and these type definitions of node allow us to use require which is the global function for dateformat library

Please refer this link for more details http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html https://basarat.gitbooks.io/typescript/docs/types/@types.html

Code for reference:

npm install @types/dateformat --save
npm install dateformat --save

component.ts

import { Component } from '@angular/core'; import {formatDate } from '@angular/common'; import * as dateformat from "dateformat";

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; now = new Date(); result: any = ''; test:any = dateformat;

constructor(){ console.log("test",formatDate(this.now, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530')); this.result = this.test.default(new Date(), "dddd, mmmm dS, yyyy, h:MM:ss TT") console.log("dateformat", this.result); } }

working code sample - https://stackblitz.com/edit/angular-wmxejs?file=src/app/app.component.ts

Note: Included formatDate which is inbuilt and readily available in angular for formatting dates, so simply import from @angular/common(added in above example with sample working code )