要将导入模块放在新安装的ng-2 Bootstrap中? [英] Where to put the import module in a new installation of ng-2 Bootstrap?
问题描述
我是一个完全的新手，尝试使用此教程，到目前为止，我已经安装了依赖项: Angular (需要Angular 2或更高版本，并通过2.0-rc.5测试) Bootstrap CSS (经过版本4.0 alpha V3的测试)，我已经启动了该应用程序:
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 {
}
更新3:这些都是有问题的文件，我只是根据建议更改了system.config.js，而app.module.ts我是否还缺少其他内容?当我尝试像这样运行它时，我得到一个空白页，并且没有加载，看来app.module中的导入[ NgbModule ]是导致空白页的问题. 如何正确导入?
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>
到目前为止，我已尝试替换app文件夹中的main.ts代码，但无法正常工作.我的问题是如何导入主模块，如何替换现有代码或仅添加现有代码?我只是想让ng2-bootstrap正常工作，任何帮助都将深表感谢.谢谢！
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
推荐答案
编辑2
您看到空白页，因为404未找到错误.使用import {NgbModule} from '@ng-bootstrap/ng-bootstrap'时，它将立即导入所有ng-bootstrap组件的类定义.因此，您不必为每个组件(制表符，手风琴，评级..)分别定义它们.NgbModule就是这样做的.导出所有核心组件的定义.这导致此问题.(也许尝试更新到最新版本可以解决此问题)
解决此问题的方法是分别导入组件.例如，您要使用 rating 组件.然后，您需要更新systemjs配置.
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.
您需要在system.config.js中为@ng-bootstrap软件包添加配置设置.
You need to add configuration setting in system.config.js for @ng-bootstrap package.
您可以通过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
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(){
......
}
}
以同样的方式，您也可以使用其他类似@ng-bootstrap/ng-bootstrap/tooltip的组件.希望此解决方案对您有用.
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屋！
