ember-engine + ember-page-title fails

[sarathkumarbaskaran]

Stack trace

ember.debug.js:26518 Error: Assertion Failed: Expected component:head-content to resolve to an Ember.Component but instead it was [object Object].
    at assert (ember.debug.js:13695)
    at validateType (ember.debug.js:13002)
    at Class.resolve (ember.debug.js:12704)
    at resolve (ember.debug.js:10640)
    at Registry.resolve (ember.debug.js:10311)
    at Registry.resolve (ember.debug.js:10315)
    at Container.factoryFor (ember.debug.js:9720)
    at Class.factoryFor (ember.debug.js:37715)
    at Class.componentFor (ember.debug.js:45690)
    at lookupComponentPair (ember.debug.js:47322)

ember.debug.js:26518 Error: Could not find module `test-engine/templates/head` imported from `test-engine/components/head-content`
    at missingModule (loader.js:247)
    at findModule (loader.js:258)
    at Module.findDeps (loader.js:168)
    at findModule (loader.js:262)
    at requireModule (loader.js:24)
    at Class._extractDefaultExport (index.js:392)
    at Class.resolveOther (index.js:113)
    at Class.superWrapper [as resolveOther] (ember.debug.js:45379)
    at Class.resolve (ember.debug.js:12695)
    at resolve (ember.debug.js:10640)

[tim-evans]

Hi, could you provide a reproducible test for this, either in repository form or ember twiddle form so I can help with this?

[robclancy]

This is related to ember-fastboot/ember-cli-head#23.

[robclancy]

Latest version doesn't give the error above, but it also still doesn't work. Fails silently it seems.

[robclancy]

Okay so instructions on getting this working on 4.0.0 with an engine.

1. add ember-page-title to the engines package.json

  "dependencies": {
    "ember-cli-htmlbars": "*",
    "ember-cli-babel": "*",
    "ember-page-title": "*"
  },

2. add headData to the engine.js services dependencies

const Eng = Engine.extend({
  modulePrefix,
  Resolver,
  dependencies: {
    services: [
      'headData',
    ],
  },
});

3. add headData to the app.js engines dependencies

const App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  Resolver,
  engines: {
    account: {
      dependencies: {
        services: [
          'headData',
        ],
      },
    },
  },
  ...

4. I think you now also need to override head.hbs. I'm not sure but worth a try to do it as mentioned in the docs. I couldn't get this working without overriding it in general.

app/templates/head.hbs

<title>{{model.title}}</title>

[robclancy]

What I posted doesn't fully work. It works on fresh loads on any page. But only for the initial engine/app. So if you load an app route it works there only, all engines it won't. Or if you load into an engine then it doesn't work in app or any other engine.

[tim-evans]

😭

[robclancy]

Engines are just a mess anyway.

[omarhamdan]

This worked for me: ember-page-title: 4.0.2. (Only tested with one engine)

1. add ember-page-title to the engines package.json

  "dependencies": {
    "ember-page-title": "*"
  },

2. Create head.hbs file in ${engine-name}/addon/templates

 <title>{{model.title}}</title>

3. add to ${engine-name}/addon/templates/application.hbs

{{head-layout}}

[robclancy]

I did this change but I still have the issue of going in or out of an engine it doesn't work. What happens is the first loaded part (if app or engine) gets the page titles working but if you go to anything else it stops (going back works in the original area).

[knownasilya]

Could someone create an engine test PR so we can work on getting this resolved?

[robclancy]

I refactored away from engines and life has been easier, so this issue doesn't concern me anymore and I don't suggest anyone use engines at all. I'm gonna unwatch this.

[danieledraganti]

This is still an issue for me, since I have quite a big web app that I had to split with engines. Just to let you know. I'll try and look into the code when I have time.
P.S. Engines are here to stay as far as I know, so I'm afraid this bug will have to be solved eventually... even though I realize it's a pain in the butt.

[robclancy]

@danidr we have a very big app, and using engines was a very bad decision (by me). Most problems they solve are being solved in other ways with ember octane. And it barely has development on them.
So I recommend noone use them at all. I can share the script that I made to convert back into app if anyone wants it.

I'm confident you will continue to run into other issues are ember updates happen etc if you use engines (in-repo ones anyway, the out of repo ones that are more standalone I think are still mostly okay).