Angular 2 快速入门为什么我们需要 System.import in index.html答案

【问题标题】：Angular 2 quickstart why do we need System.import in index.htmlAngular 2 快速入门为什么我们需要 System.import in index.html
【发布时间】：2017-05-10 17:10:58
【问题描述】：

我在 Angular 2 中测试我的 QuickStart 教程版本，我使用了一个 bundle js 文件。 index.html 是这样的：

<html>
  <head>
    <title>Angular 2 QuickStart Deploy</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="lib/shim.min.js"></script>
    <script src="lib/zone.js"></script>
    <script src="lib/Reflect.js"></script>
    <script src="lib/system.src.js"></script>
    <script>
      System.import('app').catch(function(err) { console.error(err); });
    </script>
  </head>
  <!-- 2. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <!-- application bundle -->
    <script src="app/bundle.app.js"></script>
  </body>
</html>

所以当我执行这个时，我的 Hello world 消息会显示在屏幕上，但控制台中出现错误syntax error: unexpected token <

经过多次测试，我意识到如果我从 index.html 文件中删除以下行，一切正常并且不会显示错误消息。 System.import('app').catch(function(err){ console.error(err); });

所以...我认为这一行是应用程序的入口点，带有引导程序的主文件，但显然不需要它。我错过了什么吗？

谢谢。

更新

这是带有和不带有 System.import 的结果的 2 个屏幕截图在这两种情况下，它似乎都在工作，当 System.import 不在 index.html 中时没有错误，否则有错误。此外，当 System.import 在索引中时，它似乎正在尝试加载应用程序模块，并且以某种方式给出了错误。我真的不明白为什么会这样。

另外，关于应用程序的 systemjs.config.js：

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };
...

我使用 systemjs-builder 在 Gulp 中创建了包

gulp.task('bundle:app', () => {
  builder.buildStatic('app/*.js', 'web/app/bundle.app.js')
  .then(function() {
    console.log('Build complete');
  })
  .catch(function(err) {
    console.log('error ' + err);
  })
})

【问题讨论】：

System.import 是入口点。它试图从.../app 路径解析app 模块并从那里加载html 的事实表明app 在systemjs.config.js 中没有正确定义。
我用 system.config.js 的一部分更新了我的问题。我的部署文件夹中的结构是 ./web/app 用于我的 bundle.app.js 和 /web 中的 index.html。
那么它应该加载app/main.js，所以不清楚为什么它只加载app。整个事情是不稳定的，包版本很重要。一个 plunker MCVE 将有助于解决这个问题。我看到您已经使用真实代码更新了 index.html。这就解释了为什么它在没有System.import 的情况下也能工作。如果您有捆绑脚本，则不需要System.import。这是一个或另一个。
是的，我从没有捆绑包的先前版本中复制了 index.html。我不知道使用捆绑包不需要 System.import 初始模块。这是为什么？创建捆绑包时，我没有指定要加载的任何初始模块。
如果问题不包含必要的详细信息，则无法获得高质量的答案。目前尚不清楚bundle.app.js 是如何构建的以及它包含什么。如果它作为入口点工作并且包含与System.import 应该加载的相同的main.js，则不需要另一个入口点（并且可能有害）。

标签： angular systemjs

【解决方案1】：

您确实需要System.import 来引导和运行您的应用程序。

没有它就无法运行，如果是这样，您的浏览器中可能有一个兑现版本。

错误：

syntax error: unexpected token <

通常表示某些脚本文件未正确加载，或者您有错误导致您的应用编译的 JS 文件无法加载。

如果没有关于您的错误和控制台输出的更多信息，就很难判断到底是什么问题。

【讨论】：

谢谢，@Boyan。我尝试在我的浏览器中清理内存缓存，我也在其他浏览器中尝试过，但它在没有 System.import (??) 的情况下工作。我更新了我的问题以提供更多信息以防万一。
我现在明白了。就像@estus 建议的那样，您不需要 system.import 和 bundle.js 文件。捆绑用于组合所有脚本并从单个脚本提供所有内容。这通常在您在生产环境中提供应用程序时完成。建议您在开发时使用 System.Import。

【解决方案2】：

而不是：

System.import('app').catch(function(err) { console.error(err); });

根据我个人的经验，我认为最好使用：

System.import('main.js').catch(function(err){ console.error(err); });

【讨论】：