Using yoast seo in Angular

[01CodeLT]

In the documentation it says you can create a web worker using the following code

import { AnalysisWebWorker } from "yoastseo";

const worker = new AnalysisWebWorker( self );
worker.register();

This code however directly imports the node module which isn't possible in a web worker, can someone explain how to implement this code? I'm using Angular 6 and it's web workers don't support importing of node modules as above.

[01CodeLT]

Managed to fix this issue by building the yoast js source code into a webpack bundle. I then imported the babel polyfill and the yoast bundle into my web worker code using importScripts and created a web worker using AnalysisWebWorker as outlined in Yoast's documentation...

self.importScripts('./babel-polyfill.min.js');
self.importScripts('./yoast-bundle.js');

//Create worker for yoast
const yoast = self.YoastSeo.yoastSeo;
const worker = new yoast.AnalysisWebWorker( self );
worker.register();

In my Angular service for yoast I then just imported yoast as normal and connected it to my web worker.

import { AnalysisWorkerWrapper, createWorker, Paper } from "yoastseo";

export class YoastSeoService {
    url = '/path-to-worker/yoast-worker.js';
    worker = new AnalysisWorkerWrapper( createWorker( this.url ) );
    constructor() {}
    
    assess(text, keyword, title) {
        this.worker.initialize( {
            locale: "en_US",
            contentAnalysisActive: true,
            keywordAnalysisActive: true,
            logLevel: "ERROR",
        }).then( () => {
            // The worker has been configured, we can now analyze a Paper.
            let paper = new Paper(text, {
                keyword: keyword,
                title: title,
                url: `https://site-url/(${title.toLowerCase().replace(/[^a-zA-Z0-9]+/g, '-')})`,
                description: text.replace(/<[^>]+>/gm, '-').slice(0, 140)
            });
            
            return this.worker.analyze( paper );
        }).then( ( results ) => {
            console.log( 'Analysis results:' );
            console.log( results );
            return results;
        }).catch( ( error ) => {
            console.error( 'An error occured while analyzing the text:' );
            console.error( error );
        });
    }
}

It all works as it should now and without causing the page to freeze, not sure if this is the best solution but it seemed to be the only way I could get it to work.

[ixam1]

Hi any chance you could show me how to bundle the yoast js script? I am facing the same problem but cant figure out that step.

[01CodeLT]

Yes you should be able to bundle it this way...

1. Copy the source code for the yoastseo package to a local folder javascript/packages/yoastseo at develop · Yoast/javascript (github.com)
   (I downloaded the monorepo as a zip and then just copied the yoastseo package folder)

2. Run npm install && npm install --save-dev webpack webpack-cli within the new folder

3. Add a file named webpack.config.js in the same folder with the content below

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: ['YoastSeo', 'yoastSeo']
    }
}

4. Change the scripts section for the package.json to the following

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"develop": "webpack --mode development --watch",
	"build": "webpack --mode production"
}

5. Run npm run build
6. Yoast will be bundled into a new folder named 'dist'

I'm not sure if this is the best way of doing it but it works for me, I'm open to any suggestions if there's a better way 👍

[ixam1]

Hi thanks a lot for the quick response and the guide. Although I actually found a way already after my answer yesterday.

Weirdly bundling yoastseo and then importing it in the script didnt work for me. So I instead defined the yoast worker script as the entry for webpack. Then it finally worked for me. It has the advantage of you just having to have 1 file instead of 2 files, wether its optimal, i dont know...

yoast-worker.js

import { AnalysisWebWorker } from "yoastseo";

const worker = new AnalysisWebWorker( self );
worker.register();

webpack cli command
npx webpack-cli ./yoast-worker.js -o worker-bundle