search

danielmoncada / date-time-picker

Angular Date Time Picker (Responsive Design)
https://daniel-projects.firebaseapp.com/owlng/date-time-picker
MIT License
137 stars 59 forks source link

Missing CSS assets `exports` entry in published library `package.json` generates build errors with Angular 15 #173

Closed KeithGillette closed 1 year ago

KeithGillette commented 1 year ago

Problem Description

As I reported in #172, attempting to use @danielmoncada/angular-datetime-picker with Angular 15 (specifically, @angular-devkit/build-angular@^15.0.0 generates the following build errors on ng serve:

./src/styles.css - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./assets/style/picker.min.css is not exported from package /path/to/project/node_modules/@danielmoncada/angular-datetime-picker (see exports field in /path/to/project/node_modules/@danielmoncada/angular-datetime-picker/package.json)

./src/styles.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./assets/style/picker.min.css is not exported from package /path/to/project/node_modules/@danielmoncada/angular-datetime-picker (see exports field in /path/to/project/node_modules/@danielmoncada/angular-datetime-picker/package.json)

Steps to Reproduce

  1. Create a new Angular 15 CLI project
  2. Install Angular Date/Time Picker: npm install @danielmoncada/angular-datetime-picker
  3. Add @import "@danielmoncada/angular-datetime-picker/assets/style/picker.min.css"; to src/styles.scss
  4. Attempt to build: ng serve

Additional Notes

I think the @angular-devkit/build-angular@^15.0.0 styles processing changes include more strictly enforcing correct package entry points, so the distributed package must include the CSS asset as an entry point in the installed package.json per Angular's Creating Libraries > Managing assets in a library documentation.

danielmoncada commented 1 year ago

@KeithGillette thanks for the issue. I'm about to go on vacation soon, but if you can get a PR in, I can review and submit tonight.

KeithGillette commented 1 year ago

Thanks for the reply, @danielmoncada. I'd be happy to contribute a PR but I don't have knowledge of publishing Angular libraries, so I'm not sure how the exports field of the distributed package.json is generated.

JulianS1987 commented 1 year ago

I had the same Problem with @angular-devkit/build-angular@^15.0.0. I have added the picker.min.css to the projects package.json as described at angular.io -> creating libraries and created a pr -> #176 .