Re: Using Lforms with existing angularJs app

[nikhil-ht-el]

I am trying to render the Lforms in the angularJs app. All code works fine giving no any error in the Console. The element also gets rendered in the DOM but the form is not getting rendered. Can you please provide any Demo for integrating the Lforms in the angular js Application.

[plynchnlm]

AngularJS support ended last year. (https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a). Do you mean Angular, or do you really mean AngularJS?

[nikhil-ht-el]

Yes I mean AngularJs not Angular.

[nikhil-ht-el]

I have tried below solution as mentioned in the LHCforms DOC for angularJs https://lhncbc.github.io/lforms/versions/17.x/index.html#usageAngularJS But getting the same issue I have mentioned in the first message.

Do you have any jsfiddle demo for integrating it into AngularJS ? Also what is the last stable version for LHCforms that is supported in AngularJs.

[plynchnlm]

The last AngularJS version we published was 29.3.1. After that, the versions are based on Angular.

We had a numbers of AngularJS apps using LHC-Forms, so I don't think there should be a problem with doing that.

Usually the issue with a form not rendering is a problem with the form definition. I suggest you try a very simple form (just one question) and see if that renders.

I will take a look and see what might serve an an example of an AngularJS app using LHC-Forms.

[plynchnlm]

It looks like I don't have a JsFiddle example, but version 1.3.1 of our lforms-fhir-app application used the AngularJS approach. The app as a whole is more than you want, but an example of the directive being used is at: https://github.com/lhncbc/lforms-fhir-app/blob/91cd6afd05075de7fe4617dc35669dd46bb9b4d9/app/fhir-app/fhir-app-content.html#L77

I think you might also be able to use the non-AngularJS approach (LForms.Util.addFormToPage) even in an AngularJS app. I am not certain of that, at this point.

However, as I said above, the first thing I would advise it is trying a simple form and seeing if you can get that to render. Also try your form at https://lhcforms.nlm.nih.gov/lhcforms and see if it renders okay there and check the console for errors.

[plynchnlm]

You might also look at the test pages of the old AngularJs lforms-- for example: https://github.com/lhncbc/lforms/blob/29.3.1/app/test/directiveTest.html

[nikhil-ht-el]

Okay I am checking this sample projects.

[plynchnlm]

You might also try using LForms.Util.addFormToPage from the latest lforms, which is Angular based, but a webcomponent, so it might work. It is not completely encapsulated though, so it also might not work, but it would be worth trying just to get the latest stuff if you could.

[nikhil-ht-el]

The forms gets rendered properly now. I have added the 'lformsWidget' dependency while instantiating app module. But when I am running the test cases I am getting angular injector error on all the test cases. In the console we are getting error 'Require is not a function' I have added below line in my karma conf ('node_modules/lforms/app/lforms.js')

Can you please provide any sample where test cases are written using angular-js and karma ?

[nikhil-ht-el]

Hi, Why the version > 30 are not published to NPM ? Are you planning to publish them on NPM ? We are trying to Integrate Lforms v>30 in our AngularJS application. In the Documentation they have given using including the script tag only. But How we can integrate it in angularJS project when we download and add it in Lib for production use.

[plynchnlm]

We have not published it to npm because the expected use case for npm is that someone would pull the files into their app with a package bundler (webpack, parcel, etc). But, the web component files we have for versions >= 30 are already bundled, and running them through a bundler a second time can break things. So, it is safer to just include the files with script tags, and in that case npm is not needed.

[plynchnlm]

angular-js and karma ? The old AngularJS version of lforms (<30) has karma tests, but it loads lforms in via bower. https://github.com/lhncbc/lforms/blob/29.3.1/karma.conf.js

[nikhil-ht-el]

Do we have any doc For how we can use the web components (>30) in Angular js application ?

[plynchnlm]

It should be the same as in any other kind of application. https://lhncbc.github.io/lforms/. If you can send a JsFiddle with a simple AngularJs app showing the current version of LForms not working, I will take a look at it.

[plynchnlm]

Closing due to lack of response. Feel free to re-open if you are still having an issue.