Question

我正在将rc5项目更新为rc6。当我为项目服务时，我得到Error: ReferenceError: $traceurRuntime is not defined。我甚至不知道出了什么问题。我的system.config.js看起来如下：

(function (global) {
  var map = {
    'app': 'app'
  };
  var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  System.config({
    defaultJSExtensions: true,
    map: map,
    packages: packages
  });
})(this);

index.html如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/">
  <title>Angular2 rc6</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <!-- endbuild -->

  <!-- build:js lib/core.js -->
  <script src="../node_modules/core-js/client/shim.min.js"></script>
  <script src="../node_modules/zone.js/dist/zone.js"></script>
  <script src="../node_modules/reflect-metadata/Reflect.js"></script>
  <script src="../node_modules/systemjs/dist/system.src.js"></script>
  <!-- endbuild -->
  <!-- dependencies  -->
  <script src="lib/dependencies.bundle.js"></script>

  <!-- build:js lib/dependencies.bundle.js 
  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
  <script src="../node_modules/@angular/common/bundles/common.umd.js"></script>
  <script src="../node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
  <script src="../node_modules/@angular/core/bundles/core.umd.js"></script>
  <script src="../node_modules/@angular/forms/bundles/forms.umd.js"></script>
  <script src="../node_modules/@angular/http/bundles/http.umd.js"></script>
  <script src="../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
  <script src="../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
  <script src="../node_modules/@angular/router/bundles/router.umd.js"></script>
  -->
  <!-- endbuild -->

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app/main').catch(function(err){ console.error(err); });
  </script>
</head>

<body>
  <app>Loading...</app>
</body>

</html>

我认为这个问题在某种程度上与systemjs相关，但无法弄清楚我到底做错了什么？

修改我发现问题出在dependencies.bundle.js中，我正在为依赖包生成。

 System.register("@angular/http/src/static_request.js", ["@angular/http/src/facade/lang.js", "@angular/http/src/body.js", "@angular/http/src/enums.js", "@angular/http/src/headers.js", "@angular/http/src/http_utils.js", "@angular/http/src/url_search_params.js"], function($__export) {
      "use strict";
...
w = (typeof window === 'undefined' ? 'undefined' : $traceurRuntime.typeof(window)) == 'object' ? window : noop;

Answer 1

从RC6开始，如果使用SystemJS加载Angular，你现在必须使用UMD包。

来自Changelog

npm包：ESM（ES6模块）格式的代码现在发布在npm包中的默认位置，其中package.json的主条目指向UMD包（主要用于节点，webpack 1用户）

如果您使用SystemJS加载Angular，则应调整SystemJS配置以指向UMD包（存在于npm包中）。

请参阅此example SystemJS config。

我正在使用SystemJS Builder，这个变化给了我一些我需要解决的严重问题。

Answer 2

SystemJs使用traucer作为默认的转换器，以某种方式添加：

transpiler：false

到我的systemjs config为我解决了这个问题。

参考： https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#transpiler

Angular 2 RC6错误：ReferenceError：未定义$ traceurRuntime

2 个答案: