Angular 2 - 当前（正确的）bootstrap 流程是什么？

Question

我想实现 Angular 2 的 security functionality，特别是使用 XSRFStrategy 提供程序的 CSRF。我当前使用的 bootstrap 流程还不够新，无法实施此提供程序。

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

我已经采用这种方法工作：

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

也不是来自 Whosebug 的推荐设置 (Plunkr)，日期为 2016 年 6 月 16 日。这个专门解决了来自 http.

的无效提供程序错误

bootstrap Angular 2 的最佳方法是什么？

Answer 1

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

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

祝你好运

Answer 2

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 3

目前推荐 bootstrap/start Angular 2 项目的方法是使用 Angular CLI，看看this太棒了post！希望对您有所帮助 ;)

Angular 2 - 当前（正确的）bootstrap 流程是什么？

Angular 2 - What is the current (correct) bootstrap process?

angular

angular2-services

angular2-http