anglej依存性をSystemjsでロードする

公式サイトをたどってからしばらくの間、angular2を勉強しています。 SystemJSは推奨されるモジュールローダーのようですので、私はそれを使用しようとしています。公式クイックスタート（https://angular.io/guide/quickstart）angular2プロジェクトをロードし、次のindex.htmlの例を見つけることができますから：anglej依存性をSystemjsでロードする

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

私はこのような状況に達し、systemJSですべてをロードしたいと思います：

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 2. Loading SystemJS --> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

それは可能ですか？

出典

2016-06-20 Giovanni Di Santo

私はあなたが新しいプロジェクトを生成し、あなたのためのすべてのconfigsとハードワークを行う助けるために角度-CLI（https://github.com/angular/angular-cli）を使用することをお勧めします。それはあなたをたくさん助け、時間を節約して私を信じるでしょう。物事は今のところ大きく変わっています。あなたの旅の中で、角のような良い友達を持つ方が簡単になります。

あなたがそれを使用しない場合、あなたはこのようなものが含まれますシステム-config.jsののようなファイルを作成することができ、あなたはそのバレルオブジェクト固有のライブラリに追加することができますあなたが欲しい：

var map = {}; 
/** User packages configuration. */ 
var packages = {}; 

var barrels = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    // Thirdparty barrels. 
    'rxjs', 
    // App specific barrels. 
    'app', 
    'app/shared', 
]; 
var cliSystemConfigPackages = {}; 
barrels.forEach(function (barrelName) { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 
// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
     '@angular': 'vendor/@angular', 
     'rxjs': 'vendor/rxjs', 
     'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 
// Apply the user's configuration. 
System.config({ map: map, packages: packages });

してからindex.htmlファイルにあなたが持つことができます。

<script> 
    System.import('system-config.js').then(function() { 
    System.import('app'); 
    }).catch(console.error.bind(console)); 
</script>

出典

2016-06-20 14:50:08 Cosmin

おかげFO r返事、私はanglular-cliを試したかったが、まだ成熟しているのではなく、まだ開発中であることを読んだ。 –

@GiovanniDiSantoあなたはそれを使用することができます。私もそれを使用しています。 – Cosmin

anglej依存性をSystemjsでロードする

答えて

関連する問題