web-dev-qa-db-ja.com

node.js / npmなしでAngular2、systemjsをローカルで使用する方法は？

これはangular-alpha35のindex.htmlです：

    <html>
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>APP Ang2</title>
        <script src="scripts/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="scripts/bundle35/angular2.dev.js"></script> 
        <script src="scripts/bundle35/router.dev.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <app>Loading...</app>

        <script>System.import('app').catch(console.log.bind(console));</script>

    </body>
    </html>

また、インターネット接続があり、system.jsをロードできる場合は正常に機能します。次のようにsystem.jsのローカルコピーを取得しようとすると、次のようになります。

<script src="scripts/[email protected]"></script>

次に、ルートフォルダにrx.jsを配置し、ファイルの最後に次の行を配置するまで、何も機能しません。

    <script src="scripts/[email protected]"></script>
</body>
</html>

その場合、System.jsは正常に機能しますが、この場合、angular2バインディングに奇妙な問題があります。ページを操作するまで機能しません（フォームを送信する、選択を開く、単純に非表示にしている場合でもdivのサイズを変更するなど）。ページ上で何かが変更されるとすぐに、すべてのバインディングが機能し、ページが復活します。

Node.jsやインターネット接続なしでこれらすべてをローカルで機能させる方法は？

javascriptangularsystemjs
10
kakaja

Arnaud Boeglin's パッケージのバージョンの違いのアイデアのおかげで、es6-module-loderで確認しましたが、たまたまこのインストールは完全に機能します（これまでのところ問題は見つかりませんでした）。

    <script src="scripts/traceur-runtime.js"></script>
    <script src="scripts/es6-module-loader.js"></script>
    <script src="scripts/[email protected]"></script>
    <script src="scripts/bundle35/angular2.dev.js"></script> 
    <script src="scripts/bundle35/router.dev.js"></script>

Es6-module-loaderは、<head>タグのsystemjsの前にある必要があります。

0
kakaja

次のようにangular 2のsfxバージョンを含める必要があります：

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>

これは、ローカルにダウンロードできる自己完結型のjsファイルであることに注意してください。

Githubで作成したこのサンプルプロジェクトを確認してください。

https://github.com/alfonso-presa/angular2-es5-sample

編集：これをチェックしてくださいSO sfxの意味の詳細については、質問を確認してください： angular.dev.jsとangular.sfx.dev.jsの違い

5
Alfonso Presa