Search code examples
javascripthtmlangularjsnode.jszombie.js

npm zombie putting <head> contents inside <body>

I'm using zombie to generate HTML snapshots for my MEAN stack single page application, following this tutorial by Angular: http://www.ng-newsletter.com/posts/serious-angular-seo.html

My snapshots are being generated fine except one thing. The contents of the document <head> are inside the <body> tag and I don't know why.

In brief, I create my zombie browser like so:

var browser = new Zombie({
  waitFor: 3000,
  loadCSS: false,
  runScripts: true
});

Then I visit a page and see the html:

browser.visit("page-url-here").then(function(){
  console.log(browser.html());
});

And I get an output with this kind of structure:

<html>
<head></head>
<body>
meta tags, css links, etc here.
</body>
</html>

The original code for those pages was done correctly with the head content inside the head tag, so why has zombie moved it out?

Solution

  • This is due to a bug in zombie's dependency, jsdom. jsdom < v2.0 has a problem with some html capabilities. The jsdom version is updated in zombie version 3.0.1-0. Use npm to update zombie to 3.0.1-0 or higher.

    npm install [email protected] for current newest version.

    Related GitHub issue: https://github.com/assaf/zombie/issues/847