Angular2：ng2-bs3-modal 不适合我

Angular2: ng2-bs3-modal not working for me 

Trying to build a simple Angular 2 app with modal dialogs using 'ng2-bs3-modal'

  1. index.html

    <!doctype html>
<html>
<head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.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 src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>

</body>

</html>

  2. package.json

    {
  "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"
  }
}

  3. tsconfig.json

    { "compilerOptions"：{ "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap"：是的， "emitDecoratorMetadata": 是的， "experimentalDecorators"：是的， "removeComments"：错误， "noImplicitAny": 错误 }, "exclude"：[ "node_modules", "typings/main", "typings/main.d.ts" ] }

  4. typings.json

    { "ambientDependencies"：{ "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } }

  5. app/main.ts

    从 'angular2/platform/browser' 导入 {bootstrap} // 导入 bootstrap import {AppComponent} from './app.component' // 导入我们刚刚创建的组件 从 './a.component' 导入 {AComponent} // //从'./user-login.component'导入{UserLoginModalComponent} //

    bootstrap(AppComponent); // 最后 bootstrap 它。 bootstrap(A组件); //bootstrap(UserLoginModalComponent);

  6. app/app.component.ts

    import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
  //  directives: [AComponent],
})
export class AppComponent { 
    name: string;
    constructor(){
        this.name = "ANIL";
    }
} // <--- we need to export the class AppComponent.

  7. app/a.component.ts

    import {Component} from 'angular2/core'; // <-- importing Component from core
//import {AComponent} from './a.component';

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '<h1>Angular2, Hello {{name}}</h1><br>' // <---this is the template to put in the component.
  //  directives: [AComponent],
})
export class AppComponent { 
    name: string;
    constructor(){
        this.name = "ANIL";
    }
} // <--- we need to export the class AppComponent.

  8. app/user-login.component.ts

    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: `
        <modal #modal [keyboard]="false" [backdrop]="'static'">
            <modal-header [show-close]="false">
                <h4 class="modal-title">I am a modal!</h4>
            </modal-header>
            <modal-body>
                Hello World!
            </modal-body>
            <modal-footer [show-default-buttons]="true"></modal-footer>
        </modal>
    `
})
export class UserLoginModalComponent {

    @ViewChild(ModalComponent)
    modal: ModalComponent;

    open(){
        this.modal.open();
    }

    close(){
        this.modal.close();
    }
}

我看到 ng2-bs3-modal 模块仍在尝试访问@angular/core，我认为它应该指向 angular2/core？ 我还尝试在系统配置 js 中添加 'map'，但是在访问 @angular/core 时它没有使用 '.js' 扩展名（即使 defaultExtension: 'js' 出现在系统配置 js 中).

请帮忙！！！

下面是控制台日志跟踪，

angular2-polyfills.js:127 GET http://localhost:3000/@angular/core 404（未找到）scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @angular2-polyfills.js:362Zone.scheduleMacroTask@angular2-polyfills.js:299(匿名函数)@angular2-polyfills.js:148send@VM1684:3fetchTextFromURL@system.src.js:1156(匿名函数)@system.src.js:1739ZoneAwarePromise @ angular2-polyfills.js:610（匿名函数）@system.src.js:1738（匿名函数）@system.src.js:2764（匿名函数）@system.src.js:3338 （匿名函数）@system.src.js:3605（匿名函数）@system.src.js:3990（匿名函数）@system.src.js:4453（匿名函数）@system.src.js:4705（匿名函数函数）@system.src.js:408ZoneDelegate.invoke@angular2-polyfills.js:349Zone.run@angular2-polyfills.js:242（匿名函数）@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 错误：错误：XHR 错误（404 未找到）加载 http://localhost:3000/@angular/core(…)

我真傻，错过了 bootstrap CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css

并添加 ng2-bs3-modal 最新版本（它查找 @angular/ 包而不是 angular/

"ng2-bs3-modal": "^0.6.1"

在系统配置 js 中使用 angular rc 版本的映射，如下所示

  var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

和

package.json

  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "ng2-bs3-modal": "^0.6.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0"
  },