Question

我试图按照我能找到的例子来引入ngx-bootstrap。

这就是我所拥有的

在devDependencies下的

package.json ＆＃34; ngx-bootstrap＆＃34;：＆＃34; ^ 1.8.1＆＃34;

System.config.js

  '@ngx-bootstrap':'npm:node_modules/ngx-bootstrap',


  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' },
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

在 app.module

中

import { AlertModule } from 'ngx-bootstrap';
@NgModule({
  imports: [
      BrowserModule,
      DevBlogModule,
      AlertModule.forRoot(),
      HomeModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class MainModule { }

在我的 app.component.ts

中

import { Component } from '@angular/core';
import { AlertModule } from 'ngx-bootstrap';


@Component({
    selector: 'myapp',
    template: '<div> <alert type="success"> this is a test alert</alert>angular2 has been set and here is our first post...</div>'
})

export class AppComponent { }

当我跑步时，我在控制台出错，我错过了什么或者我踩到了什么？

无法加载资源：服务器响应状态为404 （未找到）：49766 / NGX-引导/警报

另外，参考这篇关于使用System.js的帖子 How to use ngx-bootstrap in Angular 4 application with SystemJs module system

[更新2 ]
看起来我有其他问题，在visual studio的输出窗口中看到源地图＆＃39;数据：application / json; base64，＆＃39 ;;＆＃39;对于文件＆＃39; mdha：http://localhost:49766/node_modules/systemjs/dist/system.src.js＆＃39;由于错误导致无法正确加载。

[更新3 - 如果有其他system.js用户发现此]的话 现在我已经有了工作......
@IlyaSurmay - 请随时在您的网站上为我们的新手使用其中一些内容。

system.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({


      paths: {
          // paths serve as alias
            'npm:': 'node_modules/',
            'content:': 'content/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',

          // angular bundles
          '@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',
          'moment': 'node_modules:moment/moment.js',

          // other libraries
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'jquery': 'npm:jquery/',
          'lodash': 'npm:lodash/lodash.js',
          'moment': 'npm:moment/',     
          'ngx-bootstrap': 'node_modules/ngx-bootstrap',
          'symbol-observable': 'npm:symbol-observable',
          'rxjs': 'node_modules/rxjs' // added this map section
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' },
            'moment': { main: 'moment.js', defaultExtension: 'js' },
            'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
          }

      });
    })(this);

的package.json

{
  "author": "me",
  "dependencies": {
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "~4.3.0",
    "@angular/compiler": "~4.3.0",
    "@angular/core": "~4.3.0",
    "@angular/forms": "~4.3.0",
    "@angular/http": "~4.3.0",
    "@angular/platform-browser": "~4.3.0",
    "@angular/platform-browser-dynamic": "~4.3.0",
    "@angular/router": "~4.3.0",
    "angular-in-memory-web-api": "~0.2.4",
    "core-js": "^2.5.0",
    "moment": "^2.18.1",
    "moment-timezone-all": "^0.5.5",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "description": "A starter app using Angular2, Bootstrap CSS for hosting within an ASP.NET MVC web app",
  "devDependencies": {
    "@types/node": "^6.0.85",
    "alertify.js": "^1.0.12",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "modernizr": "^3.5.0",
    "ngx-bootstrap": "^1.8.1",
    "systemjs": "^0.19.40"
  },
  "keywords": [],
  "license": "MIT",
  "name": "aspng2",
  "repository": {},
  "version": "1.0.0"
}

Answer 1

System.JS用户必须直接从ngx-bootstrap导入模块，正如官方演示所说http://valor-software.com/ngx-bootstrap/#/modals#usage

因此，请将导入更改为此import { AlertModule } from 'ngx-bootstrap';

如何包含和使用包

1 个答案: