title: Angular2: ng2-bs3-modal not working for me
body: <pre><code>Trying to build a simple Angular 2 app with modal dialogs using 'ng2-bs3-modal'
  </code></pre>
  
  <ol>
  <li><p>index.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- IE required polyfills, in this exact order --&gt;
    &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
  
    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"&gt;&lt;/script&gt;
  
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
        .then(null, console.error.bind(console));
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;!-- 3. Display the application --&gt;
  
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre></li>
  <li><p>package.json</p>
  
  <pre><code>{
    "name": "ng2-test",
    "version": "1.0.0",
    "scripts": {
      "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "lite": "lite-server",
      "typings": "typings",
      "postinstall": "typings install" 
    },
    "license": "ISC",
    "dependencies": {
      "angular2": "2.0.0-beta.17",
      "systemjs": "0.19.27",
      "es6-promise": "^3.0.2",
      "es6-shim": "^0.33.3",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "0.6.12"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "typescript": "^1.8.10",
      "typings":"^1.0.4"
    }
  }
  </code></pre></li>
  <li><p>tsconfig.json</p>
  
  <p>{
    "compilerOptions": {
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules",
      "typings/main",
      "typings/main.d.ts"
    ]
  }</p></li>
  <li><p>typings.json</p>
  
  <p>{
    "ambientDependencies": {
      "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
    }
  }  </p></li>
  <li><p>app/main.ts</p>
  
  <p>import {bootstrap}    from 'angular2/platform/browser' // import bootstrap
  import {AppComponent} from './app.component' // import the component we just created
  import {AComponent} from './a.component' // 
  //import {UserLoginModalComponent} from './user-login.component' // </p>
  
  <p>bootstrap(AppComponent); // finally bootstrap it.
  bootstrap(AComponent);
  //bootstrap(UserLoginModalComponent);</p></li>
  <li><p>app/app.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core'; // &lt;-- importing Component from core
  //import {AComponent} from './a.component';
  
  @Component({
      selector: 'my-app', //&lt;----the element defined in the index.html
      template: '&lt;h1&gt;Angular2, Hello {{name}}&lt;/h1&gt;&lt;br&gt;' // &lt;---this is the template to put in the component.
    //  directives: [AComponent],
  })
  export class AppComponent { 
      name: string;
      constructor(){
          this.name = "ANIL";
      }
  } // &lt;--- we need to export the class AppComponent. 
  </code></pre></li>
  <li><p>app/a.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core'; // &lt;-- importing Component from core
  //import {AComponent} from './a.component';
  
  @Component({
      selector: 'my-app', //&lt;----the element defined in the index.html
      template: '&lt;h1&gt;Angular2, Hello {{name}}&lt;/h1&gt;&lt;br&gt;' // &lt;---this is the template to put in the component.
    //  directives: [AComponent],
  })
  export class AppComponent { 
      name: string;
      constructor(){
          this.name = "ANIL";
      }
  } // &lt;--- we need to export the class AppComponent. 
  </code></pre></li>
  <li><p>app/user-login.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {MODAL_DIRECTIVES, ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal';
  
  @Component({
      selector: 'user-login-modal',
      directives: [MODAL_DIRECTIVES],
      template: `
          &lt;modal #modal [keyboard]="false" [backdrop]="'static'"&gt;
              &lt;modal-header [show-close]="false"&gt;
                  &lt;h4 class="modal-title"&gt;I am a modal!&lt;/h4&gt;
              &lt;/modal-header&gt;
              &lt;modal-body&gt;
                  Hello World!
              &lt;/modal-body&gt;
              &lt;modal-footer [show-default-buttons]="true"&gt;&lt;/modal-footer&gt;
          &lt;/modal&gt;
      `
  })
  export class UserLoginModalComponent {
  
      @ViewChild(ModalComponent)
      modal: ModalComponent;
  
      open(){
          this.modal.open();
      }
  
      close(){
          this.modal.close();
      }
  }
  </code></pre></li>
  </ol>
  
  <p>I see ng2-bs3-modal module is still trying to access @angular/core, i think it should point to angular2/core?
  I also tried adding 'map' in system config js, but it was not taking the '.js' extension while accessing the @angular/core(even though   defaultExtension: 'js' was present in system config js).</p>
  
  <p>Please help!!!</p>
  
  <p>Below is console log trace,</p>
  
  <p>angular2-polyfills.js:127 GET <a href="http://localhost:3000/@angular/core" rel="nofollow">http://localhost:3000/@angular/core</a> 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM1684:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
  angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading <a href="http://localhost:3000/@angular/core" rel="nofollow">http://localhost:3000/@angular/core</a>(…)</p>