Ionic3 import external web hosted javascript library - javascript

I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)

I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it

First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.

Related

Using the Ionic framework with plain JavaScript

Can one use the Ionic framework with plain Javascript (aka. without the recommended frameworks like react, angular or vue)?
If yes, how?
yes, you can build Ionic apps using VanillaJS or take advantage of Vue, React or Angular or Stencil
all components documentation available for JavaScript
it's recommended to use React or Vue,... for large scale application but if you want use plain JS it's available.
From Ionic framework documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag
In short: Yes, in the same as way you can use wordpress.
According to the official documentation:
One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress.

How to load web applications on runtime?

I'm going through the concept of Micro frontends for the past few days. In Micro frontends, we create bundles of all applications wherein each bundle represents a separate web application and finally we write logic to communicate with these bundles in our base application.
For e.g., let's say we have APP 1, APP 2, and APP 3 are our Micro frontends which we bundled and used in BASE APP.
Is there any way to dynamically load these apps at runtime and without having to create a bundle of individual applications?
I'm aware that we can use iFrame but it doesn't allow cross-origin access to iFrames
Their are few things that can help with this, the best know is Single SPA, which allows you to load them all into the same page without using iFrames.
https://single-spa.js.org
If you want to use iFrames, then you will have to use the PostMessageAPI to communicate between them to get around the cross-domain issues.
There are other options, in 2019 Martin fowler wrote an overview of these that is going to be more useful than anything more I might add here.
https://martinfowler.com/articles/micro-frontends.html#IntegrationApproaches
I think this resource should be more helpful for you:
https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/
The key search term here is "Angular Module Federation", which was introduced I think in version 11 for this particular reason to be able to load Angular Modules on runtime.
I've read throug it and it's very promising to be able to built a mircofrontend like thing with angular.
Edit:
And maybe also this npm package: https://www.npmjs.com/package/#angular-architects/module-federation
Module Federation allows loading separately compiled and deployed code
(like micro frontends or plugins) into an application. This plugin makes
Module Federation work together with Angular and the CLI.

How to use server-side rendering in Angular 2?

I have a web app developed with Angular 2 which communicates with Java APIs on the server to fetch data. Everything is working fine except the pages are not indexed by search engine (except Google which supports script generated tags).
I've googled a lot and found that this can be achieved by "server side rendering" and there are libraries available to achieve this but all of these are commercial products that require payment.
I have come across Angular Universal which is not a commercial product, can we use it to solve our issue? If it can then how can we hook it up to our existing app?
You are on the right path there are two ways to achieve your objective
If you are using #angular/cli for developing angular app then you can only follow this link
If you developing with your own webpack.config file then there are lot of options available, best of them is universal-starter , which is featued in official documentation of angular/universal
While continuing with #angular/cli, there is a little caveat that it doesn't support lazy loading yet but they are working on it and future is bright with #angular/cli. If you want to implement lazy loading now only then i will suggest you go ahead with second option.

deploying a javascript 3rd party library (requirejs/grunt)

Our team is building a javascript library that enables other web apps in our company to consume and insert data into our app, using widgets we built with angular directives.
So we got our own app (that could be used independently), built with MVC .net (in visual studio), and with angular. And also we are producing sort of a javascript library that other apps can use and insert widgets (that are connected to data from our app through ajax calls).
We are really struggling with our deployment proccess. We need the following to happen:
Concatenating and minifyinh our javascript, and in the right order.
Compiling less, and concatenating and minifing css.
Handle external dependencies because we are using multiple 3rd party libraries also, which maybe others are using also.
We know about requirejs, but we are not sure it is suitable for a 3rd party sort of library we are building. Also we want to enable loading as CDN, is it still suitable?
We also know about grunt, but we are not using nodejs but MVC .net. Is it relevant?
We would appreciate your input! Thanks!
I would strongly recommend using a build tool such as Gulp or Grunt, both of which can easily handle the requirements you've given. An added benefit is both can be set up to initiate parts of the build process as files are saved, freeing developers to use any editor they want instead of a particular IDE.

Combine CKEditor into 1 file

Thought I would open this question to the javascript community. Does anyone know if its possible to combine CKEditor into 1 file? I want to try and integrate it in one of my desktop applications which uses a web viewer - I can execute one flat file in my web viewer internally in my application otherwise I'll have to reference to the CDN which I'm hoping to avoid. I want to develop an app that does not require external web service.
Performance should not be an issue as the file would be in my application running locally - I would include all the licenses/readme etc etc.
Is there a tool out there that can help me to achieve this, and has anyone done it or is not possible due to the architecture - the way CKEditor has been written?
Thanks
CKEditor loads some JS files on demand (i.e. dialog definitions). There are also several skin CSS files, sprites with icons and separate langfiles. I hardly think there's any reasonable way to combine all these resources into a working JS bundle without architectural changes.

Categories