application view/component in ember-cli 2.13

Question

I have recently started a new project with the most recent ember-cli (v 2.13 as stated in the topic). I am rather set on generating clean semantic html, and as such don't like the extra div.ember-view that the application generates.

Before I could create the app/views/application.js file with following content:

import Ember from 'ember';
export default Ember.Component.extend({
    tagName: ''
});

It simply used the component as application view and got rid of the root tag, however it doesn't seem to work anymore. In fact when debugging the resolver "view:application" doesn't show up at all. Is there a new way of solving this situation? Afaik routable components are not exactly in yet, are they?

Granted, my last ember project was using ember-rails (with ember 2.7), now I'm going for a pure ember-cli project, so a few things might indeed have changed.

How can the same effect be achieved now? Is it just a case of adding a special rule to resolver? Or maybe it can be reached otherwise? I learned that ember docs can be rather lacking when it comes to new obscure features...

Ember Freak Ember Freak · Accepted Answer · 2017-05-30T11:42:03

Views are removed from the Ember 2.0 API. Have a look at this deprecation https://emberjs.com/deprecations/v1.x/#toc_ember-view.

Regarding your question, you can find related discussions in the below url. https://github.com/emberjs/ember.js/issues/11486

Implementing tagName: '' is not suggested one. In current situation, you can't remove that extra div created by ember application, since ember needs that. What you can do is, you can just apply CSS style to mitigate this,

:root,
.ember-application,
.ember-application>div {
    height: 100%;
}

application view/component in ember-cli 2.13

2 Answers