CODEWITHSUNDEEP
angularangular2-servicesangular2-http
ebakunin
ebakunin

Reputation: 3801

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

I want to implement Angular 2's security functionality, specifically CSRF, which uses the XSRFStrategy provider. The current bootstrap process I use is not recent enough to implement this provider.

This brings up the challenge of finding the best (correct?) way to load and initialize Angular 2. I have tried several approaches and the only one that works is now deprecated.

I have gotten this approach to work:

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

I cannot get this to work (from Angular 2's 5 Min Quickstart demo):

<script src="https://npmcdn.com/[email protected]?main=browser"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
<script>
(function(global) {
    var map = {
        app:                          'app', // 'dist',
        '@angular':                   'https://npmcdn.com/@angular',
        '@angular/common':            'https://npmcdn.com/@angular/[email protected]',
        'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
        rxjs:                         'https://npmcdn.com/[email protected]'
    };

    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>

Nor the recommended setup here (Plunkr) from stackoverflow, dated June 16, 2016. This one specifically addresses an invalid provider error from http.

What is the best way to bootstrap Angular 2?

Upvotes: 2

Views: 314

Answers (3)

Kutyel
Kutyel

Reputation: 9084

The current recommended way to bootstrap/start an Angular 2 project is to use the Angular CLI, have a look at this great post! Hope it helps ;)

Upvotes: 0

Dan Rasmuson
Dan Rasmuson

Reputation: 6023

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

Upvotes: 1

Avi
Avi

Reputation: 1964

You are asking for best practice but using online CDN? this can't be best practice. you should follow the 5 minutes quick start as is, or you can download angular 2 seed from github, there are plenty: https://github.com/angular/quickstart

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

Good luck

Upvotes: 0

Related Questions