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

问题

I'm a complete newbie attempting to setup ng2 Bootstrap (Angular2 with Bootstrap4 css) using this tutorial, so far I've installed the dependencies: Angular (requires Angular version 2 or higher, tested with 2.0-rc.5) Bootstrap CSS (tested with version 4.0 alpha V3) and I've started the application:

The problem is I don't know where to add the following line of code without causing errors:

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 {
}

UPDATE 3: These are all the files in question I only changed the system.config.js according to the suggestion, and the app.module.ts, am I missing anything else? When I try to run it like this I get a blank page, and it doesn't load it seems that import [NgbModule] in app.module is the problem that causes a blank page. How do I properly import it?

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>

So far I've tried replacing the code of main.ts inside the app folder, but I can't get it to work. My question is How do I import the main module, and do I replace the existing code or just add on to it? I'm just trying to get ng2-bootstrap to work properly, any help will be deeply appreciated. Thanks!

This is my folder structure to help solve this problem. Thanks!

 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

回答1:

Edit 2 You see blank page because of 404 not found errors. When you use import {NgbModule} from '@ng-bootstrap/ng-bootstrap', it is importing classes definition of all the ng-bootstrap components at once. So you need not to define them separately for every component(tabs,accordion,rating..) This is what NgbModule does. Export definition of all core components. This is causing this problem.(Maybe try to update to latest version solve this issue) The work around this problem is individually importing the components. For example, you want to use rating component. Then you need to update your systemjs configuration.

You need to add configuration setting in system.config.js for @ng-bootstrap package.

You can apply user's configuration via 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'}
   };

Your app.module.ts should look like this:

    .....
   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 {
   .....
  }

Now you can use it anywhere in the application. Like in 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(){
              ......
         }
       }

In the same way, you can use other like @ng-bootstrap/ng-bootstrap/tooltip components also. Hope this solution will work for you.

回答2:

I was having my own difficulties, and this post helped greatly, as of current Kunal Sharma's post is 90% what the current process is, as I don't have 50 reputation I can't comment on that answer to request a change so this is for anyone with the same problem. (404 on @ng-bootstrap)

I didn't think about modifying the systemjs.config.js file as I am using typescript, well you do have to modify it. Here are the current file change requirements:

Changes to app.module.ts

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

Change to 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',

来源：https://stackoverflow.com/questions/39148710/where-to-put-the-import-module-in-a-new-installation-of-ng-2-bootstrap

标签

angular

module

angular-ui-bootstrap

systemjs

import-module