In CLI, require for bootstrap error

[PHuhn]

I am currently getting the following runtime error:

Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:14:14)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../angular-2-data-table/dist/index.js (index.js?f3f2:1)
    at __webpack_require__ (bootstrap 8340e8d…:54)
    at Object.2 (scripts.bundle.js:37)
    at __webpack_require__ (bootstrap 8340e8d…:54)
    at webpackJsonpCallback (bootstrap 8340e8d…:25)
    at scripts.bundle.js:1

My component as follows:

<!-- Product-Grid.component.html -->
<div style='margin: auto; max-width: 900px;'>
    <data-table id='products-grid'
        [items]='products'
        [itemCount]='productsCount'
        [pagination]='true'
        [indexColumn]='true'
        [selectColumn]='false'
        (reload)='reloadProducts( $event )'
        >
        <data-table-column>
            <ng-template #dataTableHeader let-item="item">
                <button (click)="addItemClicked( )" class="btn btn-sm btn-default">Add</button>
            </ng-template>
            <ng-template #dataTableCell let-item="item">
                <button (click)="editItemClicked( item )" class="btn btn-sm btn-default">Edit</button>
            </ng-template>
        </data-table-column>
        <data-table-column header='Product Id'
            property='ProductID'
            [sortable]='true'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Product Name'
            property='ProductName'
            [sortable]='true'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Supplier Id'
            property='SupplierID'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Prod Category Id'
            property='ProdCategoryId'
            [sortable]='true'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Quantity Per Unit'
            property='QuantityPerUnit'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Unit Price'
            property='UnitPrice'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Units In Stock'
            property='UnitsInStock'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Units On Order'
            property='UnitsOnOrder'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Reorder Level'
            property='ReorderLevel'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header='Discontinued'
            property='Discontinued'
            [sortable]='true'
            [resizable]='true'>
        </data-table-column>
        <data-table-column header="">
            <ng-template #dataTableHeader let-item="item">
            </ng-template>
            <ng-template #dataTableCell let-item="item">
                <button (click)="deleteItemClicked( item )" class="btn btn-sm btn-default">Delete</button>
            </ng-template>
        </data-table-column>
    </data-table>
</div>
<!-- end of grid.component.html -->

Typescript

// File: product-grid.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
//
import { DataTableResource } from 'angular-2-data-table';
//
import { IProduct, Product } from '../product';
//
@Component({
  selector: 'app-product-grid',
  templateUrl: './product-grid.component.html',
  styleUrls: ['./product-grid.component.css']
})
export class ProductGridComponent implements OnInit {
    //
    model: Product;
    products: Product[] = [
        new Product( 1,'p 1',1,'p 1','p 1',1,1,1,1,true ),
        new Product( 2,'p 2',2,'p 2','p 2',2,2,2,2,true ),
        new Product( 3,'p 3',3,'p 3','p 3',3,3,3,3,true ),
        new Product( 4,'p 4',4,'p 4','p 4',4,4,4,4,true )
    ];
    productsCount: number = 4; 
  //
    id: string;
    nav: HTMLSelectElement;
    //
    constructor(
        private _modalService: NgbModal,
        private _elementRef: ElementRef ) { }
    //
  ngOnInit() {
  }
  // events
  reloadProducts( event ) {
    console.log( event );
  }
  addItemClicked( ) {
    console.log( 'Add item clicked...' );
  }
  editItemClicked( item: Product ) {
    console.log( item.ProdCategoryId );
  }
  deleteItemClicked( item: Product ) {
    console.log( item.ProdCategoryId );
  }
  //
}