ngx-bootstrap: Error when using modal - There is no directive with "exportAs" set to "bs-modal"

I am getting the following error in the console when loading a template HTML, I am using Angular 2 RC3:

There is no directive with "exportAs" set to "bs-modal"

I have imported ng2-bootstrap using the following:

<script src="lib/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

Here is my template:

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">title</h4>
            </div>
            <div class="modal-body">
                <my-cmp></my-cmp>
            </div>
        </div>
    </div>
</div>

Here is my component.ts

import {CORE_DIRECTIVES} from '@angular/common';
import {BS_VIEW_PROVIDERS, MODAL_DIRECTVES} from 'ng2-bootstrap/ng2-bootstrap';


@Component({
    selector: 'siso',
    templateUrl: 'app/component.html',
    styleUrls: ['app/component.css'],
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
    viewProviders: [BS_VIEW_PROVIDERS]
})

Here is system.config.js:

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'dist/app', // 'dist',
        'rxjs':                       'dist/lib/rxjs',
        'angular2-in-memory-web-api': 'dist/lib/angular2-in-memory-web-api',
        '@angular':                   'dist/lib/@angular',
        'moment':                     'dist/lib/moment/moment.js',
        'ng2-bootstrap':              'dist/lib/ng2-bootstrap'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'dist/lib/ng2-bootstrap':              { defaultExtension: 'js' }
    };

    var paths = {
        'ng2-bootstrap/ng2-bootstrap':   'dist/lib/ng2-bootstrap/ng2-bootstrap'
    };

    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.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    // No umd for router yet
    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

    var config = {
        map: map,
        packages: packages,
        paths: paths
    };

    System.config(config);

})(this);