Using javascript class in Angular2

Question

I want to use a native javascript library in my Angular2 project. I built it and created a bundled js file. Now, I need only one class named fhir from this file. I tried to create a new javascript class and create an instance of the fhir class in it. Then, I am calling functions from that instance in my own functions:

/// <reference path='./FhirClient.d.ts' />

import { fhir } from './nativeFhir';

export var FhirClient = (function() {

    function FhirClient(config) {
        this.client = fhir(config);
    }

    FhirClient.prototype.conformance = function(query) {
        return this.client.conformance(query);
    };
    FhirClient.prototype.document = function(query) {
        return this.client.document(query);
    };
    FhirClient.prototype.profile = function(query) {
        return this.client.profile(query);
    };
    FhirClient.prototype.transaction = function(query) {
        return this.client.transaction(query);
    };
    FhirClient.prototype.history = function(query) {
        return this.client.history(query);
    };
    FhirClient.prototype.typeHistory = function(query) {
        return this.client.typeHistory(query);
    };
    FhirClient.prototype.resourceHistory = function(query) {
        return this.client.resourceHistory(query);
    };
    FhirClient.prototype.read = function(query) {
        return this.client.read(query);
    };
    FhirClient.prototype.vread = function(query) {
        return this.client.vread(query);
    };
    FhirClient.prototype.delete = function(query) {
        return this.client.delete(query);
    };
    FhirClient.prototype.create = function(query) {
        return this.client.create(query);
    };
    FhirClient.prototype.validate = function(query) {
        return this.client.validate(query);
    };
    FhirClient.prototype.search = function(query) {
        return this.client.search(query);
    };
    FhirClient.prototype.update = function(query) {
        return this.client.update(query);
    };
    FhirClient.prototype.nextPage = function(query) {
        return this.client.nextPage(query);
    };
    FhirClient.prototype.prevPage = function(query) {
        return this.client.prevPage(query);
    };
    FhirClient.prototype.resolve = function(query) {
        return this.client.resolve(query);
    };

});

And I created a .d.ts file for this class:

import { fhir } from './nativeFHIR';

export declare class FhirClient {
    private client: fhir;

    constructor(config: any);

    conformance(query: any): any;
    document(query: any): any;
    profile(query: any): any;
    transaction(query: any): any;
    history(query: any): any;
    typeHistory(query: any): any;
    resourceHistory(query: any): any;
    read(query: any): any;
    vread(query: any): any;
    delete(query: any): any;
    create(query: any): any;
    validate(query: any): any;
    search(query: any): any;
    update(query: any): any;
    nextPage(query: any): any;
    prevPage(query: any): any;
    resolve(query: any): any;

}

However, I didn't write a .d.ts file for the library I'm using.

When I tried to import my class (FhirClient) in the Angular and call a function from an instance of that class,

    this.client = new FhirClient(env.environment.server.config);
    this.client.search({type: 'Patient', id: 'pa000001'}).then(function (response) {
      console.log(response);
    }, function (error) {
      console.log(error);
    });

It gives ... is not a function error:

This is my first time trying to use a .d.ts file and probably I'm completely using it wrong. Can you help me to use the fhir class from the native library in my Angular project?

Maybe I'm wrong, but I think you should wrap it in IIFE. Currently you do not execute your function: `export var FhirClient = (function() { ... })()`. You forgot `()`. Or your need `new FhirClient()()` — VadimB, Feb 06 '17 at 08:59
@VadimB I tried it like you said, now the error is `__WEBPACK_IMPORTED_MODULE_5__FhirJS_FhirClient__.a is not a constructor` — Bünyamin Sarıgül, Feb 06 '17 at 10:05
Yes, that because you need parameters-less constructor. So this approach is not working here. Try then leave as it was before and add return statement to get your correct cosntructor after import `return FhirClient;`. — VadimB, Feb 06 '17 at 10:23
@VadimB I couldn't understand where to return it. Could you explain it more clearly? — Bünyamin Sarıgül, Feb 06 '17 at 10:35
`export var FhirClient = (function() { ... return FhirClient; })` — VadimB, Feb 06 '17 at 10:37
@VadimB Now it gives `this.client.search is not a function` error again. — Bünyamin Sarıgül, Feb 06 '17 at 10:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134960/discussion-between-bunyamin-sarigul-and-vadimb). — Bünyamin Sarıgül, Feb 06 '17 at 10:54

score 0 · Accepted Answer · answered Feb 06 '17 at 11:00

0

Try this solution, as it works in my case:

Your exported class (yes, you need here IIFE and return class at the end):

import { fhir } from './nativeFhir';

export var FhirClient = (function() {

    function FhirClient(config) {
        this.client = fhir(config);
    }

    FhirClient.prototype.conformance = function(query) {
        return this.client.conformance(query);
    };
    FhirClient.prototype.document = function(query) {
        return this.client.document(query);
    };
    FhirClient.prototype.profile = function(query) {
        return this.client.profile(query);
    };
    FhirClient.prototype.transaction = function(query) {
        return this.client.transaction(query);
    };
    FhirClient.prototype.history = function(query) {
        return this.client.history(query);
    };
    FhirClient.prototype.typeHistory = function(query) {
        return this.client.typeHistory(query);
    };
    FhirClient.prototype.resourceHistory = function(query) {
        return this.client.resourceHistory(query);
    };
    FhirClient.prototype.read = function(query) {
        return this.client.read(query);
    };
    FhirClient.prototype.vread = function(query) {
        return this.client.vread(query);
    };
    FhirClient.prototype.delete = function(query) {
        return this.client.delete(query);
    };
    FhirClient.prototype.create = function(query) {
        return this.client.create(query);
    };
    FhirClient.prototype.validate = function(query) {
        return this.client.validate(query);
    };
    FhirClient.prototype.search = function(query) {
        return this.client.search(query);
    };
    FhirClient.prototype.update = function(query) {
        return this.client.update(query);
    };
    FhirClient.prototype.nextPage = function(query) {
        return this.client.nextPage(query);
    };
    FhirClient.prototype.prevPage = function(query) {
        return this.client.prevPage(query);
    };
    FhirClient.prototype.resolve = function(query) {
        return this.client.resolve(query);
    };

    return FhirClient;
})();

Usage:

this.client = new FhirClient(env.environment.server.config);

answered Feb 06 '17 at 11:00

VadimB

5,533
2
34
48

The last form I tried was that, and it gives `EXCEPTION: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a function` error at `main.bundle.js`. When I looked at the `main.bundle.js` this line is the `this.client = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__nativeFhir__["fhir"])(config);`. It should be the `this.client = fhir(config); ` line at the js file. I think the problem is how I imported the `fhir` class. – Bünyamin Sarıgül Feb 06 '17 at 11:05
How do you import this class? `import {FhirClient} from "...";` ? – VadimB Feb 06 '17 at 11:09
No, I mean how I imported the `fhir` from `nativeFHIR.js`: `import { fhir } from './nativeFhir';` – Bünyamin Sarıgül Feb 06 '17 at 11:11
No, I mean before using `this.client = new FhirClient(env.environment.server.config);` you need to import `FhirClient` first. Do you have this in your imports `import {FhirClient} from "path-to-file";` ? – VadimB Feb 06 '17 at 11:16
Yes, I have imported it. And now, I removed the `import { fhir } from './nativeFhir';` line from the `FhirClient.js`, and instead I added `` to the index.html. Now it worked. But I don't want to import it in `index.html`, I wanted to make it like a seperate module. – Bünyamin Sarıgül Feb 06 '17 at 11:19
`console.log(ftir)` after import will show you maybe you have some problems with path or module – VadimB Feb 06 '17 at 11:22
It has a line `module.exports = fhir;` and two files are in the same folder. Should I use something like `require()` instead of `import {fhir} ...`? – Bünyamin Sarıgül Feb 06 '17 at 11:25
No, you don't. Just print to console this `fhir` after import to be sure it imported successfully. – VadimB Feb 06 '17 at 11:27
It prints `undefined`. – Bünyamin Sarıgül Feb 06 '17 at 11:29
I changed `import { fhir } from './nativeFhir';` to `import fhir from './nativeFhir';` and now it is imported correctly. – Bünyamin Sarıgül Feb 06 '17 at 11:32
Yes, I am confused but happy :) Thank you for all your help! – Bünyamin Sarıgül Feb 06 '17 at 11:33

Using javascript class in Angular2

1 Answers1