Question

我正在测试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); });

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

感谢。

更新

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

另外，关于app的我的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来引导并运行您的应用程序。

没有它就无法运行，如果没有，你可能在浏览器中有一个兑现版本。

错误：

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 quickstart为什么我们需要index.html中的System.import

2 个答案: