Creditors Direct Debit - Domiciliëringen Schuldeiser

Getting started for users

You can use directly on demo site Your data is stored as json files inside the localStorage of the browser you are using. With jsZip you can backup as zip file and/or transfert your data to other browsers and/or other computers

Warning for Microsoft Edge users

Microsoft Edge users may experience issues with generating .xml files for SEPA Direct Debit. This is due to a security feature in Microsoft Edge that blocks certain file downloads. If you encounter this issue, please try using a different browser such as Google Chrome or Mozilla Firefox to generate the .xml files or follow these steps to allow the download in Microsoft Edge:

• Create with notepad a new file Enable_cdd_vsoft_be_XML_Downloads.reg and copy the following content into it:

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge\ExemptFileTypeDownloadWarnings]
"1"="{\"file_extension\": \"xml\", \"domains\": [\"https://cdd.vsoft.be\"]}"

Save the file and double-click it to add the registry entry.

Development Tools used for this app on april 2026

• Install NVM for different versions of NodeJS)

• In terminal nvm install 22.14.0 and nvm use 22.14.0

• Angular CLI v21): npm i -g @angular/cli@21

• Visual Studio Code

Favorite vscode extensions and settings

• MarkDown Lint
• Angular Language Service
• XML Tools
• Bracket Pair Colorizer
• In settings 'brackets', activate Bracket Pair Colorization and Editor guides true
• In settings 'auto close', set 'Auto Closing Brackets' and 'Auto Closing Quotes' to 'always'

Getting started for developers

• Clone this repository: git clone https://github.com/JosVermoesen/cdd-ng.git.
• Run npm install inside the project root.
• Run ng serve -o in a terminal from the project root.
• If scripts are disabled, open Powershell as administrator and run Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser first!
• Profit. 🎉

NPM packages used for this app

• bootstrap(v5.3.8): npm i bootstrap@5

• ngx-bootstrap: npm i ngx-bootstrap@21.2.0

• file-saver: npm i file-saver

• @types/file-saver: npm i @types/file-saver

• jszip: npm i jszip

• date-fns: npm i date-fns

• @ngx-translate/core: npm i @ngx-translate/core@16

• @ngx-translate/http-loader: npm i @ngx-translate/http-loader@16

• install all packages in one commandline: npm i bootstrap@5 ngx-bootstrap@21.2.0 file-saver @types/file-saver jszip date-fns @ngx-translate/core@16 @ngx-translate/http-loader@16

styles.css

For use of bootstrap, add into styles.css:

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~ngx-bootstrap//datepicker//bs-datepicker.css';

Important1: tsconfig.json

Before building, add paths for jszip in compilerOptions AND set resolveJsonModule to 'true' :

"compilerOptions": {
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    },
    "baseUrl": "./",
    ...
    "resolveJsonModule": true,
    ...

warnings for file-saver

In angular.json, to avoid CommonJs warnings, add allowedCommonJsDependencies in the options section for file-saver, moment and jszip:

"builder": "@angular-devkit/build-angular:browser",          
            ...
            "options": {
            "allowedCommonJsDependencies": [
              "file-saver",
              "moment",
              "jszip"]
            ...

Angular 17.0.0 refactoring tools

Follow the instructions in the Angular Update Guide to fix your app.

standalone components

You can switch older Angular programs to standalone with ng generate @angular/core:standalone

There are 3 options to refactor your code:

• ng generate @angular/core:standalone-components-migration
• ng generate @angular/core:standalone-directives-migration
• ng generate @angular/core:standalone-pipes-migration

IF YOU WANT YOUR APP CHANGED TO STANDALONE COMPONENTS YOU MUST RUN THESE MIGRATION COMMANDS WITH ANGULAR VERSION 17.x BEFORE MOVING TO THE NEXT VERSION OF ANGULAR. OTHERWISE YOU WILL GET ERROR IN LATER VERSION AND YOU HAVE TO DO ALL MANUALY!

Angular 19.0.0 refactoring tools

• ng g @angular/core:signal-input-migration
• ng g @angular/core:signal-queries-migration
• ng g @angular/core:output-migration

Update to Angular 20

Updating to latest Angular 21

This app is now on Angular 21. Before starting an update, always commit first any valid open changes

Note: ngx-bootstrap@21.2.0 currently targets Angular 21.x. Upgrading Angular beyond 21 can cause runtime DI errors unless ngx-bootstrap adds support for that Angular version.

update to latest Angular 21: ng update @angular/cli@21 @angular/core@21

npm outdated

In terminal use npm outdated to see what packages are requiring updates and what their current and wanted versions are.

This will also show you which packages are deprecated.

If you want to update a package to a version newer than what is specified in your package.json, you can do so by running npm update [package-name]@[version-number].

vulnerabilities

In terminal use npm audit fix to automatically install compatible updates to vulnerable dependencies.

You can first run npm audit to see vulnerabilities in your project for one or more packages.

Run npm ls [package-name] to see which packages depend on the vulnerable package.