Question

我使用此tutorial完成新手试图设置ng2 Bootstrap（Angular2和Bootstrap4 css），到目前为止我已经安装了依赖项： Angular （需要Angular版本2或更高版本，使用2.0-rc进行测试.5） Bootstrap CSS （使用版本4.0 alpha V3测试）并且我已启动应用程序：

问题是我不知道在哪里添加以下代码行而不会导致错误：

安装完成后，您需要导入我们的主模块。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

唯一剩下的部分是列出你的导入模块应用模块。你应该得到类似于：
的代码

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

更新3：这些都是有问题的文件我只根据建议更改了system.config.js，app.module.ts，我错过了其他什么吗？当我尝试像这样运行时，我得到一个空白页面，并且它没有加载它似乎在app.module中导入[ NgbModule ]是导致空白页面的问题。 如何正确导入？

System.Config.JS

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

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@ng-bootstrap':'node_modules/@ng-bootstrap',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

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

    'rxjs':                       { defaultExtension: 'js' },
 '@ng-bootstrap/ng-bootstrap':{ main: 'index.js', defaultExtension: 'js'},
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];



  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

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

  System.config(config);

})(this);

AppModule.TS

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [ BrowserModule, NgbModule ],

  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Main.TS

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

App.Component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 2 2 App</h1> <div class="row"><div class="col-sm-4">.col-sm-4</div><div class="col-sm-4">.col-sm-4</div><div class="col-sm-4">.col-sm-4</div></div>'
})
export class AppComponent { }

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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

    <!-- 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="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

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

到目前为止，我已尝试更换app文件夹中的main.ts代码，但我无法让它工作。我的问题是如何导入主模块，我是否要替换现有代码或只是添加它？我只是想让ng2-bootstrap正常工作，任何帮助将深表感谢。谢谢！

这是我的文件夹结构，以帮助解决此问题。谢谢！

 vzlr-stack/
     ├──typings/
     ├──node_modules/
     ├──e2e/      
     ├──app/   
       ├──app.component.js
       ├──app.component.js.map
       ├──app.component.spec.js
       ├──app.component.spec.js.map
       ├──app.component.spec.ts
       ├──app.component.ts
       ├──app.module.js
       ├──app.module.js.map
       ├──app.module.ts
       ├──main.js
       ├──main.js.map
       ├──main.ts
     ├──wallaby.js
     ├──typings.json
     ├──tslint.json
     ├──tsconfig.json
     ├──systemjs.config.js
     ├──styles.css
     ├──Readme.md
     ├──protractor.config.js
     ├──package.json
     ├──LICENSE
     ├──karma-test-shim.js
     ├──karma.conf.js
     ├──index.html
     ├──dockerfile
     ├──CHANGELOG.md
     ├──.travis.yml
     ├──.gitignore
     ├──.editorconfig
     ├──.dockerignore

Answer 1

编辑2 由于404未找到错误，您会看到空白页。当您使用import {NgbModule} from '@ng-bootstrap/ng-bootstrap'时，它会立即导入所有ng-bootstrap组件的类定义。所以你不需要为每个组件单独定义它们（制表符，手风琴，等级......）这就是NgbModule的作用。导出所有核心组件的定义。这导致了这个问题。（也许尝试更新到最新版本来解决这个问题）解决此问题的方法是单独导入组件。例如，您想使用评级组件。然后，您需要更新systemjs配置。

您需要在system.config.js包的@ng-bootstrap中添加配置设置。

您可以通过System.config({ map, packages })

应用用户配置

  var map = {//Map relative paths to URLs by setting
    '@ng-bootstrap':'node_modules/@ng-bootstrap'
 };

  var packages = { // packages tells the System loader how to load
    '@ng-bootstrap/ng-bootstrap/rating':{ main: 'index.js', defaultExtension: 'js'}
   };

您的 app.module.ts 应如下所示：

    .....
   import { AppComponent }   from './app.component';
   import  { NgbRatingModule } from '@ng-bootstrap/ng-bootstrap/rating';

   @NgModule({
     declarations: [AppComponent],
     imports:      [BrowserModule,NgbRatingModule], //root level definition of *NgbRatingModule*
     bootstrap:    [AppComponent],
   })

  export class AppModule {
   .....
  }

现在您可以在应用程序的任何位置使用它。就像 app.component.ts

一样

  import {Component,OnInit} from '@angular/core';
     .......
   @Component({
       selector:'my-app',
        template:`<h1>Angular2 App </h1>  
                     <ngb-rating [(rate)]="currentRate"></ngb-rating>
                 `,
             directives:[],
             providers:[]
     })

    export class AppComponent{
        currentRate = 8;
        constructor(){
              ......
         }
       }

同样，您也可以使用其他类似的@ng-bootstrap/ng-bootstrap/tooltip组件。希望这个解决方案能为您服务。

Answer 2

我遇到了自己的困难，这篇文章有很大的帮助，因为现在的Kunal Sharma的帖子比目前的流程高90％，因为我没有50个声誉我可以＆＃39;请评论该答案以请求更改，以便这是针对具有相同问题的任何人。（@ ng-bootstrap上的404）

我没有考虑修改systemjs.config.js文件，因为我正在使用打字稿，你必须修改它。以下是当前的文件更改要求：

对 app.module.ts

的更改

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
imports: [
BrowserModule,
...
NgbModule.forRoot()
]

更改为 systemjs.config.js：

map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
   ...
  '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

将导入模块放在ng-2 Bootstrap的新安装中的哪个位置？

2 个答案: