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?