在 ng-2 Bootstrap 的新安装中将导入模块放在哪里? [英] Where to put the import module in a new installation of ng-2 Bootstrap?

问题描述

我是一个完整的新手，试图使用这个 tutorial，到目前为止我已经安装了依赖项:Angular(需要 Angular 2 或更高版本，使用 2.0-rc.5 测试)Bootstrap CSS(使用 4.0 alpha V3 版测试)，我已经启动了应用程序:

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

<块引用>

安装后，您需要导入我们的主模块.

从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；

<块引用>

剩下的唯一部分是在您的应用模块.您应该最终得到类似于以下内容的代码:

从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；@NgModule({声明:[AppComponent, ...],进口:[NgbModule，...]，引导程序:[AppComponent]})导出类 AppModule {}

更新 3: 这些是所有有问题的文件，我只根据建议更改了 system.config.js 和 app.module.ts，我还遗漏了什么吗?当我尝试像这样运行它时，我得到一个空白页面，并且它没有加载似乎 app.module 中的 import [NgbModule] 是导致空白页面的问题.如何正确导入?

System.Config.JS

/*** Angular 2 示例的系统配置* 根据您的应用需求进行必要的调整.*/(功能(全局){//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'};//包告诉系统加载器在没有文件名和/或没有扩展名时如何加载var 包 = {'app': { main: 'main.js', defaultExtension: 'js' },'rxjs': { defaultExtension: 'js' },'@ng-bootstrap/ng-bootstrap':{ main: 'index.js', defaultExtension: 'js'},};var ngPackageNames = ['常见的'，'编译器','核'，'形式'，'http','平台浏览器','平台浏览器动态','路由器'，'路由器已弃用','升级'，];//单个文件(约 300 个请求):功能包索引(pkgName){包['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };}//捆绑(约 40 个请求):函数 packUmd(pkgName) {包['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };}//大多数环境应该使用UMD；一些(业力)需要单独的索引文件var setPackageConfig = System.packageWithIndex ?包索引:packUmd；//为 angular 包添加包条目ngPackageNames.forEach(setPackageConfig);//路由器还没有umd包['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };变量配置 = {地图:地图，包:包};System.config(config);})(这个);

AppModule.TS

import { NgModule } from '@angular/core';从'@angular/platform-b​​rowser' 导入 { BrowserModule };从 './app.component' 导入 { AppComponent };从@ng-bootstrap/ng-bootstrap"导入 {NgbModule}；@NgModule({进口:[ BrowserModule，NgbModule ]，声明:[ AppComponent ]，引导程序:[ AppComponent ]})导出类 AppModule { }

Main.TS

import { platformBrowserDynamic } from '@angular/platform-b​​rowser-dynamic';从 './app.module' 导入 { AppModule };platformBrowserDynamic().bootstrapModule(AppModule);

App.Component.ts

import { Component } from '@angular/core';@成分({选择器:'我的应用'，模板:'<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>'})导出类 AppComponent { }

HTML

<头><title>Angular 2 快速入门</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-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqrianyrbMIyamou="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6><!-- 旧浏览器的 Polyfill(s) --><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><脚本>System.import('app').catch(function(err){ console.error(err); });<身体><my-app>正在加载...</my-app></html>

到目前为止，我已经尝试替换 app 文件夹中的 main.ts 代码，但我无法让它工作.我的问题是如何导入主模块，我是替换现有代码还是添加到其中?我只是想让 ng2-bootstrap 正常工作，任何帮助都会深表赞赏.谢谢！

这是我帮助解决这个问题的文件夹结构.谢谢！

 vzlr-stack/├──打字/├──node_modules/├──e2e/├──应用程序/├──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├──小袋鼠.js├──typings.json├──tslint.json├──tsconfig.json├──systemjs.config.js├──styles.css├──自述文件.md├──量角器.config.js├──package.json├──许可证├──karma-test-shim.js├──karma.conf.js├──index.html├──dockerfile├──变更日志.md├──.travis.yml├──.gitignore├──.editorconfig├──.dockerignore

解决方案

编辑 2由于 404 not found 错误，您看到空白页.当您使用 import {NgbModule} from '@ng-bootstrap/ng-bootstrap' 时，它会一次性导入所有 ng-bootstrap 组件的类定义.所以你不需要为每个组件(标签，手风琴，评级..)单独定义它们，这就是 NgbModule 所做的.所有核心组件的导出定义.这导致了这个问题.(也许尝试更新到最新版本解决这个问题)解决此问题的方法是单独导入组件.例如，您想使用 rating 组件.然后你需要更新你的 systemjs 配置.

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

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

应用用户的配置

 var map = {//通过设置将相对路径映射到URL'@ng-bootstrap':'node_modules/@ng-bootstrap'};var packages = {//包告诉系统加载器如何加载'@ng-bootstrap/ng-bootstrap/rating':{ main: 'index.js', defaultExtension: 'js'}};

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

 .....从 './app.component' 导入 { AppComponent };从'@ng-bootstrap/ng-bootstrap/rating'导入{NgbRatingModule}；@NgModule({声明:[AppComponent]，import: [BrowserModule,NgbRatingModule],//*NgbRatingModule* 的根级定义引导程序:[AppComponent]，})导出类 AppModule {.....}

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

中一样

 import {Component,OnInit} from '@angular/core';......@成分({选择器:'我的应用'，模板:`<h1>Angular2 App </h1><ngb-rating [(rate)]="currentRate"></ngb-rating>`，指令:[],供应商:[]})导出类 AppComponent{当前速率 = 8;构造函数(){......}}

同样的，你也可以使用其他类似 @ng-bootstrap/ng-bootstrap/tooltip 的组件.希望此解决方案对您有用.

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

解决方案

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.

这篇关于在 ng-2 Bootstrap 的新安装中将导入模块放在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！