htmlember.jsember-climeta-tags

Error: Could not read config from meta tag in EmberCLI

I'm getting the following error on my EmberCLI app: Could not read config from meta tag with name "my-app-name/config/environment"

I read that it has to do with having the correct content-for handlebars in app/index.html but I have all of them there:

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

    {{content-for "head"}}
    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/my-app-name.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="assets/vendor.js"></script>
    <script src="assets/my-app-name.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

My config/environment.js file is: 

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'my-app-name',
    environment: environment,
    contentSecurityPolicy: { 'connect-src': "'self' https://auth.firebase.com wss://*.firebaseio.com" },
    firebase: 'https://my-app-name.firebaseio.com/',
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    }
  };

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {
  }

  return ENV;
};

Am I missing a meta tag? Is this also the reason my browser only displays when I deploy the app through firebase: {{content-for "head"}} {{content-for "head-footer"}} {{content-for "body"}} {{content-for "body-footer"}}

enter image description here

Thanks!

Solution

  • Ember by default stores config data in a meta tag. In my app, we opted out of storing in the meta tag, I think due to neededing to support IE8.

    You can quickly fix this in your ember-cli-build.js or brocfile.js adding this line:

    module.exports = function(defaults) {
  var app = new EmberApp({
    //...
  });
  app.options.storeConfigInMeta = false;
});

    You can read more here: https://github.com/ember-cli/ember-cli/pull/2298