How do I get my app to update my library consistently?

23 Views Asked by At

So I've written a library with a component like this in it in Angular 14:

@Component({
  selector: 'site-container[headerDataStorage]',
  templateUrl: 'site-container.component.html',
  styleUrls: ['./site-container.component.scss'],
  ...
})
export class SiteContainerComponent {
  ...
}

I have now updated to angular 16, in which the class names of .mat-card have changed to .mat-mdc-card, so I've changed my scss from:

.site-container {
  ...
  
  > .mat-card {
    ...
  }
}

to:

.site-container {
  ...

  > .mat-mdc-card {
    ...
  }
}

However, in the browser I cannot see any changes. I see the style for .mat-site-container but not the ones of .mat-mdc-card. Looking at the <style>-tag inserted by angular, I can see there's still the old css, namely: .site-container > .mat-card .... But when I search for it in the corresponding node_modules folder via Visual Studio Code I can see the site-container.mjs contains the new style tags .site-container > .mat-mdc-card. I assumed this was a cache issue at first but when I loaded the site on Firefox (for the first time, mind you), it had the same issue, old css in the <style>-tag.

Then, I commented the whole line styleUrls: ['./site-container.component.scss'], out to see if this was an issue with the library in general or just the scss. I reinstalled the library, no changes. Then, instead of just installing my library, I first uninstalled it, then installed it again, only to receive an error of an incorrect dependency between the angular/[email protected] from my app and the angular/[email protected] from the peerDependencies in my library. So I removed the peerDependency, installed again, worked - the browser had actually updated the commented out line and did not insert the css at all. It also updated the library in the node_modules of my app and now missed all the css as intended. So I commented the line back in, uninstalled, reinstalled, nothing. I looked in the .mjs in my node_modules, still contained the commented out line for the styleUrls. I added the peerDependency again, this time there was no dependency conflict (???), uninstall, reinstall ... still nothing. I can't get my css back in.

Why the hell does my angular library code not get updated every time? I never had any issues with this in angular 14. How do I get it to update every time I reinstall my library? I want to see every damn change I make. How is this so difficult and not the damn default behaviour?

0

There are 0 best solutions below