Develop Reference

Work with Old Typescript Widgets library in Jhipster

I am trying to get old version of external Typescript/javascript widget library in Jhipster version 6.10+ & 7.0 beta.[This issue will also hit non Jhipster apps in Latest Angular and React Apps] Example Libraries include DHTMLX, bryntum Gantt etc. Unfortunately both libraries only support Angular 2 (old version of typescript standard). Trying to integrate these widget results into lot of typescript errors in these library and hence i have hit a roadblock. Few workaround/hacks that I am thinking
Make Use of standard HTML/javascript way and embed the html as iframe inside Jhipster app.
Use themeleaf to render standard HTML/javascript or JSP page that embed these Widgets
Does anyone has a better alternative? Also suggest what changes that I will need to make in webpack to implement one of the above workaround

DHTMLX Gantt should work in Angular 9 and 10. Here are the demos:
Angular 10
Angular 9

convert angular 2 application to integrate able sdk

i have a angular 2 application. I was wondering if i could convert this application to an integrate-able sdk which other applications can use by adding script tags in their headers. If this is not possible can anyone provide any tutorial link which shows how can i build a simple sdk which can be integrated in other applications. thank you.

Of course you can! In javascript terms, it's not called "SDK" but "module".
The most popular module manager is called NPM.
So you can follow this tutorial to package your "application" as NPM module, then it will be easy for other js developper to integrate it inside their own projects (using the tags, services, directives you defined.
Here is a good post about it
Cheers!
EDIT : if you want to use your angular components/modules outside in non-angular application, you can follow this one. In the example it is used with React app but it will work with any html5-compliant browsers.
If you want to target also non-compatible browsers, you should add a polyfill

Angular app, Inside an Asp.Net Core Project, pros & cons

I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?

I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.

Searching for a ReactJS Runtime Plugin Concept

does ReactJS support some plugin loading at runtime?
I have developed a client app based on ReactJS. It should be possible for other users of my software to extend the Web UI by writing custom extension.
My ReactJS Base application is already transpiled (webpack + babel) to a build.js file.
Other user should create there own .js file which are loaded by the browser separately. At runtime browser should check for custom extension add these to the application.
Does anyone has a hint how to do this with ReactJS?
Cheers,
Manuel

You can implement a custom javascript function on your main component to add extensions, i.e.:
YourPlugin.loadExtensions(MyCustomExtension);
I've done this for a react component to be mount on a specific node only, but I think this approach should work in your case as well.

Packaging JavaScript based plug and play application

I am trying to build a plug and play web based application that I should be able to integrate with multiple other web applications (which are developed using AngalurJS\ ExtJS\ ReactJS etc). On click of a button, I should be able to launch a sliding menu. On this menu, I want to add Twitter like functionality. On the first half of the menu we will have a textbox (with features like autocomplete & hash tags). The second half with show a gird which will show already posted messages. The panel will be responsible to get and post data to server.
The challenge is, I want to add this functionality to multiple other web applications with minimum configuration\changes. The consuming web applications should be able use this plugin with ease. Certain challenges I see is bootstrap does not play well with ExtJs framework & I may face similar issues with other JavaScript frameworks.
Questions:
How can I package this application? It has a panel with third party plugins (for autocomplete & other features), CSS & JavaScript. I can use web pack or Browserify but I want to keep the solution clean & don't want to add unnecessary dependency.
The consumers should be able to consume the bundle\package with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).
I think, I can get the desired result with a simple ReactJs app, which I can bundle using web pack. But this will introduce other dependency. I want to keep the web application lite and simple.

I can use web pack or Browserify but I want to keep the solution clean & don't want to add unnecessary dependency.
I don't understand the problem. Using webpack or browserfy will only add devDependencies. You won't ship it. You package won't depend on it.
You won't be able to avoid using a bundler if you want to bundle it.
The consumers should be able to consume the bundle\package with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).
If you distribute it via npm (de facto standard in JS), they just regularly import the resources with the correct path (e.g. node_modules/package/styles.css).
In npm you could also declare your peerDependencies (you mention jquery, bootstrap).

1. How can I package this application?
You should minify all your HTML using a build tool like grunt or gulp
If you want to keep the count of different files low, you can merge all your CSS, HTML and maybe even Images (base64 encoded) into your module.js. Ideally you could end up with only delivering a single file.
2. The consumers should be able to consume the bundle\package with ease & just by adding some references.
In that case they just need to include the script, like:
<script src="app-module.js"></script>
If you are able to use EcmaScript 2015, you might consider to package your plug-and-play app into a ES6 Module. Define your module.js simply as:
export var myNumber = 333
export function myFunction() {
...
}
And on the site, which is consuming your app, you simply add a dependency using the import keyword:
import * as service from 'module'
console.log(service.myNumber) // 333
Read more about ES6 Modules.