ChromeApp 中使用 ChromeDevEngine 的 Angular2 示例缺少要求?

Angular2 example in ChromeApp using ChromeDevEngine missing require?

我正试图在 Chrome 开发引擎中将 angular2 演示代码获取到 运行。我完全按照示例进行操作并得到以下错误。

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

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

我还尝试右键单击项目并执行 "refactor for 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

改用.dev.sfx.js

您引用的 angular 版本中不存在 sfx.js 扩展。

我可以告诉您检查 angular2 测试应用程序问题的主要内容是您在运行时断言中指向所有正确的目录。

@user41341 走在正确的道路上,但可能遗漏了一些信息。由于您从 NPM 安装了 angular2,因此您的存储库中包含您发布的 angular2-sfx.js,它大约有 12 行代码。由于某种原因,NPM 存储库丢失了 angular2.dev.sfx.js,它有大约 30,000 行代码。不太清楚为什么缺少这么多,但切换到开发版本应该可以为您提供所需的一切。