Deprecations Added in Ember 4.x

Use of Ember.assign is deprecated. You should replace any calls to Ember.assign with Object.assign or use the object spread operator.

Before:

import { assign } from '@ember/polyfills';

var a = { first: 'Yehuda' };
var b = { last: 'Katz' };
assign(a, b); // a == { first: 'Yehuda', last: 'Katz' }, b == { last: 'Katz' }

After:

var a = { first: 'Yehuda' };
var b = { last: 'Katz' };
Object.assign(a, b); // a == { first: 'Yehuda', last: 'Katz' }, b == { last: 'Katz' }

Implicit injections have been deprecated since Ember v3.26.0. As of v4.0.0, implicit injections do nothing and should be removed based on suggestions in the original deprecation.

Before:

export default {
  initialize(app) {
    app.inject('route', 'store', 'service:store');
  }
}

import { Route } from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return this.store.findQuery('user', 123);
  }
}

After:

import { Route } from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service store;

  model() {
    return this.store.findQuery('user', 123);
  }
}

For a more detailed explanation with additional examples, see the 3.x deprecation guides.

Background

Several years ago (in Ember v1 days) few browsers supported the History Location API, and other browsers could only serialize the router location into an URL hash my/path#/ember/route.

To handle this dynamically, Ember had an AutoLocation class that would use feature-detection to determine if the browser supported the History Location API, and use either 'hash' or 'history' as the underlying mechanism.

These days, virtually all browsers support the history API, so 'auto' will always resolve to 'history' as the location mechanism. Since 'auto' has served its purpose, it's being removed.

Required Changes

Set locationType in config/environment.js to 'history'. This is it. Your app should work just like it used to.

// config/environment.js
'use strict';

module.exports = function (environment) {
  let ENV = {
    modulePrefix: 'my-app',
    environment: environment,
    rootURL: '/',
    locationType: 'history', // add or edit this line
    …
};

Advanced Stuff

1. Note that the 'hash' location type is still around, you just have to set it manually. It's sometimes used in Ember apps running inside webviews (native mobile apps), for example.

2. If you implemented your own Location class and used the detect method, this one is now deprecated.

3. If you need feature detection you can run your detection code in app/router.js, before setting the location type.

// app/router.js
export default class Router extends EmberRouter {
  location = (historyFeatureDetection() ? 'history' : 'hash');
  // …
}

For more background, read the RFC.

Use of @ember/error is deprecated. This package merely re-exports the native Error class. You should replace any uses of @ember/error with the native Error.

Before:

import EmberError from '@ember/error';

throw new EmberError("My Error");

After:

throw new Error("My Error");

The ember-error-codemod may be used to resolve this issue:

npx ember-error-codemod remove path/of/files/ or/some**/*glob.js

Using Ember.String instead of importing from @ember/string is deprecated.

Before:

import Ember from 'ember';

Ember.String.dasherize('myString'); // 'my-string'

After:

import { dasherize } from '@ember/string';

dasherize('myString'); // 'my-string'

Also please note that the @ember/string package is being moved to an addon, @ember/string. See this deprecation guide.

If you were using htmlSafe or isHTMLSafe off of Ember.String, please import them from @ember/template instead. See this deprecation guide for more information.

Importing from @ember/string without the @ember/string package as a dependency is deprecated.

The @ember/string package is being moved to an addon @ember/string.

To add the package to your project:

  ember install @ember/string

If you were importing htmlSafe or isHTMLSafe from @ember/string, please import them from @ember/template instead. See this deprecation guide for more information.