Cannot use Row Grouping extension for Angular 2

AndyDean

We've got an Angular Component, and we need to implement the RowGrouping Extension (already installed via NPM); but for some reason, when running our app in the browser, The console throws this error:

GET http://localhost:1234/datatables.net-rowgroup 404 (Not Found)

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:1234/datatables.net-rowgroup
Error: XHR error (404 Not Found) loading http://localhost:1234/datatables.net-rowgroup

If the DT buttons are working fine, why the Row Grouping extension is not?. I do thank you all in advance:

In the package.json file, you can check that the RowGrouping Extension is already installed, still, nothing availed..

(datatable-component.ts)
import { Component, OnInit, Input, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons.html5';
// import 'datatables.net-rowgroup'; // HERE IS FAILING
import 'datetime-moment';
import 'dataTables.bootstrap.min';

@Component({
selector: 'data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./css/dataTables.bootstrap.min.css', './data-table.component.css', './css/buttons.dataTables.min.css'],
encapsulation: ViewEncapsulation.None
})
export class DataTableComponent implements OnInit {
@ViewChild('tableElement') tableElement: ElementRef;

currentDatatable: any = null;

constructor() {
    $.fn.dataTable.moment('MMM DD YYYY');
}

ngOnInit() {

}

setConfig(config: any) {
    if (this.currentDatatable){
        this.currentDatatable.destroy();
    }
    config.buttons = config.buttons || [{
        text: 'Download to Excel',
        extend: 'csv',
        className: 'button-to-link'
    }],
    config.oLanguage = { "sSearch": '<i class="fa fa-search" aria-hidden="true"></i>', "sLengthMenu": "Show _MENU_" };
    config.dom = '<"top"lf>t<"bottom"pi>B'; /* Ubicacion de diversos controles de datatable: https://datatables.net/examples/basic_init/dom.html */
    this.currentDatatable = $(this.tableElement.nativeElement).DataTable(config);
}

getDataFromRow(row: any): Object {
    if ($(this.tableElement.nativeElement).find('td').length == 0) {
        return null;
    } 
    var table = $(this.tableElement.nativeElement).DataTable();
    let result = table.row(row).data();
    return result;
}

}

(package.json)
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"angular2-draggable": "^1.0.5",
"babel-polyfill": "^6.23.0",
"core-js": "^2.4.1",
"datatables.net": "^1.10.15",
"datatables.net-buttons": "^1.5.1",
"datatables.net-dt": "^1.10.15",
"datatables.net-rowgroup-dt": "^1.0.2",
"ngx-bootstrap": "^1.9.0",
"ngx-mydatepicker": "^2.0.9",
"ngx-rating": "0.0.9",
"npm": "^5.7.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"ts-helpers": "^1.1.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/datatables.net": "^1.10.1",
"@types/jasmine": "2.5.36",
"@types/jquery": "2.0.45",
"@types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"jasmine-core": "~2.4.1",
"jquery": "^3.2.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.1.0"
},
"repository": {}
}

AndyDean

I forgot to mention that I had also installed the extension within its associated stylesheet.
Below are the commands I input in the NPM in order to get installed the RowGroup Extension in our project:

>> npm install --save datatables.net-rowgroup
>> npm install --save datatables.net-rowgroup-dt

Something that has caught my attention, is what I'm getting in the Chrome Developer Tools in the NETWORK Tab about all the downloaded files:

The information below is regarding the HEADERS Tab, inside NETWORK Tab.

DataTables Styles:

Request URL:http://localhost:1234/Scripts/dataTables.bootstrap.min.js
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:1234
Referrer Policy:no-referrer-when-downgrade
DataTables Buttons:

DataTables Buttons:

Request URL:http://localhost:1234/node_modules/datatables.net-buttons/js/dataTables.buttons.js
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:1234
Referrer Policy:no-referrer-when-downgrade
DataTables RowGroup Extension (There are differences here!!):

DataTables RowGroup Extension:

Request URL:http://localhost:1234/datatables.net-rowgroup
Request Method:GET
Status Code:404 Not Found
Remote Address:[::1]:1234
Referrer Policy:no-referrer-when-downgrade

For some reason, the DT RowGroup's files are not being read from the node_modules folder, in spite of being the files there already...

I do thank you all in advance for your suggestions about what might be going on here...

Regards!!