CSS не применяется к угловым компонентам после обновления до Angular 18 ⇐ CSS

[Anonymous]

Недавно я обновил свое угловое приложение с версии 14 по 18. После обновления файлы CSS, упомянутые в отдельных компонентах, больше не применяются. Единственный CSS, который применяется, - это глобальные styles.css. < /P>
Что я пробовал: < /p>

[*] Работа нормально, когда я обновился до Angular 17, но
перестал работать в угловом 18. < /li>
Я проверил, что файлы CSS-специфики для компонента правильно ссылаются в массиве StyleUrls. < / li>
Пробовал использование как относительных, так и абсолютных путей в Styleurls, но ни
worked.
Нет ошибок, связанных с отсутствующими стилями. > Консоль. < /li>
< /ul>
package-lock.json

Код: Выделить всё

{
"name": "investment-paper-digitisation-frontend",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "investment-paper-digitisation-frontend",
"version": "0.0.0",
"dependencies": {
"@angular-slider/ngx-slider": "^18.0.0",
"@angular/animations": "^18.2.13",
"@angular/cdk": "^18.2.14",
"@angular/common": "^18.2.13",
"@angular/compiler": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "^18.2.13",
"@angular/material": "^18.2.14",
"@angular/material-moment-adapter": "^18.2.14",
"@angular/platform-browser": "^18.2.13",
"@angular/platform-browser-dynamic": "^18.2.13",
"@angular/router": "^18.2.13",
"@azure/msal-angular": "^4.0.2",
"@azure/msal-browser": "^4.0.2",
"@azure/storage-blob": "^12.12.0",
"@types/d3": "^7.4.0",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"cookie": "^1.0.2",
"d3": "^7.6.1",
"engine.io": "^6.6.3",
"ng-apexcharts": "^1.7.1",
"ngx-mat-select-search": "^7.0.10",
"ngx-permissions": "^14.0.0",
"postcss": "^8.4.31",
"rxjs": "~7.5.0",
"socket.io-client-cookie": "^0.1.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.12",
"@angular/cli": "^18.2.12",
"@angular/compiler-cli": "^18.2.13",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"moment": "^2.29.3",
"typescript": "~5.4.5"
}
},< /code>
< /div>
< /div>

Пример объявления CSS: < /p>


@Component({
selector: 'app-risk-matrix-form',
templateUrl: './risk-matrix-form.component.html',
styleUrls: ['./risk-matrix-form.component.css']
})

Подробнее здесь: https://stackoverflow.com/questions/793 ... angular-18