Server render part of DOM and inject it into Angular app

Question

Let's consider we have a standard browser Angular (v.11 now) dashboard app: Dashboard contains widgets which are components that get data from API and display values (KPIs, charts, tables, etc).

The question is: Is there a way to render the widgets on server and injects them into dashboard DOM?

Since those widgets are Angular components my idea is whether Angular can run on server, compile the components into static DOM and inject it into browser running Angular app.

I tried Universal but that's really for pre-rendering first page, don't think it can be good for this scenario, or?

Thanks!

Answer 1

Universal can prerender all components of appmodule, as soon as you will go to route of that page universal will pre-render them as well, not the first page only.

If you don't find universal as perfect solution, you can use puppeteer for pre-rendering that page. please find the reference below.

https://developers.google.com/web/tools/puppeteer/articles/ssr

Answer 2

If you don't want to use Angular Universal there are a few other ways to do this.

1) Inject the html into the index.html page when it is served.

I have done this with Asp.Net before. You serve the index.html page through a controller and use the controller to modify the page injecting the widget html into it. You use a template tag with an id so that the Angular app can query it and then insert into the DOM. Angular has a service called Renderer2 for doing DOM manipulations.

2) Use an http request to get the widget html

I have also done this before. You can make a http request once the app is loaded that returns the html as a string. You can then use the Renderer2 service to inject the html into the dom.

UPDATE

In my above answer I didn't address the rendering of the widgets part. One thing that hasn't been pointed out yet is that Angular compiles everything to JavaScript and not to static html so even if you found a way to compile them on the server - which there are ways, you wouldn't get static html.

There are couple of possibilities depending on whether you want the widgets injected when the index page is requested or when the user goes to the dashboard page . Just so you know I am just theorizing and have not tried any of this. You could dynamically import the JavaScript code. You could also create an html fragment with a script tag and load the html using one of the methods above. You would then have to dynamically create the selectors and add then to the DOM.

These would all take some research. Now I am curious if this can be done so I am going to try some of this out and see what happens.

UPDATE 2

Okay I am officially excited about trying this. I would use Docker to do this. I used Azure Pipelines and a Docker container a few years to compile an Angular library and create a npm package and upload it to a private npm registry. I think you could do the same thing for this without the npm part. I am not an expert in Docker but if you can dynamically install node then you should be able to make an api request to get the widget data and then write it into the widget.