web-dev-qa-db-ja.com

Angular 2クイックスタートなぜindex.htmlにSystem.importが必要なのですか？

バンドルjsファイルを使用するAngular 2）からQuickStartチュートリアルのバージョンをテストしていました。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がインデックスに含まれている場合、アプリモジュールを読み込もうとしているようで、どういうわけかエラーが発生しています。なぜそれが起こるのか本当に理解できません。

enter image description hereenter image description here

また、アプリに関する私の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);
  })
})
_
angularsystemjs
8
David

System.importをbootstrapにして、アプリケーションを実行する必要があります。

それなしでは実行できません。実行する場合は、ブラウザにキャッシュバージョンがある可能性があります。

エラー：

syntax error: unexpected token <

これは通常、一部のスクリプトファイルが正しく読み込まれなかったか、アプリでコンパイルされたJSファイルを読み込めないエラーが発生したことを示しています。

エラーとコンソールの出力に関する詳細情報がないと、問題が正確に何であるかを判断するのは困難です。

4
Ben Richards

のではなく：

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

私の個人的な経験では、以下を使用する方が良いと思います。

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