Not able to use lform NPM package in angular app.

LHNCBC / lforms

See the project website at http://lhncbc.github.io/lforms/, or view the demo website at https://lhcforms.nlm.nih.gov/lhcforms.

Other

107 stars 56 forks source link

Not able to use lform NPM package in angular app. #123

Closed ddjain closed 9 months ago

ddjain commented 1 year ago

We are using angular Version 14

Trying to use Lform package but its giving lform modules not defined error

Can you please provide steps to Use NPM package in angular.

plynchnlm commented 1 year ago

It's a web component, so the steps for Angular are the same as for any other app: https://github.com/lhncbc/lforms#using-the-lhc-forms-web-component My guess is that you are trying to use require or import on the npm package, which won't work. Instead, just include the files with style & script tags, as documented at the link above.

ddjain commented 1 year ago

We have follows above steps of Readme to integrate Lforms in angular project, Now app has started & Lforrm renders successfully on page , but throwing below error one time in console while app is loading or started 1st time.
Below is SS of Console window when angular app launches

DeepinScreenshot_select-area_20230403171019

Also Tests case fails while running npm run test in our angular app configured with lforms.
Attaching below SS for same, can please provides steps to fix these failures or suppress in our angular application.

DeepinScreenshot_select-area_20230403170312

plynchnlm commented 1 year ago

Thanks for that screenshot. It looks like the karma test is loading a webpack file that contains lformsFHIR.min.js. Please make sure webpack does not pull in the LForms files. Normally for an npm package, you would want that, but the LForms web component is generated by running webpack, so it is already webpacked, and if you pack it a second time things break (at least sometimes). If you want to see an example of an Angular app that uses LForms and that has karma tests (though whether the karma tests exercise LForms, I am not sure), we have one at https://github.com/lhncbc/formbuilder-lhcforms.

johacontrerascloudx commented 1 year ago

We are having the same error 'LForms is not defined' when running the npm run build and trying to access the index.html where we are using the library, we must use it offline (with the dist files pointing locally, not with the external sources and it doesn't work). Is there any way to do it?

plynchnlm commented 1 year ago

I am assuming the "npm run build" you are referring is not the lforms one, but the one in your own project using lforms. Please make sure you are NOT importing lforms, but are including it via script tags as per the note at http://lhncbc.github.io/lforms/#npmInstall. Your script tags can point to your local copy of the lforms files.