Ember JS请在调用`compile`

时间：2015-07-06 08:13:02

标签： ember.js ember-cli

尽管我已按照此链接Ember.js: HtmlBars and the Handlebars.compile command上的说明操作，但我仍然收到以下错误。

下面我复制并粘贴了我的package.json，bower.json和brocfile.js。不确定是什么导致了这个问题。

未捕获错误：无法呼叫compile 加载模板编译器。请在致电ember-template-compiler.js之前加载compile。

的package.json 

    {
  "name": "ui",
  "version": "0.0.0",
  "description": "Small description for ui goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "bower": "^1.3.12",
    "broccoli-asset-rev": "^2.0.2",
    "broccoli-funnel": "^0.2.3",
    "broccoli-merge-trees": "^0.2.1",
    "ember-cli": "0.2.7",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-cookie": "^0.1.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-htmlbars": "0.7.6",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-less": "^1.1.1",
    "ember-cli-pusher": "0.1.2",
    "ember-cli-qunit": "0.3.13",
    "ember-cli-simple-auth": "^0.7.3",
    "ember-cli-simple-auth-oauth2": "^0.7.2",
    "ember-cli-simple-auth-torii": "^0.8.0-beta.1",
    "ember-cli-tooltipster": "0.0.6",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.0.0-beta.18",
    "ember-disable-proxy-controllers": "^1.0.0",
    "ember-export-application-global": "^1.0.2",
    "ember-idx-button": "^0.1.3",
    "ember-idx-forms": "^0.5.1",
    "ember-mousetrap": "0.2.0",
    "ember-template-compiler": "^1.9.0-alpha",
    "express": "^4.8.5",
    "glob": "^4.0.5",
    "torii": "^0.3.3"
  }
}

bower.json 

{
  "name": "ui",
  "dependencies": {
    "ember": "1.12.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.1.3",
    "ember-data": "1.0.0-beta.18",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.15",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1",
    "bootstrap": "~3.3.4",
    "ember-addons.bs_for_ember": "~0.7.0",
    "slick.js": "~1.4.0",
    "jquery-mousewheel": "~3.1.12",
    "videojs-youtube": "~1.2.8",
    "tooltipster": "~3.3.0",
    "owl-carousel2": "latest",
    "ember-mousetrap": "~0.2.0",
    "ember-validations": "2.0.0-alpha.3",
    "rsvp": "~3.0.18",
    "bootswatch": "v3.3.4+1",
    "ember-simple-auth": "0.7.3",
    "progressbar.js": "~0.8.1",
    "jquery-autocomplete": "~1.1.1",
    "jssocials": "~0.2.0",
    "ember-pusher": "0.1.1"
  },
  "resolutions": {
    "ember-cli-test-loader": "0.1.3",
    "ember-load-initializers": "0.1.4",
    "loader.js": "3.2.0",
    "ember": "1.12.0",
    "ember-data": "1.0.0-beta.18",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "jquery": "^1.11.1",
    "select2": "~4.0.0"
  }
}

Brocfile.js 

    /* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var pickFiles = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');

var app = new EmberApp();

app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-core.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-notifications.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-alert.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-button.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-modal.max.js');

app.import('bower_components/bootstrap/js/modal.js');
app.import('bower_components/bootstrap/js/dropdown.js');

// TF - Start
app.import('bower_components/rsvp/rsvp.js');
app.import('bower_components/tooltipster/css/themes/tooltipster-light.css');


app.import('bower_components/mousetrap/mousetrap.js');
app.import('app/styles/custom.css');

//JSSocial
app.import('bower_components/jssocials/dist/jssocials.css');
app.import('bower_components/jssocials/dist/jssocials-theme-flat.css');
app.import('bower_components/jssocials/dist/jssocials.js');
app.import('bower_components/font-awesome/css/font-awesome.min.css');


//Progressbar.js
app.import('bower_components/progressbar.js/dist/progressbar.min.js');
app.import('bower_components/progressbar.js/local-dev/main.css');


//https://stackoverflow.com/questions/28213301/ember-js-htmlbars-and-the-handlebars-compile-command
app.import('bower_components/ember/ember-template-compiler.js');

var fontAwesome = pickFiles('bower_components/font-awesome/fonts',{
    srcDir: '/',
    files: ['fontawesome-webfont.eot','fontawesome-webfont.svg','fontawesome-webfont.ttf','fontawesome-webfont.woff','fontawesome-webfont.woff2','FontAwesome.otf'],
    destDir: '/fonts'
});

var videojsFonts = pickFiles('bower_components/video.js/dist/video-js/font',{
    srcDir: '/',
    files: ['vjs.ttf','vjs.woff'],
    destDir: '/assets/font'
});

var bootstrapFonts = pickFiles('bower_components/bootstrap/fonts',{
    srcDir: '/',
    files: ['glyphicons-halflings-regular.eot','glyphicons-halflings-regular.svg','glyphicons-halflings-regular.ttf','glyphicons-halflings-regular.woff','glyphicons-halflings-regular.woff2'],
    destDir: '/assets/fonts'
});


module.exports = mergeTrees([app.toTree(), videojsFonts, bootstrapFonts, fontAwesome]);

配置/ environment.js 

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'ui',
    environment: environment,
   // firebase: 'https://blistering-torch-5880.firebaseio.com/',
    baseURL: '/',
    locationType: 'auto',
    'simple-auth': { 
                    /*
                      The authenticationRoute is where the app will redirect
                      if it enters an authenticated route without being authenticated
                      */
                     authenticationRoute: 'session',
                     authorizer: 'simple-auth-authorizer:oauth2-bearer',
                     crossOriginWhitelist: ['http://localhost:9990/'] 
                  },
    torii: {
      providers: {
        // https://developers.facebook.com/docs/facebook-login/permissions/v2.3
        'facebook-connect': {
          appId: '**************',
          scope: 'public_profile,email,user_friends,user_likes,user_education_history'
        },
        'google-oauth2-bearer': {
          //https://console.developers.google.com/project/275897053280/apiui/credential?authuser=0
            redirectUri: 'http://localhost:4200/',
            apiKey: '********************,
            scope: 'https://www.google.com/m8/feeds'
        }
      }
    },            
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    // Here you can pass flags/options to your application instance
    // when it is created
    APP: {
      // https://pusher.com/docs/client_api_guide/client_connect#connecting
      PUSHER_OPTS: {
            key: '***************',
            connection: { authEndpoint: 'http://localhost:9990/api/v1/auth/pusher', encrypted: true },
            logAllEvents: true,
            //https://pusher.com/docs/authenticating_users#authEndpoint/lang=cs-mvc
        }
    }
  };

ENV.contentSecurityPolicy = {
   'default-src': "'none'",
    'script-src': "'self' 'unsafe-eval' https://www.youtube.com/ https://s.ytimg.com/",
    'font-src': "'self' data: http://fonts.gstatic.com/", 
    'connect-src': "'self' http://localhost:9990 wss://*.firebaseio.com ws://ws.pusherapp.com/",
    'img-src': "'self' http://i2.ytimg.com https://img.youtube.com/ data:",
    'style-src': "'self' 'unsafe-inline' http://fonts.googleapis.com/", //'unsafe-inline', I believe was required 
    'media-src': "'self'",
    'frame-src': "'self' https://img.youtube.com/ https://www.youtube.com/ ",
    'report-uri': "http://localhost:4200" //https://github.com/rwjblue/ember-cli-content-security-policy/issues/12
}


  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 = 'auto';

    // 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;
};

这是导致问题的代码中的特定位置：

ember.debug.js:33409 Uncaught Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.

       exports['default'] = function (templateString, options) {
        if (!compile && Ember.__loader.registry["htmlbars-compiler/compiler"]) {
          compile = requireModule("htmlbars-compiler/compiler").compile;
        }

        if (!compile) {
          throw new Error("Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.");
        }

3 个答案:

答案 0 :(得分：3)

要在Ember 1.x上加载到2.12.x，您需要输入ember-cli-build.js（如其他问题所述）

app.import('bower_components/ember/ember-template-compiler.js');

对于Ember 2.13及以上版本（glimmer2和没有凉亭的新方法）我必须在ember-cli-build.js上使用以下内容加载此导入：

app.import('vendor/ember/ember-template-compiler.js');

答案 1 :(得分：1)

我也必须这样做。我需要在下面添加导入。

$page = "<div class=\"title-container\">\n                            <h1>Text here<span> /Sub-text/</span> </h1>\n                                                     </div>";

$dom = new DOMDocument;
$dom->loadHTML($page);
$hs = $dom->getElementsByTagName('h1');
foreach ($hs as $h) {
    $enttitlenodes = $h->getElementsByTagName('span');
    if ($enttitlenodes->length > 0 && $enttitlenodes->item(0)->tagName == 'span')
    {
        $entitle = trim($enttitlenodes->item(0)->nodeValue, " /");
        echo $entitle . "\n";
        $h->removeChild($enttitlenodes->item(0)); 
    }
    $hutitle = $h->nodeValue;
    echo $hutitle;
}

查看答案here

答案 2 :(得分：1)

您使用的是版本1.12的ember，但版本是1.10-beta3的ember-template-compiler。使用Ember 1.12附带的ember-template-compiler版本，如下所示：

app.import('bower_components/ember/ember-template-compiler.js');

请注意，ember-template-compiler不再是单独的bower存储库，而是包含在Ember中。

不幸的是，对链接的SO问题的接受答案不再正确。最高投票答案（正好在下面）现在是正确的答案。

另请注意，不推荐使用pickFiles和broccoli-static-compiler。使用ember-cli 0.2.7，您需要使用西兰花漏斗。

相关问题
最新问题