Theming issue

[fomin-grigorich]

Hello. I just installed the latest version of the package but have an issue configuring theme for it. Did the same as described in article https://dhutaryan.github.io/ngx-mat-timepicker/#/getting-started#theming, but have an error in console for next line @use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker;

X [ERROR] Can't find stylesheet to import. 2 │ @use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Found a guy which also experiencing the same problem on gitHub but no answers there so I came here: https://stackoverflow.com/questions/79000535/ngx-mat-timepicker-is-not-giving-same-style-i-dont-know-how-to-add-theme-styli

[dhutaryan]

Could you tell me what version do you use?

[fomin-grigorich]

I tried on 17.6.0 and 18.0.1. Both with same error.

[fomin-grigorich]

"dependencies": { "@ag-grid-community/angular": "^31.2.1", "@ag-grid-community/client-side-row-model": "^31.2.1", "@ag-grid-community/core": "^31.2.1", "@ag-grid-community/csv-export": "^31.2.1", "@ag-grid-community/styles": "^31.2.1", "@ag-grid-enterprise/clipboard": "^31.2.1", "@ag-grid-enterprise/column-tool-panel": "^31.2.1", "@ag-grid-enterprise/excel-export": "^31.2.1", "@ag-grid-enterprise/filter-tool-panel": "^31.2.1", "@ag-grid-enterprise/menu": "^31.2.1", "@ag-grid-enterprise/row-grouping": "^31.2.1", "@ag-grid-enterprise/server-side-row-model": "^31.2.1", "@ag-grid-enterprise/set-filter": "^31.2.1", "@ag-grid-enterprise/side-bar": "^31.2.1", "@ag-grid-enterprise/status-bar": "^31.2.1", "@angular-material-components/datetime-picker": "^16.0.1", "@angular/animations": "^17.3.4", "@angular/cdk": "^17.3.4", "@angular/common": "^17.3.4", "@angular/compiler": "^17.3.4", "@angular/core": "^17.3.4", "@angular/elements": "^17.3.4", "@angular/forms": "^17.3.4", "@angular/material": "^17.3.4", "@angular/platform-browser": "^17.3.4", "@angular/platform-browser-dynamic": "^17.3.4", "@angular/router": "^17.3.4", "@angular/service-worker": "^17.3.4", "@ckeditor/ckeditor5-angular": "^7.0.1", "@glidejs/glide": "^3.6.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@stomp/stompjs": "^7.0.0", "chart.js": "^4.4.2", "cropperjs": "^1.6.1", "jspdf": "^2.5.1", "jspdf-autotable": "^3.8.2", "juice": "^10.0.0", "keycloak-angular": "^15.2.1", "material-icons": "^1.13.12", "ngx-indexed-db": "^17.1.0", "postcss": "^8.4.38", "postcss-css-variables": "^0.19.0", "rxjs": "^7.8.1", "tslib": "^2.6.2", "uuid": "^9.0.1", "zone.js": "~0.14.4" }, "devDependencies": { "@4tw/cypress-drag-drop": "^2.2.5", "@angular-builders/custom-webpack": "^17.0.2", "@angular-devkit/build-angular": "^17.3.4", "@angular-eslint/builder": "17.3.0", "@angular-eslint/eslint-plugin": "17.3.0", "@angular-eslint/eslint-plugin-template": "17.3.0", "@angular-eslint/schematics": "17.3.0", "@angular-eslint/template-parser": "17.3.0", "@angular/cli": "^17.3.4", "@angular/compiler-cli": "^17.3.4", "@angular/language-service": "^17.3.4", "@babel/runtime": "^7.24.4", "@cypress/schematic": "^2.5.1", "@ngneat/spectator": "^18.0.1", "@types/jest": "^29.5.12", "@types/node": "^20.12.7", "@typescript-eslint/eslint-plugin": "^7.7.0", "@typescript-eslint/parser": "^7.7.0", "connect-history-api-fallback": "^2.0.0", "cypress": "latest", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "http-proxy-middleware": "^3.0.0", "jest": "^29.7.0", "jest-preset-angular": "^14.0.3", "ng-packagr": "^17.3.0", "prettier": "^3.2.5", "prettier-eslint": "^16.3.0", "source-map-explorer": "^2.5.3", "ts-node": "^10.9.2", "typescript": "^5.4.5", "webpack-bundle-analyzer": "^4.10.2" }

[dhutaryan]

Hm, I tried on stackblitz and it works. Try to remove node_modules and install dependencies again. I have no idea what it can be for now.

[fomin-grigorich]

Sorry, but reinstall wasn't very helpful. I removed node_modules and package-lock.json, installed packages but error is still in place. I was full of hope that can use your package in our project but unfortunately it's not working for me. :(

[dhutaryan]

You can use a temporary workaround: @use "@dhutaryan/ngx-mat-timepicker/index.scss" as mat-timepicker;

I have the same for the new project but didn't have it on stackblitz. It's a bit strange.

[dhutaryan]

Alright, I figured out the issue, my bad.

Fixed in: 15.4.1 16.4.1 17.6.1 18.0.2

[fomin-grigorich]

Thanks for such a quick response on that issue. Appreciate that so much. My boss already agreed on your package and we will use it in our project. It looks very promising for us. Good luck!

[dhutaryan]

Thank you. I guess now everything is working. So, I'll close the issue then.