DataTables / DataTables/StateRestore

staterestore is not working with Angular 18.2.10 & TypeScript 5.5.4

Open
#8 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3
Forks
2
PR merge metrics
No merged PRs in 30d

Description

Steps:

  • install npm packages of staterestore and staterestore-bs5
  • add to angular.json (bs5 css and staterestore js and bs5 js)
  • import in a page
    getting error of
    Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
    Error: Emit attempted before Angular Webpack plugin initialization.

package.json :
"datatables.net": "^2.1.8",
"datatables.net-bs5": "^2.1.8",
"datatables.net-buttons": "^3.1.2",
"datatables.net-buttons-bs5": "^3.1.2",
"datatables.net-buttons-dt": "^3.1.2",
"datatables.net-datetime": "^1.5.4",
"datatables.net-dt": "^2.1.8",
"datatables.net-plugins": "^2.1.7",
"datatables.net-responsive": "^3.0.3",
"datatables.net-responsive-bs5": "^3.0.3",
"datatables.net-responsive-dt": "^3.0.3",
"datatables.net-searchbuilder": "^1.8.0",
"datatables.net-searchbuilder-bs5": "^1.8.0",
"datatables.net-searchbuilder-dt": "^1.8.0",
"datatables.net-select": "^2.1.0",
"datatables.net-select-bs5": "^2.1.0",
"datatables.net-select-dt": "^2.1.0",
"datatables.net-staterestore": "^1.4.1",
"datatables.net-staterestore-bs5": "^1.4.1",

angular.json
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles.scss",
"node_modules/datatables.net-dt/css/dataTables.dataTables.min.css",
"node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css",
"node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
"node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
"node_modules/datatables.net-searchbuilder-bs5/css/searchBuilder.bootstrap5.min.css",
"node_modules/datatables.net-select-dt/css/select.dataTables.min.css",
"node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css",
"node_modules/datatables.net-staterestore-bs5/css/stateRestore.bootstrap5.min.css",
"node_modules/datatables.net-datetime/css/dataTables.dateTime.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/raphael/raphael.js",
"node_modules/tether/dist/js/tether.min.js",
"node_modules/datatables.net/js/dataTables.min.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
"node_modules/jszip/dist/jszip.js",
"node_modules/pdfmake/build/pdfmake.js",
"node_modules/pdfmake/build/vfs_fonts.js",
"node_modules/datatables.net-buttons/js/buttons.html5.min.js",
"node_modules/datatables.net-buttons/js/buttons.print.min.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.min.js",
"src/assets/scripts/resources/datatables/completed/dataTables.responsive.js",
"node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
"node_modules/datatables.net-staterestore/js/dataTables.stateRestore.min.js",
"node_modules/datatables.net-staterestore-bs5/js/stateRestore.bootstrap5.min.js",
"node_modules/datatables.net-select/js/dataTables.select.min.js",
"node_modules/datatables.net-select-bs5/js/select.bootstrap5.min.js",
"node_modules/datatables.net-searchbuilder/js/dataTables.searchBuilder.min.js",
"node_modules/datatables.net-searchbuilder-bs5/js/searchBuilder.bootstrap5.min.js",
"node_modules/datatables.net-datetime/js/dataTables.dateTime.js"
],

page usage
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import languageTR from './../../../../assets/scripts/resources/tr.mjs';
import moment from 'moment';
import { DataTableDirective } from 'angular-datatables';
import { ADTSettings } from 'angular-datatables/src/models/settings';
import { UntypedFormControl, Validators, UntypedFormGroup, FormBuilder } from '@angular/forms';
import { toNumber } from 'lodash';
import { Config } from 'datatables.net';
import 'datatables.net-responsive';
import 'datatables.net-bs5';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons-bs5';
import 'datatables.net-staterestore';
import 'datatables.net-staterestore-bs5';
import 'datatables.net-searchbuilder-dt';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-datetime';

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with package.json and angular.json, install the listed packages, and reproduce the Angular build using the shown page imports and scripts. Trace the Emit attempted before Angular Webpack plugin initialization error; done means the Angular 18.2.10 and TypeScript 5.5.4 application builds with StateRestore enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.