0

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?

3
  • Maybe clear the dist folder and build again. It sounds (to me) like the changes aren't being saved or built. Oct 21, 2022 at 17:20
  • @DanielGuzman Deleted the dist folder from the project, ran ng build and ng serve again, contents in the dist folder still look the same afterwards. Contents on the site still not updating. The curious thing is that changes in the project itself do indeed update, it's just the changes in the modules that do not get propagated. Oct 26, 2022 at 5:23
  • @DanielGuzman I even went a step further just now. Deleted the dist folder, uninstalled the module, commented out the element in the html and the imports in the app module as well as the scss, built the project again, confirmed it was running, then installed the module again, deleted the dist folder once more, included the parts again I had commented out, build the project again. Still no update in the browser. Oct 26, 2022 at 5:41

1 Answer 1

0

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
  }
},

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.