Angular 2 - 当前（正确的）引导过程是什么？

Question

我想实现 Angular 2 的 security functionality，特别是 CSRF，它使用 XSRFStrategy 提供程序。我使用的当前引导过程还不足以实现此提供程序。

这带来了寻找加载和初始化 Angular 2 的最佳（正确？）方法的挑战。我尝试了几种方法，但现在唯一可行的方法已被弃用。

我已经采用了这种方法：

<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.min.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
<script>
System.config({
    transpiler: "typescript",
    packages: {
        app: { main: 'app', defaultExtension: "ts" }
    }
});
System.import("app").then(null, console.error.bind(console));
</script>

我无法让它工作（来自 Angular 2 的 5 Min Quickstart 演示）：

<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<script>
(function(global) {
    var map = {
        app:                          'app', // 'dist',
        '@angular':                   'https://npmcdn.com/@angular',
        '@angular/common':            'https://npmcdn.com/@angular/common@2.0.0-rc.4',
        'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
        rxjs:                         'https://npmcdn.com/rxjs@5.0.0-beta.10'
    };

    var packages = {
        app:                          { main: 'app', defaultExtension: 'js' },
        rxjs:                         { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index', defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd', defaultExtension: 'js' };
    }
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);
</script>

也不是来自 stackoverflow 的推荐设置 here (Plunkr)，日期为 2016 年 6 月 16 日。此设置专门解决了来自 http 的无效提供程序错误。

引导 Angular 2 的最佳方式是什么？

Answer 1

Here is the bootstrap process used by the angular team. 
They created this plunker to help contributors report issues.

http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview

Answer 2

您在寻求最佳实践但使用在线 CDN？这不是最佳实践。你应该按照 5 分钟的快速开始，或者你可以从 github 下载 angular 2 种子，有很多： https://github.com/angular/quickstart

https://github.com/angular/angular-cli

祝你好运

Answer 3

目前推荐引导/启动 Angular 2 项目的方法是使用 Angular CLI，看看this 的好帖子！希望对您有所帮助；）