1

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

这是我所拥有的

package.json，在 devDependencies
"ngx-bootstrap": "^1.8.1"下

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-bootstrap/alert

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

[更新 2 ]
看起来我还有其他问题，在 Visual Studio 的输出窗口中看到源映射 'data:application/json;base64,';' 对于文件 'mdha: http://localhost:49766/node_modules/systemjs/dist/system.src.js '由于错误而无法正确加载。

[更新 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);

包.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"
}
4

1 回答 1

0

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

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

于 2017-08-11T08:32:45.727 回答