Task Overview:
- Installing @ng-bootstrap/ng-bootstrap using npm install --save @ng-bootstrap/ng-bootstrap
- Attempted to load @ng-bootstrap/ng-bootstrap via systemjs, encountering an error: undefined is not an object (evaluating 'ng_bootstrap_1.NgbModule.forRoot')
- Importing NgbModule in the main module: import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
- Calling NgbModule.forRoot() in the imports section of the main module
I encountered an error when trying to call NgbModule.forRoot() - undefined is returned immediately after the import.
I also tried configuring systemjs:
(function(global) {
var map = {
app: 'app',
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs',
'@ng-bootstrap/ng-bootstrap': 'https://npmcdn.com/@ng-bootstrap/ng-bootstrap'
};
var packages = {
app: {
main: './bootstrap.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'@ng-bootstrap/ng-bootstrap': {
main: './bundles/ng-bootstrap.js',
defaultExtension: 'js'
}
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'router',
'platform-browser',
'platform-browser-dynamic'
];
ngPackageNames.forEach(function(pkgName) {
packages['@angular/' + pkgName] = {
main: '/bundles/' + pkgName + '.umd.js',
defaultExtension: 'js'
};
});
System.config({
defaultJSExtension: true,
transpiler: null,
packages: packages,
map: map
});
})(this);
I also made changes to app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule, RequestOptions } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';
import { HomeModule } from './home/home.module';
import { AuthenticationService } from './authentication/authentication.service';
import { AuthenticationModule } from './authentication/authentication.module';
import { ArticlesModule } from './articles/articles.module';
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
AuthenticationModule,
ArticlesModule,
HomeModule,
RouterModule.forRoot(AppRoutes),
NgbModule.forRoot()
],
declarations: [
AppComponent
],
providers: [
AuthenticationService
],
bootstrap: [AppComponent]
})
export class AppModule { }Lastly, my tsconfig settings:
{
"compilerOptions": {
"target": "es6",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}