Error using run build

[DaniArj1980]

Hi, From what I understand I have to follow this series of steps to be able to use the lforms package.

When running npm run build, I get the following error:

[email protected] build:version C:\Curso\Angular\lforms node -e 'require("fs").writeFileSync("src/version.json", JSON.stringify({lformsVersion: require("./package.json").version}))'

'require(fs).writeFileSync(src/version.json, ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Invalid or unexpected token at new Script (vm.js:102:7) at createScript (vm.js:263:10) at Object.runInThisContext (vm.js:311:10) at internal/process/execution.js:77:19 at eval-wrapper:6:22 at evalScript (internal/process/execution.js:76:60) at internal/main/eval_string.js:23:3

I am using node js 20, I don't know if that is the reason. Could you help me?

Greetings, thank you

[plynchnlm]

We build lforms on Linux, so probably the issue is that there is something platform-specific in our build scripts. It looks like some issue with quotation marks. Anyway, are you trying to modify lforms? If you just want to use it, you can either you "npm install lforms" or download pre-built versions directly from https://lhcforms-static.nlm.nih.gov/lforms-versions/ (and note that there are zip files there, and that the latest version is currently 35.0.3).

[DaniArj1980]

Thank you very much, our idea is to import functionalities to store, modify and send responses to questionnaires on a FHIR server, as well as display them on the frontend. Something similar to the Form Builder option in the demo. Would it be possible? By running "npm install lforms" and importing the component, we could use the functions described at http://lhncbc.github.io/lforms/

Greetings, thank you

[plynchnlm]

Yes, either by installing or downloading, or linking to the lforms-static website files above, you can use lforms without buliding it. However, "importing" it won't work. Just link to the files via script/link tags (as documented at http://lhncbc.github.io/lforms/#installation). For a simple example, see https://jsfiddle.net/lforms/8f754jhy/44/ .

[DaniArj1980]

Hello,

Running the "npm install lforms" command in a new project. Defining the following code in Angular in app.component.ts.

.

I am invoking the script with the libraries in the html.

This way I can't use the functions with LForms or I have skipped some import or configuration step.

Greetings, thank you

[plynchnlm]

Can you be more specific about what is going wrong? Are you getting an error somewhere?

I see you are pulling the files from the clinicaltables website as in the demo, which is fine. However, in that case you don't need to run "npm install lforms".

[DaniArj1980]

Our problem is that we want to create an Angular project which uses part of the lforms functionality, do we need to make calls like, for example, LForms.Util.addFormToPage(fhirQ, 'formContainer'); We can't get it to recognize LForms to be able to invoke the call. We don't know what steps to follow or if we can use part of the functionality in our project.

Greetings, thank you

[plynchnlm]

Yes, that is the API to use. I am not sure why you cannot access LForms. Are the scripts loading successfully? Do you have access to the "window" object? If so, window.LForms should work.

[plynchnlm]

A suggestion from a team member: add "declare var LForms: any;"

Also, you might take a look at the https://github.com/lhncbc/formbuilder-lhcforms (the NLM Form Builder) project, which is an Angular app that uses LForms. It is not a simple example to look at, though. (src/app/services/fetch.service.ts:12:declare var LForms: any;)

[DaniArj1980]

Hello,

• Adding "declare var LForms: any;" It does not work since it does not interpret LForm as being of type lform and does not have access to its functionality.
• This other project https://github.com/lhncbc/formbuilder-lhcforms also gives me errors when mounted on Windows.

The process I follow is to create a new project called ejemploFormulario3:

PS C:\Curso\Angular> ng new ejemploFormulario3 --standalone=false

I create a new component:

PS C:\Curso\Angular\ejemploFormulario3> ng generate component mi_componente.

The created html file is as follows:

The created ps file is as foollows:

I understand that it would not be necessary to execute run install lform since it is bringing it from the

If not, I have done it in another project and it still does not identify Lforms.

I have run it commenting that line and it works correctly.

I don't know if any more steps are necessary or if there is another option that could work.

Greetings, thank you.

[akanduru]

I don't see LForms declaration in MiComponenteComponent. It needs to be declared where you are using it.

[DaniArj1980]

Hello,

If I declare it inside the typescript file. It compiles for me, but it doesn't do anything because it can't find that function.

[akanduru]

I would remove LForms variable from constructor and add declare var LForms: any; right after import statements at the top.

Would you verify if you can access LForms object and its properties from browser console after you load the page?

[DaniArj1980]

I have made the following change:

And in the browser console the following is displayed.

[plynchnlm]

Is your app code being injected into the page before the lforms script tags, or after?

[DaniArj1980]

He does it like this.

I don't know if you mean if it does it in the head or in the body, I have tried loading it in the head and it gives the same result.

[plynchnlm]

I am not seeing your app code in that screen shot of the page. You should be able to see where it shows up in the developer tools.

[akanduru]

That looks like LForms is not loaded. It could be due to that LForms reference error.

Comment out line LForms reference at line 35 and see if you can access LForms object in console. If you can, it probably means that you are accessing LForms, before it is loaded?

[plynchnlm]

If you can, it probably means that you are accessing LForms, before it is loaded?

Yes, I was thinking the same thing. That is why I was asking where the script tag for the application code is relative to the script tags for lforms. That might only be visible through the developer tools.

[DaniArj1980]

Would this capture work for you or what do you need?c

After commenting on the line you mentioned, it shows the following,

And the console doesn't allow access either.

[plynchnlm]

That is not valid HTML -- you can't have an "html" tag inside "body", unless it is coming from an iframe. Also, I don't see the script tags for lforms anywhere. I guess they were stripped out by the build process.

[plynchnlm]

Although I think there must be some way to get the script tags included in your output, you might find it easier to use our lforms-loader package (npm install lforms-loader), documented at https://github.com/lhncbc/lforms-loader. You call it from your app to put the lforms scripts tags onto the page, and then it returns a promise that resolves when the files are loaded. It introduces a slight delay in loading the lforms files, because it has to wait for your app to starting running before it can starting loading lforms. So, I think the script tags are better, but evidently that will require some investigation into how to add scripts tags to angular app.

[DaniArj1980]

Hello, I've gotten the code to work, but it doesn't run until after loading the index page.From the console you can see that you can now access the library.

And it will also be a problem not being able to autocomplete to know the functions that LForms contains. If I copy the files that I am bringing with the script, would I have access to the library when developing?

[plynchnlm]

You should only use the functions that are documented at http://lhncbc.github.io/lforms/index.html. The others are internal and might change. There are only a few of them.

[DaniArj1980]

Hello,

I wanted to make a query, I managed to paint a form of my own by invoking the function LForms.Util.addFormToPage(fhirQ, 'formContainer');

It shows me the following:

It would be very complex or if possible, modify the display style format. Would I have to modify the lforms libraries or can it be done from the component of my own application?

[plynchnlm]

That depends on what you want to change. The tree lines on the side can be turned off with an option to "addFormToPage" -- you can pass in any of the "templateOptions" listed in https://github.com/lhncbc/lforms/blob/master/form_definition.md. Also, you should be able to override the styles with CSS from your app.

[annabel-uzl]

@DaniArj1980 How did you get it to work? LForms is recognized in my console, but I get all sorts of errors I tried putting the scripts in my index.html or directly in the html of the component I want to show but none of it works. I put the js files in assets and in tsconfig.json i set allowJs to true

[annabel-uzl]

EDIT: I removed the loading of the scripts from index.html and did this dynamically in the component. This resolved all but one of my errors but I don't see any form (nothing in the html - probably due to the error I cannot seem to resolve)

[plynchnlm]

I see you've written your own code to load lforms dynamically. I just want to mention again here the we do have an "lforms-loader" package (npm install lforms-loader), documented at https://github.com/lhncbc/lforms-loader, that does basically the same thing as your code, and returns a promise. The lforms-loader package is being used by several of our websites.

[DaniArj1980]

Hi,

In the package.json file change:

"build:version": "node -e 'require("fs").writeFileSync("src/version.json", JSON.stringify({lformsVersion: require("./package.json" ).version}))'"

by:

"build:version": "echo {"version": "${npm_package_version}"} > ./src/assets/version.json",

Thus, it would compile perfectly, but if what you want is to use the formbuilder, download the git: https://github.com/lhncbc/formbuilder-lhcforms.git.

Compile it following the instructions and replace the line that exists in package.json that is incorrectly parsed with this:

"create-version-file": "echo {"version": "${npm_package_version}"} > ./src/assets/version.json".

[annabel-uzl]

Thanks @plynchnlm for repeating using lforms-loader. This worked!