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

Question

我是一个完整的新手，尝试使用这个 tutorial 设置 ng2 Bootstrap（Angular2 和 Bootstrap4 css）我已经安装了依赖项：Angular（需要 Angular 版本 2 或更高版本，使用 2.0-rc.5 测试）Bootstrap CSS（使用版本 4.0 alpha V3 测试）并且我已经启动了应用程序：

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

Once installed you need to import our main module.

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

The only remaining part is to list the imported module in your application module. You should end up with the code similar to:

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 所做的。所有核心组件的导出定义。这导致了这个问题。（也许尝试更新到最新版本解决这个问题）解决此问题的方法是单独导入组件。例如，您想使用 rating 组件。然后你需要更新你的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

我遇到了自己的困难，这个 post 帮了大忙，因为目前 Kunal Sharma 的 post 是当前流程的 90%，因为我没有 50 声望无法评论请求更改的答案，因此这适用于遇到相同问题的任何人。（@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 中将导入模块放在哪里？

Where to put the import module in a new installation of ng-2 Bootstrap?

angular

module

angular-ui-bootstrap

systemjs

import-module