ChromeApp中使用ChromeDevEngine缺少需要的Angular2示例？

Question

我试图让angular2演示代码在Chrome Dev Engine中运行.我完全按照这个例子,得到以下错误.

Uncaught ReferenceError: require is not defined
main.js:4 Uncaught TypeError: Cannot read property 'Component' of undefined

但是,当我将完全相同的代码放在其他地方(Python提供的静态HTML)时,它按预期工作.当我检查元素或检查背景页面时,我没有在页面上收到任何其他错误.

我也尝试右键单击该项目并执行"CSP的重构"并且没有更改错误.

function AppComponent() {}

AppComponent.annotations = [
  new angular.Component({
    selector: 'my-app'
  }),
  new angular.View({
    template: '<h1>My first Angular 2 App</h1>'
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});

<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
<my-app></my-app>

这是我的清单

{
  "manifest_version": 2,
  "name": "myApp",
  "short_name": "myApp",
  "description": "",
  "version": "0.0.1",
  "minimum_chrome_version": "38",
  "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

所以我发现问题是该片段包含的angular2_sfx.js和angular2.dev.sfx.js文件之间的区别.下面是angular2_sfx.js.将其与开发版的30k +行进行比较.

"use strict";
var $__angular2__;
var angular = ($__angular2__ = require("./angular2"), $__angular2__ && $__angular2__.__esModule && $__angular2__ || {default: $__angular2__});
var _prevAngular = window.angular;
angular.noConflict = function() {
  window.angular = _prevAngular;
  return angular;
};
window.angular = angular;
//# sourceMappingURL=angular2_sfx.es6.map

//# sourceMappingURL=./angular2_sfx.map

Answer 1

@ user41341是在正确的道路上,但可能错过了一些信息.由于您从NPM安装了angular2,因此您的repo具有您发布的angular2-sfx.js,大约12行代码.出于某种原因,缺少NPM仓库,angular2.dev.sfx.js其中包含大约30,000行代码.不太确定为什么会有这么多缺失,但切换到开发版应该会给你所需要的一切.