Installing angular-datatables with Angular cli but using bootstrap 5

[fabio-blanco]

I have a project with bootstrap 5 and I've installed angular-datatables with Angular cli:

ng add angular-datatables

The installation was successful but when prompted to choose the styling library, the last version of bootstrap provided was 4:

ℹ Using package manager: npm
✔ Found compatible package version: [email protected].
✔ Package information loaded.
✔ Package successfully installed.
? Which styling library would you like to use for DataTables? Bootstrap 4
    Your project needs Bootstrap CSS installed and configured for changes to take affect.
    ✅️ Added "jquery" into "dependencies"
    ✅️ Added "datatables.net" into "dependencies"
    ✅️ Added "@types/jquery" into "devDependencies"
    ✅️ Added "@types/datatables.net" into "devDependencies"
    ✅️ Added "datatables.net-bs4" into "dependencies"
    🔍 Installing packages...
    ✅️ Added "jQuery Core" into angular.json
    ✅️ Added "DataTables.net Core JS" into angular.json
    ✅️ Added "DataTables.net Bootstrap 4 CSS" into angular.json
    ✅️ Added "DataTables.net Bootstrap 4 JS" into angular.json
UPDATE package.json (1712 bytes)
UPDATE angular.json (3998 bytes)
✔ Packages installed successfully.

In the DataTables official site there seems to be a proper integration for bootstrap 5 available.

In the face of this info, what should I do? Just use the lib the way it was installed and trust the integrations will actually work? ...or assume Angular cli installations are outdated and install things manually? In case that I should make a manual installation, what are the steps I should follow?

Note: I wasn't able to find the proper info about bootstrap integration on docs. Is it there some info about it?

Thanks in advance,
Fabio

[shanmukhateja]

Hi,

Bootstrap 5 isn't officially supported yet. You'll need to install it manually. Don't forget to uninstall Bootstrap 4.

Although DataTables plugin supports it, I'm waiting for ngx-bootstrap and ng-bootstrap to release BS5 support before updating this library.

Meanwhile, a PR is always welcome :)

[fabio-blanco]

Hy, @shanmukhateja,

Thank you for your answer although I've already managed to install it (manually).

Although DataTables plugin supports it, I'm waiting for ngx-bootstrap and ng-bootstrap to release BS5 support before updating this library.

Well... ng-bootstrap has already released a beta version that supports bs5.

Meanwhile, a PR is always welcome :)

I would enjoy doing this but I'm afraid I will have no time to do this since I'm already contributing with other projects that have lots of work to do too. Not to mention my own projects!
Anyway, I can help with simpler things like some minor improvements in the docs. Are the docs source in another repository or branch?

[shanmukhateja]

Hi,

I am aware of the beta release of ng-bootstrap however I was referring to stable releases for general usage consumption.

The docs are available in the demo directory on master. Happy hunting :)

[fabio-blanco]

The docs are available in the demo directory on master. Happy hunting :)

More precisely at this location: tree/master/demo/src/assets/docs ?

[fabio-blanco]

I'm reevaluating the use of angular-datatables in my personal project because this turned out to be more difficult to configure than I think a lib should be. It is known that using jQuery in an Angular app has its potential problems and I'm actually not been able to solve some of then. I'm getting this error on the browser console when I access my app URL:

Refused to execute script from 'http://localhost:8080/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

And when I open the screen that uses the component with a DataTable I got this error:

ERROR ReferenceError: $ is not defined
    at angular-datatables.directive.js:90

After a page reload (F5) it seems that the angular-datatables works fine though. But this console error reminds me that something is not right and I'm not been able to solve the problem.
I have tried the solutions presented here, here, here, here, here and here. But with no success.

So I'm taking a step back, I've commited the code with angular-datatables to a branch and I will try a native Angular lib because to solve this issue is taking too much of my time.

[fabio-blanco]

For the people trying to achieve this manual installation, here it goes how I've done it:

Just follow the getting started docs in the manual installation section but instead of this:

npm install datatables.net-dt --save

...Do this:

npm install datatables.net-bs5 --save

An in the angular.json file, instead of this:

"projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
            ...
          }
}

... do this:

"projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js"
            ],
            ...
          }
}

In my case I had to uninstall datatables.net-bs4 before installing the bs5 version as I had already installed it by using the Angular Cli method:

npm uninstall datatables.net-bs4 --save