How to implement correctly own javascript library, angular 4

Question

I want to implement my own javascript library in an andular4-cli project. Because its my own library, its not possible to include the library with npm.
tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

I implemented the library in angular.cli.json

"assets/myownlib.js"

The component i want to use the library:

import { Component, OnInit } from '@angular/core';
import {DataService} from './tempdatagia.service';
import {MyLib} from '../../assets/myownlib';



@Component({
  selector: 'app-paho',
  templateUrl: './paho.component.html',
  styleUrls: ['./paho.component.css']
})
export class PahoComponent {
  // Create a client instance
  client: any;

  constructor(private tempdata: DataService) {



    this.client = new MyLib.MQTT.Client('wpsdemo.gia.rwth-aachen.de', 8080,  'Steffen');

    this.onMessage();
    this.onConnectionLost();
    // connect the client
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }
 .
 .
 .
}

ERROR
in line import {MyLib} from '../../assets/myownlib';:
"allow js is not set"

"cannot find namespace 'MyLib'."

Steffn · Accepted Answer · 2017-12-06T14:58:40.277

I want to answer my question, how to generally export his own JavaScript lybrary in an angular 4 project. This is maybe only one solution of hundreds to include his own JavaScript library, but in my opinion this is the easiest and fastest one.
Generally, if you want to use an JavaScript library in angular 4, you will mostly need a yourlib.d.ts file. There are some posibilities to do it without, but for me none was working!
So you have to create your yourlib.d.ts file to use it to provide typescript type information about an API that's written in JavaScript.

For more information about ".d.ts"

To create your ".d.ts" File you have to define all your functions and method from the JavaScript library in your ".d.ts" File. Just search them by hand and declare them in your ".d.ts" File.
Your declaration should be look like (excerpt from mine):

export declare namespace MyLib {
    export namespace MQTT {
        export class Client {
            geosubscribe(topicfilter: string, temporalfilter: string, spatialfilter: string, spatialrelation: string, subscribeOptions: Object): void;
            geounsubscribe(topicfilter: string, temporalfilter: string, spatialfilter: string, subscribeOptions: Object): void;
            send(message: Message): void;
            geosend(message: Message): void;

     export class Message {
            constructor(payload: any);
            payloadString: string;
            geometry: string;
            timestamp: string;
        }
export class WireMessage {
            encode(): ArrayBuffer;
            decodeMessage(input: ArrayBuffer, pos: number): Array<any>;
            writeUint16(input: number, buffer: ArrayBuffer, offset: number): number;
            writeString(input: string, utf8Length: number, buffer: ArrayBuffer, offset: number): number;
            readUint16(buffer: ArrayBuffer, offset: number): number;
            encodeMBI(num: number): Array<any>;

        }
    }
}

Aleksei Baryshnikov · Answer 2 · 2017-12-04T16:12:17.583

0

Look at your lib code. Did you use it like a module?

const someLib = function(){}
module.exports = someLib;

Next, look at path in angular cli. I think that it has to be "../assets....".

If you are using it with typescript i think you wrote wrong path or your typescript code is incorrect. What is in your lib?

edited Dec 04 '17 at 16:12

answered Dec 04 '17 at 16:01

Aleksei Baryshnikov

11
1
4

"assets" or "../assets" doesn't matter, there is no difference. My lib is working... Its just another library, which i already implemented over npm with a few little modifications! My question is more bout how to generally implement own js librarys. The path is correct, no ERROR about the path... – Steffn Dec 04 '17 at 16:18
Did you try to import compiled .js file from .ts? – Aleksei Baryshnikov Dec 04 '17 at 16:36
By changing the ending of the myownlib,js file to .ts! – Steffn Dec 04 '17 at 16:40
You import compiled .js file, look at the error. If you compiled it without angular it will be in es5 standart. Without module declaration and this why you got error. Webpack and nodejs work with module pattern. And look at your angular config. You didnt allow importing native js. – Aleksei Baryshnikov Dec 04 '17 at 16:50
tsconfig.json: "allowJs": true (above in my question), but it didn't worked. And i compiled it with angular... – Steffn Dec 04 '17 at 16:56
Yeah that strange. Have to read docs. But anyway. Error '... is not a module' told you that your js file has no modules.exports = ... https://nodejs.org/api/modules.html#modules_exports – Aleksei Baryshnikov Dec 04 '17 at 17:03
You may rerwrite it as ts, as nodejs module. By the way, why you didnt init npm package? That is very simple. But you anyway have to write it with module pattern. – Aleksei Baryshnikov Dec 04 '17 at 17:06
You were right, i missed to export something in my library!!! But now i get the ERROR: Cannot find namespace "MyLib".... – Steffn Dec 04 '17 at 17:27
Any idea how to generally implement a javascript libraray? – Steffn Dec 04 '17 at 17:40
If you want to do it correctly - create npm package with your lib. Read this for learn about packages https://docs.npmjs.com/how-npm-works/packages and read this for learn how you can create npm package https://docs.npmjs.com/misc/developers After you read you can use your own library like present here https://www.thepolyglotdeveloper.com/2017/03/javascript-libraries-in-a-typescript-application-revisited/ – Aleksei Baryshnikov Dec 04 '17 at 18:34
"../assets....". is not working...it has to be "assets/....". In angular 4 – Steffn Dec 07 '17 at 09:40

How to implement correctly own javascript library, angular 4

2 Answers2