使用SystemJS引导角度RC4会引发Uncaught SyntaxError

Question

在我目前的Angular 2项目中，我最近开始升级到最新版本候选版本2.0.0-RC4。来自测试版本，这意味着更改所有模块导入以使用新的@angular前言。

迁移我的所有代码以使用新的前言后，我使用新的systemJS配置文件遇到了麻烦。在我的配置文件中，我将名称'app'映射到我编译的typescript文件文件夹，但是配置中的某些内容似乎有问题导致浏览器抛出以下错误：

systemjs.config.js:1 Uncaught SyntaxError: Unexpected token <

错误集中在html文件的第一个尖括号。好像systemJS尝试将index.html作为配置文件运行。

地图和包目前与angular quickstart tutorial中使用的类似：

//systemjs.config.js
var map = {
    'app': 'app/dist/ts', // 'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs'
};

var packages = {
    'app': {
        main: 'bootstrap.js',
        defaultExtension: 'js'
    },
    'rxjs': {
        defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
        main: 'index.js',
        defaultExtension: 'js'
    },
};

应用程序在索引中引导，并带有以下行：

//index.html
<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>
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err) {
        console.error(err);
    });
</script>

知道如何解决这个问题吗？提前致谢 ：）

Answer 1

还有一些与RC版本有关的事情。事实上，您需要在SystemJS配置的@angular/core块中明确指定packages，...等模块。

例如：

var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
  packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);

您的错误是因为找不到模块的404。如果您在浏览器中查看devtools的“网络”选项卡，您将看到缺少哪个模块...

Answer 2

从这段代码你粘贴调试问题可能是不可能的，因为从现在开始文件似乎是正确的。由于您的文件结构，即使systemjs.config.js中的任何模块未正确加载，也可能出现此错误。

我创建了一个小角度2应用程序。你可以在Github上看到它的来源here。请查看那里的systemjs.config.js和文件结构。我希望它可以帮助您解决问题，因为应用程序正常工作。如果有些困惑，请询问。谢谢

Answer 3

在Thierry的回应之后，我试图弄清楚哪些文件没有正确加载，并得出结论，问题根本不是角度或系统问题。 SystemJS尝试加载index.html，因为后端节点服务器为所有请求提供index.html，因为angular需要在每次请求时接收索引。正确配置服务器以在请求时提供systemjs.config.js后，问题就消失了。感谢Thierry的提示！