1

我正在尝试让 angular2 演示代码在 Chrome 开发引擎中运行。我完全按照这个例子，得到了以下错误。

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
4

2 回答 2

5

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

于 2015-04-28T12:39:18.450 回答
-1

改为使用.dev.sfx.js。

sfx.js您引用的角度构建中不存在该扩展。

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

于 2015-04-27T21:27:32.823 回答