我是一个完整的新手，尝试使用本教程设置 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 中的 import [ 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);
应用模块.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 { }
主要.TS
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
应用组件.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