[FIXED] Why do my custom modules not get updated?

Issue

I've written a library with several custom modules but I'm recently having trouble updating them. I haven't worked on this project for quite a while but I don't recall having any issues with this last time. I'm working with Visual Studio Code and encountered an error including one of the modules in a way it isn't supposed to, so I've added a check into one of its functions.

private transferRadius(buttons: HTMLButtonElement[], alignment: string): void {
  if(buttons.length === 0) { return; }

  if (alignment === 'vertical') {
    this.buttonGroup.nativeElement.style.borderTopLeftRadius = this.getButtonRadius(buttons[0], 'top-left');
    this.buttonGroup.nativeElement.style.borderTopRightRadius = this.getButtonRadius(buttons[0], 'top-right');
    this.buttonGroup.nativeElement.style.borderBottomRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-right');
    this.buttonGroup.nativeElement.style.borderBottomLeftRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-left');
  } else {
    this.buttonGroup.nativeElement.style.borderTopLeftRadius = this.getButtonRadius(buttons[0], 'top-left');
    this.buttonGroup.nativeElement.style.borderTopRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'top-right');
    this.buttonGroup.nativeElement.style.borderBottomRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-right');
    this.buttonGroup.nativeElement.style.borderBottomLeftRadius = this.getButtonRadius(buttons[0], 'bottom-left');
  }
}

I've installed the updated module into my project and when I take a look at the .mjs file of my module in the node_modules folder I can see the changes added. However, when I run ng build and/or ng serve the changes do not show up in the browser and I'm still running into the exception I'm trying to get rid of. This is not a cache issue, because I'm generally reloading the page with ctrl + f5, I've also cleared the cache and opened the site in Firefox for the first time (so there is no cache at all) with the same issue - which also means it's not a browser issue either.

This is what the .mjs file looks like in Chrome's developer tools:

transferRadius(buttons, alignment) {
  if (alignment === 'vertical') {
    this.buttonGroup.nativeElement.style.borderTopLeftRadius = this.getButtonRadius(buttons[0], 'top-left');
    this.buttonGroup.nativeElement.style.borderTopRightRadius = this.getButtonRadius(buttons[0], 'top-right');
    this.buttonGroup.nativeElement.style.borderBottomRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-right');
    this.buttonGroup.nativeElement.style.borderBottomLeftRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-left');
  }
  else {
    this.buttonGroup.nativeElement.style.borderTopLeftRadius = this.getButtonRadius(buttons[0], 'top-left');
    this.buttonGroup.nativeElement.style.borderTopRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'top-right');
    this.buttonGroup.nativeElement.style.borderBottomRightRadius = this.getButtonRadius(buttons[buttons.length - 1], 'bottom-right');
    this.buttonGroup.nativeElement.style.borderBottomLeftRadius = this.getButtonRadius(buttons[0], 'bottom-left');
  }
}

As you can see, the check for an empty array is missing. I also have a similar issue with another module, whose contents do not show up at all, which is again due to a missing update. I initially forgot to set the selector properly, thus my line selector: 'mat-editor[content]', shows up as args: [{ selector: 'lib-mat-editor', template: "<div class=\"mat-editor\"></div>" }] and hence, the element <mat-editor _ngcontent-jtc-c50=""></mat-editor> has no <div> child.

I've tried to find out where the project gets deployed to but only found out that it's likely just stored in the memory and not on the physical disk. I've also checked the dist folder in the project after an ng build, but that one only has a runtime...js, polyfills...js, and main...js as well as an index.html and some resources. No sight of the module at all (I assume it's somewhere included in the .js files?). How can I get my custom modules to update in the browser?

Solution

After a lot of diggin in, turns out the culprit was the webpack cache, although I don't know why it didn't replace the cached contents of the modules with the changed code - an explanation would be very welcome.

Anyways, adding the following to the angular.json file to disable the webpack cache worked for me.

"cli": {
  "cache": {
    "enabled": false
  }
},

Answered By - Otto Abnormalverbraucher

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)