Dynamically create forms from JSON Schema [Angular 8] - javascript

I'm struggling with creating dynamically forms from JSON Schema in Angular 8. I found some libraries for that, but one is very old (last commit ~2 yr ago) and fork of it from this year.
I don't want to use first one, because it's deprecated with angular 8, so my choise was the second one. I have trouble because this project isn't on any npm repositories, only on github. I downloaded it form git like this:
npm i rhalff/angular2-json-schema-form#angular-8
When I started to build my project with this dependency and after attach the import into app.module.ts the result is like this:
ERROR in src/app/app.module.ts:20:65 - error TS2307: Cannot find module 'angular2-json-schema-form'.
I found that in node_module there isn't any src or dist folder and then I looked into github projecet and I found that in /.npmignore there is a src.
I have a some solution about that, but it's not the final one and I think is really bad idea.
I will locally clone git repository, next then build it with npm run build and then npm link
and then npm link <someName> in project catalog.
Can anyone know is there any solution of this problem or maybe someone can suggest me any other libraries for converting JSON Schema for Angular 8 forms?


You may consider using Formly which support json-schema and it provides a bunch of examples to get started https://formly.dev/examples/advanced/json-schema


You can use dynamic-form-schema. It is completely schema based and provide options to add validations, conditional validations and drop down conditional option in the schema.
For more details, check link: Rapid Angular Reactive Form Component Development Based on a Schema

Related

Advice for internal npm packages pulled into git repo

we're working through a setup at my work and I want to see if anyone has any advice/best practices for what we're doing here.
We have code in a git repo for our ui library that produces an npm package (in an internal private registry). That package then gets pulled into the git repos for each of the main products. The question is about versioning the package.
Because we're going from a parallel dev process (git) to linear package versions, which then gets pulled back into another parallel dev process (product git repos), there's an opportunity for code from the library to be accidentally released to production:
Change A is made to the library, produces v1.0
Change B is made to the library, produces v1.1
The library version in a product is updated to v1.1 to access Change B
Product change, and v1.1, is released; Change A in v1.0 is accidentally included
Does anyone have any advice, best practices, or alternate workflows we could keep in mind? The main thing is, we want the UI library stored in one repo but able to be pulled into multiple other repos.
Thank you!

How could I show current GIT branch in my Vue 3 Web application

I like to have a visual cue of the current GIT branch I am working on and have that set up in my IDE (I currently use VIM but I know VSCode also does this). I like/need it so much that I would really also like to see it in my development build when serving locally.
I currently do this manually with a label that I update by hand each time I create a new branch to work on. However, I often forget to do this and subsequently confuse myself.
I'm wondering whether it would be possible to pull this information from GIT and show it in my UI in the same way VSCode does?
Specifically I am using Vue 3 and Typescript but I guess that is not super relevant to the general problem.
Anyone have a feel of how you would do this?

If you are using Webpack as a bundler, there is a git-commit-info-webpack-plugin which can write some Git info (branch name, last commit date/hash/author) into a json file on each build.
Just import the json file into your app and use it....

Get package.json of package using HTTP from public repositories

Maybe this question has already been asked but after a bit of googling I haven't found anything reasonable.
The main goal I'm trying to achieve is to obtain a dependency tree of a specific npmjs library of specific version e.g. obtain dependency tree of library angular of version 1.5.3
Now, I would like to use HTTP requests for this as much as possible instead of launching npm on server-side or using some js library code for that.
What I've found out is:
From http://registry.npmjs.org/package-name one could get all metadata for the specific package as well as list of available versions e.g. http://registry.npmjs.org/angular
From http://registry.npmjs.org/package-name/package-version I could get all metadata for the specific package of specific version e.g. http://registry.npmjs.org/angular/1.5.3
Now, what I'm struggling to find is how to obtain package.json of specific library and specific version because http://registry.npmjs.org/angular/1.5.3/package.json doesn't contain anything
Thanks a lot in advance for any hints!

Ok, it turns that list of dependencies is actually present in file with metadata for the whole package ( located in http://registry.npmjs.org/package-name ).
It's located in versions -> [version-id] -> dependencies, devDependencies and optionalDependencies properties.

How to get angular2 to work in eclipse with typescript

So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.

What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.

You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript

Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file

Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager

I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug

Twitter Bower file choosing

I was just playing about with Bower and got it to pull down jQuery 1.9.1 and Fancybox 2.1.4
That's great but for example, Fancybox pulls it's entire repo down including all the demo files and not just the actual files I need.
How should this situation be dealt with?
Neil

You have three options at the moment:
Bug the author about either properly using the ignore attribute of the component.json (or soon to be bower.json) or maintaining a separate repository just for bower like AngularJS does for example.
Register and maintain a component yourself.
Pull in just the file you need via HTTP like this:
"dependencies": {
"fancybox": "https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.js"
}
Last last option comes with the drawbacks that neither dependency resolution nor multiple files will work. The best long-term solution is to lobby the author to correctly support bower.

Categories