CODEWITHSUNDEEP
angular
Michael Wilson
Michael Wilson

Reputation: 1579

Please have <head> as the first element in your document

I just upgraded to Angular 5 from version 4 and I'm receiving this error in the console:

Error: Please have <head> as the first element in your document
    at ServerTransferState.inject (/Users/michaelwilson/Code/project/dist/server.js:183316:23)
    at SafeSubscriber._next (/Users/michaelwilson/Code/project/dist/server.js:170489:27)
    at SafeSubscriber.__tryOrUnsub (/Users/michaelwilson/Code/project/dist/server.js:17319:16)
    at SafeSubscriber.next (/Users/michaelwilson/Code/project/dist/server.js:17266:22)
    at Subscriber._next (/Users/michaelwilson/Code/project/dist/server.js:17206:26)
    at Subscriber.next (/Users/michaelwilson/Code/project/dist/server.js:17170:18)
    at FirstSubscriber._emitFinal (/Users/michaelwilson/Code/project/dist/server.js:117823:25)
    at FirstSubscriber._emit (/Users/michaelwilson/Code/project/dist/server.js:117806:14)
    at FirstSubscriber._next (/Users/michaelwilson/Code/project/dist/server.js:117785:18)
    at FirstSubscriber.Subscriber.next (/Users/michaelwilson/Code/project/dist/server.js:17170:18)

I'm using Angular Universal, my index.html does have head as the first element in the document:

<!DOCTYPE html>
 <html>
  <head>
   ...

Where am I going wrong here?

Upvotes: 2

Views: 89

Answers (1)

Michael Wilson
Michael Wilson

Reputation: 1579

As pointed out by @estus, this was a problem specific with my project (it was using universal-starter which threw an error when:

const head = document.head;

if (head.name !== 'head') {
  throw new Error('Please have <head> as the first element in your document');
}

All I had to do is change it to this:

const head = document.head;

if (head.tagName !== 'HEAD') {
  throw new Error('Please have <head> as the first element in your document');
}

And the error disappeared :)

Upvotes: 3

Related Questions