2

我想实现 Angular 2 的安全功能，特别是 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>

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

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

4

3 回答 3

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

于 2016-08-02T04:20:55.697 回答
0

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

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

祝你好运

于 2016-07-29T18:25:21.797 回答
0

目前推荐的引导/启动 Angular 2 项目的方法是使用Angular CLI，看看这篇很棒的帖子！希望能帮助到你 ;）

于 2016-08-02T07:16:19.557 回答