Common Issues

Content security policy

Ember CLI comes bundled with the ember-cli-content-security-policy addon which enables the Content Security Policy in modern browsers when running the development server.

The default header sent by the addon sends a policy where only content from 'self' is allowed. This means that by default, the browser will restrict your app from loading assets and data outside of localhost:4200 or doing any inline style or script modifications. If your app does any of these, you’ll see a lot of these errors:

Refused to execute inline script because it violates the following Content Security Policy directive: ...

You can get rid of these errors by modifing the CSP for your app. This is described in the addon readme.

Unsafe-Eval (CSP)

Some platforms that run on open web technology (ex. FirefoxOS) enforce strict CSP restrictions for apps. One of the more common restrictions is the Unsafe-Eval restriction, disallowing use of the eval() function or the eval operator. Since Ember CLI currently uses eval() for part of it’s integration with ES6 modules, this can be a problem.

To disable evals, add the wrapInEval: false flag to your Brocfile.js, for example:

1 // Brocfile.js
2 var EmberApp = require('ember-cli/lib/broccoli/ember-app');
3 ...
4 var app = new EmberApp({
5   wrapInEval: false
6 });
7 ...
8 module.exports = app.toTree();

npm package management with sudo

Installing packages such as bower with sudo powers can lead to permissions issues and ultimately to problems installing dependencies.

For example

Uncaught Error: Could not find module ember/resolver loader/loader.js:42

can be caused by installing bower with sudo. See https://gist.github.com/isaacs/579814 for a collection of various solutions.

Installing from behind a proxy

If you’re behind a proxy, you might not be able to install because ember-cli — or some of its dependencies — tries to git clone a git:// url. (In this scenario, only http:// urls will work).

You’ll probably get an error like this:

npm ERR! git clone git://github.com/jgable/esprima.git Cloning into bare repository '/home/<username>/.npm/_git-remotes/git-github-com-jgable-esprima-git-d221af32'...
npm ERR! git clone git://github.com/jgable/esprima.git
npm ERR! git clone git://github.com/jgable/esprima.git fatal: unable to connect to github.com:
npm ERR! git clone git://github.com/jgable/esprima.git github.com[0: 192.30.252.129]: errno=Connection timed out
npm ERR! Error: Command failed: fatal: unable to connect to github.com:
npm ERR! github.com[0: 192.30.252.129]: errno=Connection timed out

This is not a ember-cli issue per se, but here’s a workaround. You can configure git to make the translation:

bash git config --global url."https://".insteadOf git://

Usage with Sublime Text

If you are using Sublime Text 2 or 3 with ember-cli, by default it will try to index all files in your tmp directory for its GoToAnything functionality. This will cause your computer to come to a screeching halt @ 90%+ CPU usage, and can significantly increase build times. Simply remove these directories from the folders Sublime Text watches:

Sublime Text -> Preferences -> Settings - User

// folder_exclude_patterns and file_exclude_patterns control which files
// are listed in folders on the side bar. These can also be set on a per-
// project basis.
"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "tmp/*"]

Using canary build instead of release

In bower.json instead of a version number use:

"ember": "components/ember#canary",

And, following dependencies add resolutions:

"resolutions": {
  "ember": "canary"
}

This can also be applied to Ember Data:

"ember-data": "components/ember-data#canary",

And, adding to resolutions:

"resolutions": {
  "ember-data": "canary"
}

Wipe your vendor directory clean then run bower install.

Removing default ember-cli libraries

  • To use ember-cli without Ember Data

npm rm ember-data --save-dev

  • To use ember-cli without ic-ajax

npm rm ember-cli-ic-ajax --save-dev

  • To reinstall latest Ember Data version

npm install ember-data --save-dev

Solving performance issues on windows

Build times on windows are longer than on linux or mac os. Much of that penalty is not because of node or ember-cli, but because of things monitoring your filesystem. If you can (selectively!) disable your virus scanner and the Search Index Host, you will see a substantial speedup. Here’s how:

Disable Windows Search Index for temporary files

  • Go to your control panel (Windows 8: Win+X, choose “control panel”)
  • Look for Indexing Options (Use the search bar)
  • Select the location that will most likely contain your project. Usually in User
  • Click Modify
  • This brings up a directory tree with checkboxes. Navigate to your project directory and uncheck the checkbox for /tmp or anywhere else you’d like.
  • Click OK

Partially Disable Search Index on Windows 8

Disable Windows Defender for temporary files

Windows defender will be active by default on any Windows 8 machine. On Windows 7 (or earlier) you might have Windows Security Essentials installed, which works pretty similar.

While you can exclude more than just the temporary files, this would also render a virus scanner pretty useless. Excluding temporary files won’t make you any less safe. Everything that ends up there would have been in /app or /vendor before.

  • Hit your Windows Key, then start typing “defen” which should bring up “Defender as first result”. Start it.
  • In Windows Defender, choose the Settings tab, then click on Excluded files and locations on the left.
  • Click Browse
  • Navigate to your project’s tmp directory.
  • Click OK
  • Click Add
  • Click Save changes

Exclude Temp Files from Windows Defender

Many Broccoli plugins and Ember CLI addons can use symlinks to speedup the build process. When working on the Windows platform there are some caveats involved in making sure Ember CLI and other plugins can use symlinks. If symlinks are not available plugins should fall back to copying files. However the speed benefits of symlinking are substantial, so it is worth the effort to make sure Ember CLI can take advantage of them.

In order to create symlinks the account running Ember CLI must have the SeCreateSymbolicLinkPrivilege. Users in the Administrators group have this permission already. However if UAC (User Access Control) is enabled users in the Administrators group must run their shell using Run As Administrator. This is because UAC strips away certain permissions from the Administrators group, including SeCreateSymbolicLinkPrivilege.

Run As Administrator

If the user account is not part of the Administrators group you will need to add the SeCreateSymbolicLinkPrivilege in order to allow the creation of symlinks. To do this open the Local Security Policy by typing Local Security Policy in the Run Box.

Under Local Policies -> User Rights Assignment find the Create symbolic links policy and double click it to add a new user or group. Once you add your user or group has been added your user should be able to create symlinks. Keep in mind if your user is part of the Administrators group and UAC is enabled you will still need to start your shell using Run as Administrator.

Enabling Symlinks

Usage with Vagrant

Vagrant is a system for automatically creating and setting up development environments that run in a virtual machine (VM).

Running your ember-cli development environment from inside of a Vagrant VM will require some additional configuration and will carry a few caveats.

Ports

In order to access your ember-cli application from your desktop’s web browser, you’ll have to open some forwarded ports into your VM. The default ports that ember-cli uses are 4200 and 35729 for its internal web server and livereload, respectively:

Vagrant.configure("2") do |config|
  # ... 
  config.vm.network "forwarded_port", guest: 4200, host: 4200
  config.vm.network "forwarded_port", guest: 35729, host: 35729
end

Watched Files

The way Vagrant syncs folders between your desktop and the VM will break the default mechanism ember-cli uses to watch files and cause issues when updates are subsequently compiled. To restore this functionality, you’ll have to make two changes:

  1. Fall back to polling when invoking the serve command: ember serve --watcher polling.

  2. Use nfs for synced folders.

VM Setup

When setting up your VM, install ember-cli dependencies as you normally would. If you’ve already run npm install in your project’s folder from your host machine, you’ll have to delete the node_modules folder and re-install those dependencies from the VM. This is particularly necessary if you have node dependencies that use native libraries (e.g., broccoli-sass, which uses the libsass C library).

Provider

The two most common Vagrant providers, VirtualBox and VMware Fusion, will both work. However, VMware Fusion is substantially faster and will use less battery life if you’re on a laptop. As of now, VirtualBox will use 100% of a single CPU core to poll for file system changes inside of the VM.