Question

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

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

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

tsconfig.json

{ “compilerOptions”：{ “目标”：“es5”， “模块”：“系统”， “moduleResolution”：“节点”， “sourceMap”：是的， “emitDecoratorMetadata”：是的， “experimentalDecorators”：是的， “removeComments”：false， “noImplicitAny”：false }， “排除”：[ “node_modules” “分型/主”， “分型/ main.d.ts” ] }
typings.json

{ “ambientDependencies”：{ “es6-shim”：“github：DefinitelyTyped / DefinitelyTyped / es6-shim / es6-shim.d.ts＃6697d6f7dadbf5773cb40ecda35a76027e0783b2” } }
应用程序/ main.ts

从'angular2 / platform / browser'// import bootstrap导入{bootstrap} 从'./app.component'导入{AppComponent} //导入我们刚刚创建的组件从'./a.component'//导入{AComponent} // //从'./user-login.component'//
导入{UserLoginModalComponent}
自举（AppComponent）; //最后引导它。引导（在aComponent）; //自举（UserLoginModalComponent）;

应用程序/ 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.

应用程序/ 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.

应用程序/用户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获取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 @ angu LAR2-polyfills.js：452 angular2-polyfills.js：349错误：错误：XHR错误（404 Not Found）loading http://localhost:3000/@angular/core（...）

Answer 1

非常愚蠢的我，错过了包含bootstrap CSS

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

并添加ng2-bs3-modal最新版本（它寻找@ angular / packages not angular /

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

在系统配置js中使用了角度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"
  },

Angular2：ng2-bs3-modal对我不起作用

1 个答案: