Angular 2 快速入门为什么我们在 index.html 中需要 System.import

Question

我正在测试来自 Angular 2 的快速入门教程版本，我在其中使用了一个 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); });

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

谢谢。

更新

这是包含和不包含 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);
  })
})

Answer 1

您确实需要 System.import 到 bootstrap 和运行您的应用程序。

它不能运行没有它，如果有，您的浏览器中可能有现金版本。

错误：

syntax error: unexpected token <

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

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

Answer 2

而不是：

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

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

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

Angular 2 快速入门为什么我们在 index.html 中需要 System.import

Angular 2 quickstart why do we need System.import in index.html

systemjs

angular