I'm trying to update a Angular 4 project to reach Angular 17, and when I updated to Angular 11 I noticed some styles are broken, but nothing seems wrong. Things i believe are important: I used to have these in my styles.css file, and I was getting an error that it could not resolve the files, even though dependencies are installed: @import "~font-awesome/css/font-awesome.css"; @import "~@angular/material/prebuilt-themes/indigo-pink.css"; I removed the "~" symbols, and solved the IDE error, however on runtime I was getting a 404 error in DevTools' network, so I copied those CSS into my assets folder (and modified the imports to point there), fixing that. Now I get no DevTools errors. Also, there are no console errors when I run ng build --prod. I'm using this setup for the related dependencies: "dependencies": { "@angular-devkit/schematics": "~11.2.19", "@angular/animations": "~11.2.14", "@angular/cdk": "~11.2.13", "@angular/cli": "~11.2.19", "@angular/common": "~11.2.14", "@angular/compiler": "~11.2.14", "@angular/core": "~11.2.14", "@angular/forms": "~11.2.14", "@angular/material": "~11.2.13", ... "@fortawesome/angular-fontawesome": "~0.9.0", "@fortawesome/fontawesome-common-types": "~6.1.0", "@fortawesome/fontawesome-svg-core": "~6.1.0", ... "bootstrap": "~3.4.1", } I can't show the application due to it being for a private client, but basically I can't use custom fonts, and my two side menus look completely off, anything containing an icon or image is either moved or resized really badly, and anything coming from material looks like a default field, especially buttons and inputs. I've also tried adding encapsulation: ViewEncapsulation.None to some of the components as well as updating to bootstrap 4, both without any luck. Also, even my custom CSS aren't being fully applied, so I guess there might be something else going on other than potential dependency issues... I'm sorry for not being able to show how the app looks, but I would really appreciate any indications towards what can it be. Continue reading...
