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

Development Tools used for this app on december 2024

• Install NVM for different versions of NodeJS)

• In terminal nvm install 20.14.0 and nvm use 20.14.0

• Visual Studio Code

• Angular CLI(v19): npm i -g @angular/cli@19

Getting started for developers

• Install NodeJS. Hint: eventually install and use nvm for easy installing and/or switching between node versions
• Clone this repository: git clone https://github.com/JosVermoesen/ngb-cdd.git.
• Run npm install inside the project root.
• Run ng serve 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.3): npm i bootstrap@5

• ngx-bootstrap: npm i ngx-bootstrap@19 (or greater)

• 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@19

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

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

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

Updating to latest Angular 19

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

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

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 19

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.