How to use server-side rendering in Angular 2? - javascript

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.

Related

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.

Create a plug and play plugin framework setup using Angular4

My application was in IBM WebSphere portal, where we have a centralized theme for all the portlets. We build individual portlets with the specific features which are then installed from a page into the portal like as shown below.
So altogether we build a portal with lots of portlets (individual web application). In the portal we creates pages and drag and drop each of these portlets as per the requirements.
Now the requirement was that we are moving everything to Micro service Architecture with Angular4 as the front-end. Currently I am having an angular4 application having many UI components and features. I am posting this question to get some ideas or possibility whether it is possible to create a portal like IBM WebSphere/ Liferay in Angular 4 with having the following basic features:
User/Team can create separate individual angular4 application, build and will be able to install/uninstall within the main application like porltets in portal (IBM WebSphere).
User will be able to view all the installed Angular4 application and can create pages, drag and drop those application within a newly created page.
Each separate Angular4 application (like portlets) installed will be using the main application theme.
Can anyone tell me whether this is doable. Do we have any framework setup in Angular4
One of the possible ways I can think of is using webpack(or any other module bundler) to handle the various angular application.
You can check out my answer here to get a brief overview of how you can configure webpack.
In the end, Angular compile to javascript only. So, It will be possible. But the effort needed to maintain and test the overall application might be huge.
When re-designing a system, it is best to think about the problem you are trying to solve and solve for that use case. It feels like you're trying to recreate the same bad interface with Angular. The code may be new, but the user interface problems will still be there.
I would recommend ditching the portlet idea and creating 1 app with many modules. Angular was designed to be very modular so different teams can work on separate modules. You could then have some sort of settings page where you can turn the modules on and off.

Ionic3 import external web hosted javascript library

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.

Custom UI for Alfresco ECM

What are the options for implementing a custom UI for searching the alfresco repository?
I have found only customizations of the Web Scripts share which is more of a WCM thing. Could it be implemented and expanded for Custom Model searches from imported CMIS data?
Has anyone built a custom UI for communicating with the 5.0 or 5.1 alfresco repository?
Any help or search paths would be greatly appreciated.
It's up to you, really.
Latest versions of Alfresco have a nice and documented REST API, which you can consume. Additionally, web scripts you might create are also easily accessible with a simple HTTP request, so customizing is not a problem.
https://api-explorer.alfresco.com/api-explorer/
The latest thing is what Gagravarr already mentioned, Angural2 based components (which also speak with the above mentioned REST API).
Here is a blog post with almost the exact title as your question. The short answer is you can use whatever you want to build a custom app on top of Alfresco.
Yes, there are Angular2 components that will be available some day, but for now, they rely on REST API changes that have not been shipped in any stable release of Alfresco, including Community Edition. They require an early access release (201606-EA or higher) which you should not run in production.
So from whatever language you decide to use you'll be making REST calls. But to which API? There are many. Here is the order of preference you should use when selecting an API for Alfresco.
CMIS. Grab a library from Apache Chemistry.
Public REST API, see http://docs.alfresco.com/5.1/pra/1/topics/pra-welcome.html
Out-of-the-box web scripts marked "Public". See http://localhost:8080/alfresco/s/index for a list, then click down to an individual web script until you see its lifecycle.
Your own custom web scripts
Out-of-the-box web scripts with no lifecycle or something other than public.
That last one is truly a last resort. Don't do it without being fully aware that you are writing against an API that will change without warning.

Deploy Angular2 demo app within rails or as standalone app?

I'm currently learning Angular2 and went through the quickstart and heroes tutorial. I'm always starting these apps with "npm start".
I've created a backend application in ruby on rails, and also have a frontend angular2 app. I do not know how I can integrate the angular2 app within the rails app. Theoretically, I can just put it into the public/ directory to make the JS accessible, but I probably need to convert it somehow so that the links are setup right.
Can anyone tell me how this is done normally?
Thanks a lot
You can do this in two ways as I can see
1 - Add your angular project folder to app/assets/javascripts or in the root in you app and set rails asset pipeline to use it. read more here (for angular1) https://thinkster.io/angular-rails
2 - Running as a separate project and use rails as only as an API. (this is my preferred method) due to following reasons.
this will give a separation between your rails app and angular app. Basically you are forced to implement things in standard api way, like authentication etc. hence overtime you will have a more solid rails api and angular fronted
once you have the separation, you can run these two in different app servers if you wish to. gives better load balancing etc..
You can always replace both frontend and backend with different technologies later, like amber and node since they communicate only via an http api.
So this option will need more time and effort, but, if possible its defiantly worth it :)

Categories