ember-fastboot / ember-cli-head Goto Github PK

Hello, if you need assistance converting this addon to a V2 addon format and adding TypeScript support, it would be my pleasure to help.

wrong repo

So this is a bit of tricky one, and I'm not sure if it's this add or ember-page-title causing it.

Basically, under a very specific set of circumstances, a rendering error (i.e. trying to invoke a non-existent helper) will trigger an infinite loop of errors in FastBoot that ends up spiking the entire fastboot-app-server.

I've put together a minimal reproduction. Clone the repo down, ember s, and hit localhost:4200 to see it in action. As a heads up - once it starts dumping the error in a loop, it stops responding to SIGTERMs (Ctrl-C), so you'll need to forcibly kill the process (i.e. "Force Quit" on Mac or SIGKILL with kill -9).

I'm at a loss as to what might cause this - the errors being dumped aren't super helpful. After the initial error about being unable to find the helper, it just starts dumping this repeatededly:

TypeError: Cannot read property 'syscall' of null
    at AppendOpcodes.evaluate (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:69:1)
    at LowLevelVM.evaluateSyscall (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:3269:1)
    at LowLevelVM.evaluateInner (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:3215:1)
    at LowLevelVM.evaluateOuter (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:3207:1)
    at VM.next (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:5262:1)
    at TemplateIteratorImpl.next (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@glimmer/runtime.js:5298:1)
    at RootState.render (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/glimmer.js:5883:1)
    at TransactionRunner.runInTransaction (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/metal.js:593:1)
    at runInTransaction (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/metal.js:728:1)
    at InertRenderer._renderRoots (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/glimmer.js:6179:1)
    at InertRenderer._renderRootsTransaction (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/glimmer.js:6216:1)
    at InertRenderer._revalidate (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/glimmer.js:6262:1)
    at invokeWithOnError (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:344:1)
    at Queue.flush (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:226:1)
    at DeferredActionQueues.flush (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:423:1)
    at Backburner._end (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:957:1)
    at Backburner.end (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:707:1)
    at Backburner._run (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:1006:1)
    at Backburner._join (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:986:1)
    at Backburner.join (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/backburner.js:757:1)
    at Array.loopEnd (/var/folders/p4/2wqjhkg160sfdr7pykp6f3ch0000gn/T/broccoli-72882ZYE8RoqN9B1E/out-221-broccoli_merge_trees/assets/@ember/-internals/glimmer.js:6008:1)
  [...snip ~100 more lines of repetitive backburner frames...]

Some observations I've made (not sure of the relevance). The problem only seems to occur if:

• the non-existent helper is invoked in a child template. If I move the invocation from index.hbs into application.hbs, it's fine.
• both {{head-layout}} and {{title}} invocations are present, and they both occur before the {{outlet}} invocation. Remove either, or move either below the {{outlet}}, and it's fine.

Things that don't seem to matter:

• the order of invocation for {{head-layout}} and {{title}}. Either one first, still hit the problem.
• the contents of head.hbs. I can comment out the entire file and it still occurs.

In the browser I'd do something like:

export default function htmlDecode(input) {
  let doc = new DOMParser().parseFromString(input, 'text/html');
  return doc.documentElement.textContent;
}

and escape the opengraph text, but the DOMParser is not available in fastboot, what to do?

Steps to reproduce (using Ember CLI 2.11):

ember new fastboot-test
cd fastboot-test
ember install [email protected]
ember install ember-cli-meta-tags
ember fastboot

Upon visiting localhost:3000 in browser, the following error is displayed:

Unknown Error: Error: Assertion Failed: EventDispatcher should never be instantiated in fastboot mode. Please report this as an Ember bug.
    at assert (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:16253:13)
    at Object.assert (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:27925:34)
    at Class.init (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:52253:19)
    at Class.superWrapper [as init] (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:50979:22)
    at new Class (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:46671:17)
    at Function._ClassMixinProps.create (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:46859:12)
    at instantiate (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:12101:23)
    at lookup (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:11938:17)
    at Object.lookup (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:11857:14)
    at Class.lookup (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:43117:33)
    at /Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:17904:59
    at Class.init (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:17914:9)
    at Class.superWrapper [as init] (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:50979:22)
    at new Class (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:46671:17)
    at Function._ClassMixinProps.create (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:46859:12)
    at Object.initialize (/Users/kevin/code/fastboot-test/dist/fastboot/fastboot-test.js:328:38)
    at /Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:15115:21
    at Vertices.each (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:13180:13)
    at Vertices.topsort (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:13147:14)
    at DAG.topsort (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:13092:24)
    at Class._runInitializer (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:15130:13)
    at Class.runInstanceInitializers (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:15113:12)
    at Class._bootSync (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:13398:24)
    at /Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:14798:30
    at initializePromise (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:69131:7)
    at new Promise (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:69619:33)
    at Class.boot (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:14797:27)
    at /Users/kevin/code/fastboot-test/node_modules/fastboot/dist/cjs/ember-app.js:235:25
    at tryCatch (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:69081:14)
    at invokeCallback (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:69096:15)
    at publish (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:69064:9)
    at /Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:48967:16
    at invokeWithOnError (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:10898:16)
    at Object.flush (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:10957:9)
    at Object.flush (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:11081:15)
    at Object.end (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:11151:23)
    at Timeout._onTimeout (/Users/kevin/code/fastboot-test/dist/fastboot/vendor.js:11717:16)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)

Assertion Failed: You cannot use `attributeBindings` on a tag-less component: <account@component:head-layout::ember184>

Currently fails on glimmer2 with this, I'll try and dig into the issue but I don't believe ember-cli-head uses attributeBindings anywhere so it may be an upstream bug.

I'm seeing this error when I build:

FastBoot build no longer supports /Users/mhluska/project/node_modules/ember-cli-head/app/(instance-)?initializers/browser structure. 
Please refer to www.ember-fastboot.com for a migration path.

I'm using these versions:

ember-cli-head@^0.2.0
ember-cli-fastboot@^1.0.0-beta.15
[email protected]

<HeadLayout /> should be a glimmer component

Would recommend to drop (my own) addon ember-fastboot-addon-tests in favor of https://github.com/embermap/ember-cli-fastboot-testing. FastBoot tests are currently failing for unknown reasons.

did the headData.title from ember-cli-head doesnt replace the old title in app/index.html ?

Cannot find module 'example/node_modules/fastboot-filter-initializers/node_modules/broccoli-funnel//package.json'
Error: Cannot find module 'example/node_modules/fastboot-filter-initializers/node_modules/broccoli-funnel//package.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at pkg (example/node_modules/hash-for-dep/lib/pkg.js:19:20)
    at again (example/node_modules/hash-for-dep/lib/deps-for.js:18:22)
    at example/node_modules/hash-for-dep/lib/deps-for.js:27:7
    at Array.forEach (native)
    at again (example/node_modules/hash-for-dep/lib/deps-for.js:26:55)
    at example/node_modules/hash-for-dep/lib/deps-for.js:27:7

I realise ember-cli-head was created with fastboot in mind, but I thought it would work without it?

As of 0.4.0, the suppressBrowserRender option doesn't really do what it says on the tin. Since the instance-initializer no longer injects {{head-layout}}, returning early from it doesn't actually suppress any rendering.

Since this is used quite a bit in the FastBoot world, maybe we could move this repo over into the ember-fastboot org.

@ronco - What do you think? If that makes sense to you, you can initiate transfer to me then I'll move it into the org. Also, you'll definitely still be an owner there too...

I'm looking for a way to inject something like the below into the header on a specific route. This addon seems like it might do the trick but I'm not sure how to make it work.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Dataset",
  "name": {{name}},
  "description": {{description}},
  "url": {{url}},
  "keyworlds": {{tags}},
  "creator": {
    "@type": "Person",
    "name": {{owner}}
  },
  "spatialCoverage": {
    "@type": "Place",
    "geo": {
      "@type": "GeoShape",
      "box:": {{coordinates}}
    }
  },
  "license": {
    "url": {{structuredLicense.url}}
  }
}
</script>

The HTML 5.2 Spec, section 4.2.5 ("The meta element") states that:

If either name or http-equiv is specified, then the content attribute must also be specified. Otherwise, it must be omitted.

In ember-cli-head/addon/templates/components/head-layout.hbs, the content attribute is missing from the "ember-cli-head-start" and "ember-cli-head-end" meta tags.

The w3 validator will show this as an error:

To fix this, can the content attribute simply be added with an empty string?

When using this addon with ember-page-title, it requires this addon with before: 'head-browser' in ember-page-title\app\instance-initializers\page-title-setup.js . However, this fails with:

Error
    at assert (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:13766:1)
    at P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:12325:1
    at Vertices.each (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:10965:1)
    at Vertices.walk (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:10894:1)
    at DAG.each (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:10838:1)
    at DAG.topsort (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:10844:1)
    at Class._runInitializer (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:12341:1)
    at Class.runInstanceInitializers (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:12323:1)
    at Class._bootSync (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:11147:1)
    at P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:12107:1
    at initializePromise (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:54170:1)
    at new Promise (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:54654:1)
    at Class.boot (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:12106:1)
    at buildAppInstance.then.appInstance (P:\Project\node_modules\fastboot\src\ember-app.js:240:25)
    at tryCatch (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:54120:1)
    at invokeCallback (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:54135:1)
    at publish (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:54103:1)
    at P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:43528:1
    at invokeWithOnError (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:9122:1)
    at Queue.flush (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:9008:1)
    at DeferredActionQueues.flush (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:9171:1)
    at Backburner.end (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:9250:1)
    at Timeout.Backburner._boundAutorunEnd [as _onTimeout] (P:\Project\tmp\broccoli_merge_trees-output_path-MnfEnoEm.tmp\assets\vendor\ember\ember.debug.js:9219:1)
    at ontimeout (timers.js:386:14)
    at tryOnTimeout (timers.js:250:5)
    at Timer.listOnTimeout (timers.js:214:5)

While debugging runInstanceInitializers parameters I can see head-browser is undefined:
page-title-setup-browser { name: 'page-title-setup-browser',
before: 'head-browser',
initialize: [Function: initialize] }
head-browser undefined

Renaming ember-cli-head\app\instance-initializers\head.js to head-browser.js seems to fix the problem.

I may have missed something important from the docs, but I think rootURL is being ignored in the head template.

I've been trying to move 2 lines from my app/index file to the head template to avoid ember-cli clashes on update. Not a big deal, but nice to have.

<link rel="icon" href="{{rootURL}}assets/favicon.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

The material icons one worked fine, but the favicon one was going in as / instead of prefixing with the rootURL. I've tried using <link rel="icon" href="/assets/favicon.png"> instead hoping broccoli would swap the path out, but that also gave me no prefix.

Moving the 2 lines back to app/index.html I get the expected links.

Is rootURL supposed to work in the head.hbs template, or is it not the right way to try to do this?

ember-source 2.12.2
ember-cli 2.12.3
ember-cli-head 0.4.0

Curious what the thinking is on this?
thanks for any info

edit: currently I don't think it works

Hey guys,

Thanks for the solid package. Currently I'm having trouble updating the head after the page has rendered. I'm trying to switch (css) themes. The array changes based on the content but the headTag is not modified.

application/route.js

  setHeadTags() {
    let headTags = [];

    if (this.get('layoutService.isColorSchemeDark')) {
      headTags = [{
        type: 'link',
        tagId: 'app-styles',
        attrs: {
          rel: 'stylesheet',
          href: '/assets/app-dark.css'
        },
      }];
    } else {
      headTags = [{
        type: 'link',
        tagId: 'app-styles',
        attrs: {
          rel: 'stylesheet',
          href: '/assets/app.css'
        },
      }];
    }

    this.set('headTags', headTags);
  },

  updateColorScheme: observer('layoutService.isColorSchemeDark', function () {
    this.setHeadTags();
  }),

Before the render finishes, during the afterModel hook, my DOM looks like this:

<!-- EMBER_CLI_FASTBOOT_TITLE --><script glmr="%cursor:0%"></script><!--%+b:7%-->  <meta name="ember-cli-head-start" content=""><!--%+b:8%-->
<!--%+b:9%--><!----><!--%-b:9%-->
<!--%+b:9%--><!----><!--%-b:9%-->
<!--%+b:9%-->  <title>&lt;!--%+b:10%--&gt;My Super Project Title&lt;!--%-b:10%--&gt;</title>
<!--%-b:9%-->
<!--%+b:9%--> 

Which is causing the title of the tab to momentarily be <!--%+b:10%-->

I just upgraded to Ember 2.5.1:

DEBUG: -------------------------------
vendor.js:17027 DEBUG: Ember             : 3.5.1
vendor.js:17027 DEBUG: Ember Data        : 3.5.0
vendor.js:17027 DEBUG: jQuery            : 3.3.1
vendor.js:17027 DEBUG: Ember Simple Auth : 1.7.0
vendor.js:17027 DEBUG: -------------------------------

The issue seems to be described here: glimmerjs/glimmer-vm#796

The suggested fix is to use triple curlies in the in-element component. Which seems bad.

Hey! Very cool addon!

I'm having an issue where my page ends up with:

<head> <!-- index.html's head -->
  <head> <!-- ember-cli-head's head -->
    <!-- things added on head.hbs -->
  </head>
</head>

I created a repo that shows this issue: https://github.com/andressrg/test-ember-head-and-fastboot
When I ran it with ember fastboot and go to view-source:http://localhost:3000/my-head I get:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HeadT</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base href="/" />
<!-- EMBER_CLI_FASTBOOT_TITLE --><head><meta name="ember-cli-head-start"><!-- `app/templates/head.hbs` -->
<!-- Add content you wish automatically added to the documents head -->
<!-- here. The 'model' available in this template can be populated by -->
<!-- setting values on the 'head-data' service. -->

<meta property="og:title" content="Demo App">
<meta name="ember-cli-head-end">
</head>

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/head-t.css">


  </head>
  <body>
    <body><div id="ember385" class="ember-view"><h2 id="title">Welcome to Ember</h2>

<!---->

</div></body>

    <script src="assets/vendor.js"></script>
    <script src="assets/head-t.js"></script>


  </body>
</html>

Thanks!

I am using ember-cli-head directly in my application (Ember.js 3.20.4) to update the document title. So templates/head.hbs is simple:

// templates/head.hbs
<title>{{this.model.title}}</title>

I have two routes:

// routes/a.js
export default class RouteA extends Route {
  @service headData;
  
  afterModel() {
    this.headData.title = 'A';
  }
}

// routes/b.js
export default class RouteB extends Route {
  @service headData;
  
  afterModel() {
    this.headData.title = 'B';
  }
}

However, the title is not updated when changing routes. It's like templates/head.hbs is not reactive to the changes in properties on headData.

It does work when I use the pre-Octane set method. The titles are correctly updated in the template when changing routes:

// routes/a.js
export default class RouteA extends Route {
  @service headData;
  
  afterModel() {
    this.headData.set('title', 'A');
  }
}

// routes/b.js
export default class RouteB extends Route {
  @service headData;
  
  afterModel() {
    this.headData.set('title', 'B');
  }
}

updating to [email protected] produces the following deprecation warning on build:

DEPRECATION: The use of the private {{-in-element}} is deprecated, please refactor to the public {{in-element}}. ('ember-cli-head/templates/components/head-layout.hbs' @ L1:C0) [deprecation id: glimmer.private-in-element]

I have a problem where my app index is not prerendered, but nested routes are (served via different origins).

I want to be able to have default tags in my index.html and override it using ember-cli-head when needed.

In my index.html I would like to have:

<head>
  <meta name="og:title" content="Some title">
  ...
</head

But when using ember-cli-head in some nested routes, duplicates happen:

<head>
  <meta name="og:title" content="Some title">
  ...

  <meta name="ember-cli-head-start" content="">
  <meta name="og:title" content="Some more appropriate title">
  <meta name="ember-cli-head-end" content="">

</head

I get duplicates for og:title.

So when social media bots scrape my FastBoot routes, they take the first property. But they should take the second one.

How can I get ember-cli-head to render its stuff either at the beginning of the head, or replace tags that are already present in the head in index.html?

The note in the readme:

Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1 Please use 0.2.X if you don’t fulfull both requirements.

I don't really understand why Fastboot is a requirement now when there are examples where this repo is useful without Fastboot:

1. Keeping the page title up to date using https://github.com/tim-evans/ember-page-title
2. If you're using a service like prerender.io to serve content to crawlers
3. Google says they can crawl JavaScript websites without server side rendering

Is the intention of this repo to only support Fastboot apps going forward?

Is there a recommended way to test the contents of the head?

is it possible to remove the <meta name="ember-cli-head-start"> and <meta name="ember-cli-head-end">

https://github.com/ronco/ember-cli-head/blob/master/app/components/head-content.js#L2 this needs to have a requirejs module check to see if head layout exists under src directory. Otherwise make the layout the usual /templates/head.hbs. I will take a stab at this.

Not sure what exactly happened 😞 . Need to dig up more details, but it's gone locally and built and deployed, so setting back to 0.3.1 for now. Is 0.4.0 preemptive for a newer fastboot or something perhaps?

The readme says:

As mentioned above you need to add the {{head-layout}} component once and only once in an application wide template

But I'm finding that I need to include {{head-layout}} at whichever route level I interact with the headData service in order for it to work with FastBoot.

For example, if I have /profiles/1 which corresponds to an application route and a profile show route, both of which set data on the headData service, then I will need {{head-layout}} in application.hbs as well as profiles/show.hbs in order for the changes in the profile show route to be reflected after FastBoot render.

Hope that makes sense.

Hello. A couple of weeks ago, my team introduced a bug when we Octanified our templates by changing all instances of this.model to @model. We didn't realize until today that we should have left alone this.model in app/templates/head.hbs, since model refers to the head-data service.

I was wondering if you could (1) add a warning to the readme file under https://github.com/ronco/ember-cli-head#service, and (2) update the example code to Octane,

<meta property="og:title" content={{this.model.title}} />

so that other developers and teams may avoid our mistake when using Octane? I can also create a PR if you think making these changes would be a good idea.

Assertion Failed: The initializer 'head-browser' has already been registered"

Reverting to 0.2.0 fixes the issue.
Any work arounds or ways to fix this?

Currently, if you don't have the app/templates/head.hbs file present you get a very difficult to parse error like the following:

Uncaught Error: Could not find module `web-client/templates/head` imported from `web-client/components/head-content

It is pretty hard to track down unless you happen to know what ember-cli-head is doing internally. I think erroring hard is ok here, but it is also possible for us to default to an empty template (to prevent errors like this).

I'm upgrading ember-cli-head from 3.x to 4.x and running into a bug caused by the new {{head-layout}} component.

In our app we have a component called <PageInfo> that we use as a declarative interface to setting properties on headData.

We use it like this:

{{page-info title='About EmberMap' description='Meet Sam and Ryan'}}

and it works by setting data on the headData service in didReceiveAttrs:

// components/page-info.js
export default Component.extend({
  headData: service(),
  
  didReceiveAttrs() {
    this._super(...arguments);

    let props = {
      title: this.get('title'),
      description: this.get('description'),
      ...
    };
    
    this.get('headData').setProperties(props);
  }
});

This works in 3.x but in 4.x, we get a double render error:

Assertion Failed: You modified "model.description" twice on <ember-map@service:head-data::ember700> in a single render. It was rendered in "component:head-content" and modified in "component:page-info". This was unreliable and slow in Ember 1.x and is no longer supported. See emberjs/ember.js#13948 for more details.

I think I understand why this error is thrown – {{head-content}} has already rendered <head>'s content, and then {{page-info}} renders, which updates the already-rendered content.

I know typically the fix for this is to set the data before the render, but in this case we actually want this component interface, which means the data wouldn't be known until render-time.

Questions:

1. Why wasn't this a problem in 3.x? Or, was it happening and we just didn't know about it?
2. Is there a "better" way to have our component set data on headData?
3. One "fix" for this is to put the call to setProperties inside of a scheduleOnce('afterRender'), but I'm wondering if there's a better way to solve this problem.
4. Any other recommendations?

Thanks for any help!

enviroment.js

/* jshint node: true */
module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'blabla',
    environment: environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
      },
      EXTEND_PROTOTYPES: {
        Date: false
      }
    },
    APP: {
    }
  };

  if (environment === 'test') {
    ENV.locationType = 'none';
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;
    ENV.APP.rootElement = '#ember-test';
  }

  return ENV;
};

application.js

import Ember from 'ember';

export default Ember.Route.extend({
  headData: Ember.inject.service(),
  afterModel() {
    this.set('headData.rootURL', this.router.rootURL);
  }
});

head.hbs

<link rel="stylesheet" href="{{model.rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{model.rootURL}}assets/my-project.css">
<link rel="stylesheet" href="https://some/static/path/style.css" media="screen" title="no title">

Everything works fine during ember server, and nothing is injected when running ember build -prod. Is it the expected behavior?

We recently ran into some pretty hairy issues that turned out to be caused by ember-cli-head's instance-initailizer running when a lazily-loaded engine initialized.

In short, what I think was happening was:

1. Our Ember app used ember-cli-head to inject {{head-layout}} into the document <head>.
2. Some code we'd extracted to a lazily-loaded Ember engine also included ember-cli-head, so the instance-initializer ran when the engine loaded and gleefully smashed away all the {{head-layout}} DOM nodes.
3. The next attempt to update the {{head-layout}} component failed (presumably because the DOM was gone)
4. The glimmer VM blew up while trying to rerender (see: glimmerjs/glimmer-vm#736)

We solved our problem by making sure the ember-cli-head initializer doesn't get included in our engines, but it really seems like having this addon blow away that chunk of the DOM should be an intentional choice that people know is going to happen.

Hi, seeing this with ember-cli-fastboot 1.0.0 rc.2 and ember-cli-head 0.2.2.

DEPRECATION: Having fastboot specific code in app directory of 
/Users/xxx/Sites/xxx/node_modules/ember-cli-head is deprecated. Please move it to fastboot/app directory.

I think it is this https://gist.github.com/kratiahuja/d22de0fb1660cf0ef58f07a6bcbf1a1c#addon-containing-fastboot-based-initializers-as-appinstance-initializersfastbootjs

Also see ember-fastboot/ember-cli-fastboot#387 (comment)