Angular - Render component as static content and styles in index.html

Question

Is it possible to write a component that will be prebuilt as static html in the index.html file so that the static content of that component acts an app skeleton before the other .js files run?

Example: I can output any number of <style> tags and custom static html inside the <app-root> tag that will be visible to the user until the JS files run. This is typically loading indicators or whatever. I want to flesh it out a bit more with my headers, skeleton body, and my footer. However I dont want to deal with the pain of doing this totally by hand. I'd like to use the standard Angular pipeline of components, styles, etc. The difference is that I want it prebuilt in the index.html file.

My initial guess is that this cannot be done and I just have to deal with it. But I thought I'd consult the interwebs.

Guerric P · Accepted Answer · 2019-01-18 14:37:50Z

1

I suggest you to use Angular Universal.

To sum up, it creates a server-side rendered version of your website. The server-side rendered pages are inert (no actions or animation except links between pages) and the client-side app (JS files) are loaded in the background, then take over the server-side rendered page when fully loaded.

A boolean is provided that lets you know if the app is being rendered on server or on client side, so you can easily implement a behavior like:

Show a degraded page with loaders and greyed out areas on server side
Show the fully functional page when client side has taken over

Here are the main advantages:

Shows something relevant to your user immediately when first loading the app (you can even show data from your backend).
Enables SEO for search engines that use old versions of javascript or no javascript at all (at the time I write this, Google uses Chrome 41 which is pretty old and doest not crawl Angular apps)

Some cons:

Requires you to do some (minor) refactoring in your app (mostly interceptors and code that depends on JS files loaded with script tags)
Requires a Node.js express server to serve the app instead of the static files web server you were using

Example of an application that uses Angular Universal if you want to inspect its behavior: https://www.weflat.fr

edited Jan 18, 2019 at 14:37

answered Jan 18, 2019 at 14:07

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JDillon522 Over a year ago

I think that would be the best route. However my situation is a bit more less than ideal. I'm shoving an Angular app on-top of a .NET 4 MVC application. Its like shoving a square peg in a round hole. If the internet gods bless me I might eventually have the opportunity to move everything over to .NET Core and then take advantage of SSR. For now I'm SOL.

Guerric P Over a year ago

Well I wish you good luck with your company or client constraints!

Collectives™ on Stack Overflow

Angular - Render component as static content and styles in index.html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related