Как использовать Angular2, systemjs локально БЕЗ node.js/npm

Это index.html с angular -alpha35:

    <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 и без подключения к Интернету?

Ответ 1

Благодаря знанию разницы в версии пакетов от Arnaud Boeglin, я проверил с помощью es6-module-loder и, случайно, эта установка работает отлично (до сих пор я не" t найти любую проблему):

    <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-модуль-загрузчик должен быть перед системой в теге <head>.

Ответ 2

Вы должны включить версию sfx angular 2 следующим образом:

<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