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

Apply a spread of nested elements onto another spread

Generate SVG components without displaying them

Creating a dynamic configuration for service instantiation in Angular 4/5

Modifying an object's label based on a particular value using JavaScript

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

considering multiple website addresses as one collective entity for the Facebook like button

Having issues setting a property value on a Mongoose result in a Node.js application

Showing JSON Array Values in a Table

Is it possible to run two commands in npm scripts when the first command initiates a server?

Using jQuery Plugin for Date Operations

Acquire the Dynamic HTML Tag from the source code of the page

What is the process by which Node can access predefined variables in clustering?

No input value provided

Angular directive that verifies the presence of a specific number of child li elements

Setting the type of a prop dynamically based on another prop value

Optimal strategies for initializing Knockout JS models from backend code

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

Is your $http request causing an XML parsing issue?

"Utilizing Ajax technology for website functionality while implementing effective SEO strategies

Challenge with Typescript Interfaces