staterestore is not working with Angular 18.2.10 & TypeScript 5.5.4

[alpozgur]

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';

[AllanJard]

node_modules/@ngtools/webpack/src/ivy/index.js isn't something that StateRestore pulls in. Indeed, StateRestore only has dependencies on datatables.net and jquery.

If you remove:

import 'datatables.net-staterestore';
import 'datatables.net-staterestore-bs5';

do you get the same error?

If not, can you create a minimal test case on StackBltiz showing the issue please?

[alpozgur]

No. If i remove them everything works well. I will try to create a test case... i had tried to create test case for my other problems before without success :/... But give a chance again :))

[alpozgur]

https://stackblitz.com/edit/stackblitz-starters-9uunyc?file=src%2Fmain.ts

i can't get build for the reason of datetime and buttons components...
in buttons, you will see the types.d.ts error... this was the one that i reported before DataTables/Buttons#207 (comment)

[alpozgur]

I solved this by editing the types.d.ts file as follows
types.d.txt

[alpozgur]

StateRestore is not working with nodejs 22.10 and later versions...
Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
these errors only exists if you use nodejs 22.10 and later... it's working normal at 22.4.0 of nodejs

[AllanJard]

I've committed a fix for the DateTime typing error here.

The error in the Buttons types was corrected here but hasn't yet been released. I'll try to do that later this week.

Regarding the ivy/index.js error - I'm not sure how that relates to DataTables, as we have no dependency on that. Happy to take a look at a test case showing the issue though.