2016-07-07 7 views
6

私はバンドルjsファイルを使用するAngular 2からQuickStartチュートリアルの私のバージョンをテストしていました。 index.htmlにはこのようなものです:私はこれを実行するときに、私のHello Worldメッセージが画面に表示されているAngular 2 quickstartなぜindex.htmlにSystem.importが必要ですか

<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> 

が、エラーが多くのテストの後、コンソールsyntax error: unexpected token <

にあります、私がいることを実感しますindex.htmlファイルから次の行を削除すると、すべてが機能し、エラーメッセージは表示されません。 System.import('app').catch(function(err){ console.error(err); });

だから私は、このラインはアプリケーションのエントリーポイントであると主張しました。メインファイルはブートストラップですが、明らかにそれは必要ありません。何か不足していますか?

ありがとうございました。

UPDATE

これは、と、それはSystem.importはindex.htmlを中としていないとき、それはエラーなしで、働いているようだどちらの場合もSystem.import なしの結果の2つのスクリーンショットですそうでなければエラー。また、System.importがインデックスにあるときは、アプリケーションモジュールを読み込もうとしているようだが、何とかエラーが出ているようだ。なぜそれが起こるのか本当に分かりません。

enter image description here enter 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ビルダー

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); 
    }) 
}) 
+0

'System.import' *は*エントリポイントです。 'app/app'モジュールを' .../app'パスから解決し、そこからhtmlをロードしようとすると、 'app'が' systemjs.config.js'で正しく定義されていないことが分かります。 – estus

+0

自分のsystem.config.jsの一部で質問を更新しました。私のdeployフォルダの構造は、/ webのbundle.app.jsとindex.htmlの./web/appです。 – David

+0

それは 'app/main.js'を読み込むことになっているので、' app'だけをロードする理由は不明です。すべてが不安定で、パッケージのバージョンが重要です。プランナー[MCVE](http://stackoverflow.com/help/mcve)がこれを解決するのに役立ちます。実際のコードでindex.htmlを更新したことがわかります。これはなぜ 'System.import'なしで動作するのかを説明します。スクリプトをバンドルしている場合、 'System.import'は必要ありません。それはどちらか一方です。 – estus

答えて

3

を使用してがぶ飲みでバンドルを作成System.importを実行して、アプリケーションをブートストラップして実行します。

これがなくては実行できません。実行すると、ブラウザにキャッシュされたバージョンがある可能性があります。

エラー:

syntax error: unexpected token < 

は、スクリプトファイルの一部が正しくロードされませんでした、またはあなたのアプリが読み込まれてからJSファイルをコンパイル防ぐエラーを持っていることは通常徴候です。

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

+0

ありがとう、@Boyan。私はブラウザでメモリキャッシュを消去しようとしましたが、他のブラウザでも試しましたが、System.import(??)なしで動作しています。私の質問を更新して、より多くの情報を提供してください。 – David

+0

私は今参照してください。 @estusのように、system.importとbundle.jsの両方のファイルは必要ありません。バンドルは、すべてのスクリプトを結合し、単一のスクリプトからすべてを提供するために使用されます。これは通常、プロダクションでアプリを提供しているときに実行されます。開発中にSystem.Importを使用することが推奨されます。 –

0

むしろより:私の個人的な経験で

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

、私はそれを使用する方が良いと思う:

System.import('main.js').catch(function(err){ console.error(err); }); 
関連する問題