Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

Question

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

As Angular Universal is not expected to be included in the CLI for some time, I've had to resort to using prerender.io in order to ensure proper SEO functionality. However, my tests have shown that there are issues with lazy loaded modules causing SEO failures.

According to information on their website located here, Prerender.io states:

Is your page only partially rendered?

Our Prerender server does its best to detect when a page has finished loading by monitoring the number of active requests. Once this count reaches zero, we pause briefly before saving the HTML content. If you find that the page is being saved too soon, you can use the window.prerenderReady flag to signal to the server that your page is ready for saving.

Add this code snippet to your HTML:
<script> window.prerenderReady = false; </script>
When we observe window.prerenderReady set to false, we will wait until it becomes true before saving the HTML content. Trigger this change once your page is fully loaded (usually after any ajax calls):
window.prerenderReady = true;

The challenge lies in implementing this solution within an Angular environment, specifically when script tags are removed from templates. It's unclear whether this behavior is specific to the CLI or inherent in Angular itself. Additionally, updating the window property prerenderReady within a template script tag from a component class poses difficulties, as simply setting window.prerenderReady = true may not function as intended without inclusion in the template.

Has anyone encountered and resolved this issue, or do you have suggestions on how I could address it effectively?

javascript angular typescript seo prerender

Answer 1

Answer №1

EDIT:

server.use(prerender.removeScriptTags());

prerender.io allows for scripts to remain in the rendering process.

Dealing with a similar issue in my setup using Meteor and Angular2. While my header and footer modules rendered fine, the router-outlet output did not appear. I resolved this by adding:

<script> window.prerenderReady = false; </script>

to my main index.html file (which contains the <app></app> tag), and inserting:
window.prerenderReady = true;
at the end of my last callback function. Additionally, I disabled the line:

//server.use(prerender.removeScriptTags());

in the server.js file of my prerender server - resulting in successful rendering.

Answer 2

EDIT:

server.use(prerender.removeScriptTags());

prerender.io allows for scripts to remain in the rendering process.

Dealing with a similar issue in my setup using Meteor and Angular2. While my header and footer modules rendered fine, the router-outlet output did not appear. I resolved this by adding:

<script> window.prerenderReady = false; </script>

to my main index.html file (which contains the <app></app> tag), and inserting:
window.prerenderReady = true;
at the end of my last callback function. Additionally, I disabled the line:

//server.use(prerender.removeScriptTags());

in the server.js file of my prerender server - resulting in successful rendering.

Answer 3

Answer №2

After some troubleshooting, I managed to get this solution up and running. It's quite intricate, so hopefully there's a genius out there who can simplify it for me :)

To begin with, remove the comment tags from all browser polyfills located in src/polyfills.ts (some may not be necessary, but I haven't individually tested them):

/** The following polyfills are required for IE9, IE10, and IE11 **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Following that, you must insert the prerenderReady flag within a script tag in the <head> section of your index.html. Since Angular doesn't strip out comments, leave a placeholder before building:

<head>
    <!--prerender-->
</head>

Subsequently, once you execute ng build, replace the placeholder with the actual script tag using a shell script and the sed command. Here is an example:

TPL="\<!--prerender--\>"
PRERENDER_SCRIPT="\<script\>window.prerenderReady = false;\<\/script\>"

INDEX_HTML=$(sed "s/$TPL/$PRERENDER_SCRIPT/g;" dist/browser/index.html);

rm dist/browser/index.html
touch dist/browser/index.html

echo "$INDEX_HTML" > dist/browser/index.html

Please Note: I vaguely recall setting up sed on OSX, but the specifics elude me. In case sed doesn't function on your system, some research might be needed.

Lastly, ensure to change the prerenderReady flag to true at some point. This can be done in the OnInit method of the AppComponent:

export class AppComponent implements OnInit
{
    ngOnInit()
    {
        window.prerenderReady = true;
    }
}

It's worth mentioning that to utilize window in a TypeScript application, declarations like the one below need to be present in a file named typings.d.ts:

interface Window
{
    prerenderReady: boolean;
}

Additionally, include a reference to the typings file at the start of app.module.ts:

/// <reference path="../typings.d.ts" />

This guide should prove helpful to someone in need.

Answer 4

After some troubleshooting, I managed to get this solution up and running. It's quite intricate, so hopefully there's a genius out there who can simplify it for me :)

To begin with, remove the comment tags from all browser polyfills located in src/polyfills.ts (some may not be necessary, but I haven't individually tested them):

/** The following polyfills are required for IE9, IE10, and IE11 **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Following that, you must insert the prerenderReady flag within a script tag in the <head> section of your index.html. Since Angular doesn't strip out comments, leave a placeholder before building:

<head>
    <!--prerender-->
</head>

Subsequently, once you execute ng build, replace the placeholder with the actual script tag using a shell script and the sed command. Here is an example:

TPL="\<!--prerender--\>"
PRERENDER_SCRIPT="\<script\>window.prerenderReady = false;\<\/script\>"

INDEX_HTML=$(sed "s/$TPL/$PRERENDER_SCRIPT/g;" dist/browser/index.html);

rm dist/browser/index.html
touch dist/browser/index.html

echo "$INDEX_HTML" > dist/browser/index.html

Please Note: I vaguely recall setting up sed on OSX, but the specifics elude me. In case sed doesn't function on your system, some research might be needed.

Lastly, ensure to change the prerenderReady flag to true at some point. This can be done in the OnInit method of the AppComponent:

export class AppComponent implements OnInit
{
    ngOnInit()
    {
        window.prerenderReady = true;
    }
}

It's worth mentioning that to utilize window in a TypeScript application, declarations like the one below need to be present in a file named typings.d.ts:

interface Window
{
    prerenderReady: boolean;
}

Additionally, include a reference to the typings file at the start of app.module.ts:

/// <reference path="../typings.d.ts" />

This guide should prove helpful to someone in need.

Answer 5

Answer №3

To optimize the performance of your website, I recommend placing the initial script in index.html close to the top of the page before incorporating Angular JS files using angular.json or modifying the webpack build to include: window.prerenderReady = false

Subsequently, within the main app.ts file, access the window object and set window.prerenderReady = true in the ngOnViewInit hook:

 public ngAfterViewInit(): void {
        this.windowReference.prerenderReady = true;
    }

Answer 6

To optimize the performance of your website, I recommend placing the initial script in index.html close to the top of the page before incorporating Angular JS files using angular.json or modifying the webpack build to include: window.prerenderReady = false

Subsequently, within the main app.ts file, access the window object and set window.prerenderReady = true in the ngOnViewInit hook:

 public ngAfterViewInit(): void {
        this.windowReference.prerenderReady = true;
    }

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting: When Angular Fade In Out Animation Won't Work

Submitting Data in Ionic 3 using Http Post and Storing in Sqlite with Angular 4

Troubleshooting: Vue.js Component template not displaying items with v-for loop

Tips for optimizing the speed of uploading multiple images/files from a client's browser to a server using JavaScript

The usage of 'import.meta' is restricted to within modules and cannot be utilized outside of them

Monitor the item for fluctuations in its worth

Ensure that the cursor is consistently positioned at the end within a contenteditable div

Executing a JavaScript file within the Meteor JS ecosystem

Unable to retrieve the form from the website

Leveraging LESS in an Angular2 component

How to set return types when converting an Array to a dynamic key Object in Typescript?

How to change elements within an HTML string using jQuery

Gaining entry into a JSON object

An issue arose while attempting to pin a file on IPFS: A TypeError [ERR_INVALID_ARG_TYPE] was encountered, specifying that the argument "url" must be a string data type

Guide to capturing the response in Angular 4 using HttpInterceptor

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

HTML link with "mailto:" not opening in a new tab

Tips on eliminating borders in react-table components

What is the best way to adjust the size of an HTML5 SVG circle with a button click event?