如何在Angular 2中使用ng2-bootstrap？

如何使用Bootstrap（或任何其他）組件庫？克里斯托弗·6分鐘前如何在Angular 2中使用ng2-bootstrap？

誰能幫助就如何引導包括組件

我試圖用bootstrap警報示例代碼。我安裝了NPM包，並且增加了包裝爲：

警報的component.ts：

import {Component} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap'; 
@Component({ 
    selector: 'alert-demo', 
    template: ` 
    <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)"> 
     {{ alert?.msg }} 
    </alert> 
    <alert dismissOnTimeout="3000">This alert will dismiss in 3s</alert> 
    <button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button> 
    `, 
    directives: [AlertComponent, CORE_DIRECTIVES] 
}) 
export class AlertDemoComponent { 
    public alerts:Array<Object> = [ 
    { 
     type: 'danger', 
     msg: 'Oh snap! Change a few things up and try submitting again.' 
    }, 
    { 
     type: 'success', 
     msg: 'Well done! You successfully read this important alert message.', 
     closable: true 
    } 
    ]; 
    public closeAlert(i:number):void { 
    this.alerts.splice(i, 1); 
    } 
    public addAlert():void { 
    this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true}); 
    } 
}

app.component.ts

import { Component } from '@angular/core'; 
import { Routes, ROUTER_DIRECTIVES } from "@angular/router"; 
import { MessagesComponent } from "./messages/messages.component"; 
import { AuthenticationComponent } from "./auth/authentication.component"; 
import {NavBarComponent} from "./navbar.component" 
import {AlertDemoComponent} from "./alert.component" 
@Component({ 
    selector: 'my-app', 
    template: ` 
      <navbar></navbar> 
      <alert-demo></alert-demo> 
    `, 
    directives: [ROUTER_DIRECTIVES, NavBarComponent,AlertDemoComponent] 
}) 
@Routes([ 
    {path: '/', component: MessagesComponent}, 
    {path: '/auth', component: AuthenticationComponent} 
]) 
export class AppComponent {}

systemjs.config.js

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
     'app':      'js/app', // 'dist', 
     'rxjs':      'js/vendor/rxjs', 
     '@angular':     'js/vendor/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'boot.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     "node_modules/ng2-bootstrap": {defaultExtension: 'js'} 
    }; 

    var paths= { 
    "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap" 
    } 


    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/testing', 
     '@angular/upgrade', 
     'ng2-bootstrap' 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
     packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

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

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this);

我收到錯誤

"NetworkError: 404 Not Found - http://localhost:3000/ng2-bootstrap/ng2-bootstrap" 
ng2-bootstrap 
Error: patchProperty/desc.set/[email protected]://localhost:3000/js/vendor/zone.js/dist/zone.js:769:27 
Zone</ZoneDelegate</[email protected]://localhost:3000/js/vendor/zone.js/dist/zone.js:356:24 
Zone</Zone</[email protected]://localhost:3000/js/vendor/zone.js/dist/zone.js:256:29 
ZoneTask/[email protected]://localhost:3000/js/vendor/zone.js/dist/zone.js:423:29 
Error loading http://localhost:3000/ng2-bootstrap/ng2-bootstrap as "ng2-bootstrap/ng2-bootstrap" from http://localhost:3000/js/app/alert.component.js

來源

2016-05-19 erchristopher

假設你有你的package.json依賴NG2的自舉：

"ng2-bootstrap": "^1.0.16",

而且它安裝在你的項目的node_modules，你需要確保在您的index.html中包含ng2-bootstrap庫：

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

一旦你有了這個，你應該從你packageNames在systemjs.config.js其刪除：

var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/testing', 
     '@angular/upgrade' 
    ];

此外，NG2的自舉對moment.js的依賴，這意味着你還需要將其包含在您的依賴項中：

"moment": "^2.13.0"

而且你還d更新您的systemjs.config.js包含映射：

var map = { 
     'app': 'app', // 'dist', 
     'rxjs': 'node_modules/rxjs', 
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
     '@angular': 'node_modules/@angular', 
     moment: 'node_modules/moment/moment.js' 
    };

一旦你擁有所有這些之後，就應該能夠使用任何NG2-引導組件沒有問題。

來源

2016-05-19 14:42:29

如果我在腳本中有bootstrap src，生產代碼期間index.html如何引用node_modules文件夾。我的假設是我們不在最終版本部署文件夾中包含node_modules。如果錯誤請糾正。或者我遇到了使用gulp實際上需要那些node_modules必需的文件並放入將在現場環境中使用的單獨文件夾。 – erchristopher

systemjs。配置

(function(global) { 

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

     // packages tells the System loader how to load when no filename and/or no extension 
     var packages = { 
      'app':      { main: 'boot.js', defaultExtension: 'js' }, 
      'rxjs':      { defaultExtension: 'js' }, 
      'ng2-bootstrap':    { defaultExtension: 'js' } 
     }; 

     var packageNames = [ 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@angular/testing', 
      '@angular/upgrade' 
     ]; 

     // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
     packageNames.forEach(function(pkgName) { 
      packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
     }); 

     var config = { 
      map: map, 
      packages: packages 
    }; 
// filterSystemConfig - index.html's chance to modify config before we register it. 
     if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

     System.config(config); 

    })(this);

gulpfile

gulp.task('vendor', function() { 

    // Angular 2 Framework 
    gulp.src('node_modules/@angular/**') 
     .pipe(gulp.dest(vendor + '/@angular')); 

    //ES6 Shim 
    gulp.src('node_modules/es6-shim/**') 
     .pipe(gulp.dest(vendor + '/es6-shim/')); 

    //reflect metadata 
    gulp.src('node_modules/reflect-metadata/**') 
     .pipe(gulp.dest(vendor + '/reflect-metadata/')); 

    //rxjs 
    gulp.src('node_modules/rxjs/**') 
     .pipe(gulp.dest(vendor + '/rxjs/')); 

    //systemjs 
    gulp.src('node_modules/systemjs/**') 
     .pipe(gulp.dest(vendor + '/systemjs/')); 

    //bootstrap 
    gulp.src('node_modules/ng2-bootstrap/**') 
     .pipe(gulp.dest(vendor + '/ng2-bootstrap')); 

    //moment.js for bootstrap datepicker 
    gulp.src('node_modules/moment/**') 
      .pipe(gulp.dest(vendor + '/moment')); 

    //zonejs 
    return gulp.src('node_modules/zone.js/**') 
     .pipe(gulp.dest(vendor + '/zone.js/')); 
});

來源

2016-05-27 13:08:56 erchristopher

萬一別人遇到更多的問題，並收到此錯誤：

Uncaught TypeError: System.registerDynamic is not a function.

解決方案：移動你的NG2，引導腳本在index.html文件中的systemjs腳本標記後添加標記。這應該不重要，但現在它確實如此。

所以，如果你使用Angular2-quickstart，你的index.html應該是這樣的。

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <app>Loading...</app> 
    </body> 
</html>

來源

2016-08-05 16:06:50 calbear47

如何在Angular 2中使用ng2-bootstrap？

回答

相關問題