Update everything to rc6, fix demo/tests.

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
   - "5"
-  - "4"
+  - "6"
 
 script:
 - npm run build

demo/app.component.ts

@@ -1,20 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { ROUTER_DIRECTIVES, Router } from '@angular/router';
-
-import { appRouterProviders } from './app.routes';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'modal-demo',
     template: '<router-outlet></router-outlet>',
-    providers: [appRouterProviders],
-    directives: [ROUTER_DIRECTIVES]
 })
-export class AppComponent implements OnInit {
-
-    constructor(private router: Router) {
-    }
-
-    ngOnInit() {
-        this.router.navigate(['/']);
-    }
+export class AppComponent{
 }

demo/app.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { Ng2Bs3ModalModule } from '../src/ng2-bs3-modal/ng2-bs3-modal';
+import { routing } from './app.routes';
+import { AppComponent } from './app.component';
+import { ModalDemoComponent } from './modal-demo.component';
+import { HelloComponent } from './hello.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        routing,
+        Ng2Bs3ModalModule
+    ],
+    declarations: [
+        AppComponent,
+        ModalDemoComponent,
+        HelloComponent
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

demo/app.routes.ts

@@ -1,13 +1,12 @@
-import { provideRouter, RouterConfig } from '@angular/router';
+import { ModuleWithProviders }  from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
 import { ModalDemoComponent } from './modal-demo.component';
 import { HelloComponent } from './hello.component';
 
-const routes: RouterConfig = [
-    {path: '', component: ModalDemoComponent},
-    {path: 'hello', component: HelloComponent}
+const routes: Routes = [
+    { path: '', component: ModalDemoComponent },
+    { path: 'hello', component: HelloComponent }
 ];
 
-export const appRouterProviders = [
-    provideRouter(routes)
-];
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

demo/hello.component.ts

@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
     selector: 'hello-component',
-    directives: [ROUTER_DIRECTIVES],
     template: `
         <section class="container">
             <h1>Hello</h1>

demo/main.ts

@@ -1,4 +1,4 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent, []);
+platformBrowserDynamic().bootstrapModule(AppModule);

demo/modal-demo.component.html

@@ -87,11 +87,11 @@ <h4 class="modal-title">I'm a modal!</h4>
             <modal-body>
                 <div class="form-group">
                     <label for="firstName">First Name</label>
-                    <input type="text" class="form-control" required [(ngModel)]="model.firstName" ngControl="firstName" #firstName="ngForm">
+                    <input type="text" class="form-control" required [(ngModel)]="model.firstName" name="firstName" id="firstName">
                 </div>
                 <div class="form-group">
                     <label for="lastName">Last Name</label>
-                    <input type="text" class="form-control" required [(ngModel)]="model.lastName" ngControl="lastName" #lastName="ngForm">
+                    <input type="text" class="form-control" required [(ngModel)]="model.lastName" name="lastName" id="lastName">
                 </div>
             </modal-body>
             <modal-footer>

demo/modal-demo.component.ts

@@ -1,16 +1,15 @@
 import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
 import { Router } from '@angular/router';
-import { MODAL_DIRECTIVES, ModalComponent } from '../src/ng2-bs3-modal/ng2-bs3-modal';
+import { ModalComponent } from '../src/ng2-bs3-modal/ng2-bs3-modal';
 
 @Component({
     selector: 'modal-demo-component',
     templateUrl: 'demo/modal-demo.component.html',
-    directives: [MODAL_DIRECTIVES],
     styles: [
         `.ng-valid[required] {
             border-left: 5px solid #5cb85c; /* green */
         }`,
-        `.ng-invalid {
+        `.ng-invalid:not(.ng-untouched):not(form) {
             border-left: 5px solid #d9534f; /* red */
         }`,
         `.red-text {

demo/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "target": "es5",
+        "noImplicitAny": false,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "inlineSourceMap": true,
+        "declaration": false
+    }
+}

index.html

@@ -4,22 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">  
     <title>Angular2 Bootstrap3 Modal Component</title>
-    <base href="/ng2-bs3-modal/">
+    <base href="/">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://unpkg.com/[email protected].12?main=browser"></script>
+    <script src="https://unpkg.com/[email protected].17?main=browser"></script>
     <script src="https://unpkg.com/[email protected]"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
-    <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://unpkg.com/typescript@2.0.0/lib/typescript.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
 
     <script>
       System.config({
-        baseURL: '/ng2-bs3-modal/',
+        baseURL: '/',
         transpiler: 'typescript', 
         typescriptOptions: {
             emitDecoratorMetadata: true,
@@ -28,22 +28,21 @@
         packages: {
             'demo': {main: 'main', defaultExtension: 'ts'},
             'src': {defaultExtension: 'ts'},
-            '@angular/common': {main: 'index.js', defaultExtension: 'js'},
-            '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
-            '@angular/core': {main: 'index.js', defaultExtension: 'js'},
-            '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
-            '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
-            '@angular/router': {main: 'index.js', defaultExtension: 'js'},
             'rxjs': { defaultExtension: 'js' }
         },
+        paths: {
+            'npm:': 'https://unpkg.com/'
+        },
         map: {
-            '@angular/common': 'https://unpkg.com/@angular/[email protected]',
-            '@angular/compiler': 'https://unpkg.com/@angular/[email protected]',
-            '@angular/core': 'https://unpkg.com/@angular/[email protected]',
-            '@angular/platform-browser': 'https://unpkg.com/@angular/[email protected]',
-            '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/[email protected]',
-            '@angular/router': 'https://unpkg.com/@angular/[email protected]',
-            'rxjs': 'https://unpkg.com/[email protected]'
+            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            'rxjs': 'npm:rxjs',
         }
       });
       System.import('demo').catch(function(err){ console.error(err); });

karma.conf.js

@@ -8,24 +8,44 @@ module.exports = function (config) {
         frameworks: ['jasmine'],
         reporters: ['spec'],
         browsers: ['PhantomJS'],
-        //browsers: ['Chrome'],
+        // browsers: ['Chrome'],
         files: [
-            'node_modules/es6-shim/es6-shim.min.js',
-            'node_modules/systemjs/dist/system-polyfills.js',
-            'node_modules/systemjs/dist/system.src.js',
             'node_modules/typescript/lib/typescript.js',
-            'node_modules/zone.js/dist/zone.js',
-            'node_modules/reflect-metadata/Reflect.js',
             'node_modules/jquery/dist/jquery.js',
             'node_modules/bootstrap/dist/js/bootstrap.js',
-            'test/test-main.js',
+            'node_modules/jasmine-jquery-matchers/dist/jasmine-jquery-matchers.js',
+
+            // System.js for module loading
+            'node_modules/systemjs/dist/system.src.js',
+            'node_modules/systemjs/dist/system-polyfills.js',
+
+            // Polyfills
+            'node_modules/core-js/client/shim.js',
+            'node_modules/reflect-metadata/Reflect.js',
+
+            // zone.js
+            'node_modules/zone.js/dist/zone.js',
+            'node_modules/zone.js/dist/long-stack-trace-zone.js',
+            'node_modules/zone.js/dist/proxy.js',
+            'node_modules/zone.js/dist/sync-test.js',
+            'node_modules/zone.js/dist/jasmine-patch.js',
             'node_modules/zone.js/dist/async-test.js',
             'node_modules/zone.js/dist/fake-async-test.js',
-            'node_modules/zone.js/dist/sync-test.js',
-            { pattern: 'node_modules/@angular/**/*.js', included: false, served: true },
-            { pattern: 'node_modules/rxjs/**/*.js', included: false, served: true },
+
+            // RxJs
+            { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+            { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+            // Paths loaded via module imports:
+            // Angular itself
+            { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
+            { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
+
+            // Project files
             { pattern: 'src/**/*.ts', included: false, served: true },
-            { pattern: 'test/**/*.ts', included: false, served: true }
+            { pattern: 'test/**/*.ts', included: false, served: true },
+
+            'test/test-main.js',
         ]
     });
 };

package.json

@@ -1,9 +1,10 @@
 {
   "name": "ng2-bs3-modal",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Angular2 Boostrap3 Modal Component",
   "main": "ng2-bs3-modal.js",
   "scripts": {
+    "start": "static",
     "peer": "npm install es6-promise@^3.0.2 es6-shim@^0.33.3 [email protected] [email protected] [email protected]",
     "lint": "tslint ./src/**/*.ts",
     "clean": "rimraf ./bundles/ ./components/ ./directives/ ./ng2-bs3-modal.js ./ng2-bs3-modal.d.ts",
@@ -38,26 +39,30 @@
     "@angular/common": "2.0.0-rc.6",
     "@angular/compiler": "2.0.0-rc.6",
     "@angular/core": "2.0.0-rc.6",
+    "@angular/forms": "^2.0.0-rc.6",
     "@angular/platform-browser": "2.0.0-rc.6",
     "@angular/platform-browser-dynamic": "2.0.0-rc.6",
     "@angular/router": "3.0.0-rc.2",
     "bootstrap": "^3.3.6",
+    "core-js": "^2.4.1",
     "es6-shim": "^0.35.0",
     "jasmine": "^2.4.1",
+    "jasmine-jquery-matchers": "^1.1.1",
     "jquery": "^2.2.1",
     "karma": "^0.13.21",
     "karma-chrome-launcher": "^0.2.2",
     "karma-jasmine": "^0.3.7",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.2",
     "karma-spec-reporter": "0.0.24",
-    "phantomjs-prebuilt": "2.1.7",
+    "node-static": "^0.7.8",
+    "phantomjs-prebuilt": "^2.1.7",
     "reflect-metadata": "^0.1.3",
     "rimraf": "^2.5.1",
     "rxjs": "5.0.0-beta.11",
-    "systemjs": "^0.19.27",
-    "tslint": "^3.7.1",
+    "systemjs": "^0.19.38",
+    "tslint": "^3.15.1",
     "typescript": "2.0.0",
-    "typings": "^0.7.9",
+    "typings": "^1.3.3",
     "uglify-js": "^2.6.2",
     "zone.js": "^0.6.17"
   },

src/ng2-bs3-modal/components/modal-body.ts

@@ -10,5 +10,4 @@ import { ModalComponent } from './modal';
     `
 })
 export class ModalBodyComponent {
-    constructor(private modal: ModalComponent) { }
 }

src/ng2-bs3-modal/components/modal-footer.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, Type } from '@angular/core';
+import { Component, Input, Inject } from '@angular/core';
 import { ModalComponent } from './modal';
 
 @Component({
@@ -15,5 +15,5 @@ export class ModalFooterComponent {
     @Input('show-default-buttons') showDefaultButtons: boolean = false;
     @Input('dismiss-button-label') dismissButtonLabel: string = 'Dismiss';
     @Input('close-button-label') closeButtonLabel: string = 'Close';
-    constructor(private modal: ModalComponent) { }
+    constructor(@Inject(ModalComponent) private modal: ModalComponent) { }
 }

src/ng2-bs3-modal/components/modal-header.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, Type } from '@angular/core';
+import { Component, Input, Inject } from '@angular/core';
 import { ModalComponent } from './modal';
 
 @Component({
@@ -14,5 +14,5 @@ import { ModalComponent } from './modal';
 })
 export class ModalHeaderComponent {
     @Input('show-close') showClose: boolean = false;
-    constructor(private modal: ModalComponent) { }
+    constructor(@Inject(ModalComponent) private modal: ModalComponent) { }
 }

src/ng2-bs3-modal/components/modal.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, Input, Output, EventEmitter, Type, ElementRef, HostBinding } from '@angular/core';
+import { Component, OnDestroy, Input, Output, EventEmitter, Type, ElementRef, HostBinding, Inject } from '@angular/core';
 import { ModalInstance, ModalResult } from './modal-instance';
 
 @Component({
@@ -45,7 +45,7 @@ export class ModalComponent implements OnDestroy {
         return this.backdrop;
     }
 
-    constructor(private element: ElementRef) {
+    constructor(@Inject(ElementRef) private element: ElementRef) {
         this.instance = new ModalInstance(this.element);
 
         this.instance.hidden.subscribe((result) => {

src/ng2-bs3-modal/directives/autofocus.ts

@@ -1,12 +1,12 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, Inject, Optional } from '@angular/core';
 import { ModalComponent } from '../components/modal';
 
 @Directive({
     selector: '[autofocus]'
 })
 export class AutofocusDirective {
-    constructor(private el: ElementRef, private modal: ModalComponent) {
-        if (modal != null) {
+    constructor(@Inject(ElementRef) private el: ElementRef, @Inject(ModalComponent) @Optional() private modal: ModalComponent) {
+        if (!modal) {
             this.modal.onOpen.subscribe(() => {
                 this.el.nativeElement.focus();
             });