Angular and Smart on FHIR client

[rampratapa]

Good evening, I am trying to test SMART on FHIR app using Angular. I have installed fhirclient using npm with the following command "npm i fhirclient" it installed the package and added "fhirclient": "^2.4.0" to package.json however it shows an error indicating "unknown word fhirclient" . Now when I try to access it using FHIR.SMART.SMARTClient, it says, there is no namespace FHIR

I tried to import using import FHIR, { AbortController } from "fhirclient" and it is erroring out.

Can any one help or point me to sample code to invoke from Angular typescript.

Thank you for your help.

Thanks Ram

[brianpos]

I threw together a codesandbox demonstrating this. https://codesandbox.io/s/demo-angular-fhirclient-rlnhzp

Main tricks were that I needed to have this in my tsconfig's compilerOptions

"esModuleInterop": true,

Then rest just worked as I expected.

[rampratapa]

@brianpos, Good evening, Thank you for the sample code and quick response. I tried with the following version of Angular.

"@angular/animations": "^14.0.0", "@angular/common": "^14.0.0", "@angular/compiler": "^14.0.0", "@angular/core": "^14.0.0", "@angular/forms": "^14.0.0", "@angular/platform-browser": "^14.0.0", "@angular/platform-browser-dynamic": "^14.0.0", "@angular/router": "^14.0.0",

it is still giving me an error while importing fhirclient.

(alias) function FHIR(req: IncomingMessage, res: ServerResponse, storage?: fhirclient.Storage | storageFactory): fhirclient.SMART (alias) namespace FHIR import FHIR "FHIR": Unknown word.cSpell

I have added the following in tsconfig "esModuleInterop": true,

it is not able to recognize client because of error during import.

Is there any difference we need to take care of angular 12 vs 14?

Thank you for your help.

Thanks Ram

[vlad-ignatov]

Re "FHIR": Unknown word.cSpell - that is not an error. It is because you have cSpell (Code Spell Check) extension installed. It will not recognize things like "fhir" or "fhirclient" as valid english words. You can either ignore that or add those words to the dictionary.

[rampratapa]

@vlad-ignatov, @brianpos , Thank you. it is working now. I really appreciate your help. I can continue my research.

Thank you Ram

[rampratapa]

@vlad-ignatov @brianpos , thank you for your help. I was able to access FHIR server and now I am trying to work SMART on FHIR and found the following challenge. As per the document the launch page will have the following

import FHIR from "fhirclient" FHIR.oauth2.authorize({ "client_id": "my_web_app", "scope": "patient/*.read" });

and index page the following code import FHIR from "fhirclient" FHIR.oauth2.ready() .then(client => client.request("Patient")) .then(console.log) .catch(console.error);

when I do that I am getting the following error

core.mjs:7640 ERROR Error: Uncaught (in promise): Error: No state found! Please (re)launch the app.

other questions are:

1) How can I get the client so that I can use that for different purposes like getting Patient details, Encounter details using different search queries. something like if I have a wrapper class that has a variable _smartClient , I wanted to assign the client and use it as singleton to call FHIR serve r FHIR.oauth2.ready().then( this._smartClient => FHIR.client(FHIR.oauth2.options.refreshTokenWithCredentials)).

2) will the current fhirclient handles token refresh automatically or do we need to write any wrapper, if so, is there any sample code.

How can we get state details from fhirclient.

Please let me know if yo need more details.

Thank you for your help.

Thanks Ram

[vlad-ignatov]

Error: No state found! Please (re)launch the app means that your access token has expired. It is typically short-lived and once it expires you have to re-launch. However, if your client has a refresh token, the library will use it in such cases and obtain new access token under the hood.

In other words, the answer to this and all your other questions is in the scopes you have been granted. For example, to get a refresh token request the offline_access (or online_access) scope, to enable the encounter API request the launch and/or launch/encounter scope (not all EHRs support that) and so on. See http://www.hl7.org/fhir/smart-app-launch/scopes-and-launch-context.html

[vlad-ignatov]

Feel free to reopen if you have further issues.