search

Gbuomprisco / ng2-material-dropdown

Angular 2 Material-like Dropdown Component
MIT License
37 stars 54 forks source link

fix: make the library compatible with AoT and universal, dont bundle stylesheets #37

Closed mattlewis92 closed 6 years ago

mattlewis92 commented 7 years ago

Hi, thanks for this lib! Unfortunately I had some issues when trying to use it with AoT. Initially webpack would error out with:

Module parse failed: /workspace/node_modules/ngx-chips/dist/modules/components/tag-input/tag-input.style.scss Unexpected character '@' (1:0)
2017-08-30T17:49:01.897Znodejs-chrome   You may need an appropriate loader to handle this file type.
2017-08-30T17:49:01.897Znodejs-chrome   | @import "../../core/styles/themes/_themes.scss";
2017-08-30T17:49:01.897Znodejs-chrome   | @import "../../core/styles/components/_components.scss";

Adding it then resulted in the build failing with:

window is not defined

This PR refactors the lib to be more in line with the angular packaging guidelines which state:

Inlining of templates and stylesheets

Component libraries are typically implemented using stylesheets and html templates stored in separate files. While it's not required, we suggest that component authors inline the templates and stylesheets into their FESM files as well as *.metadata.json files by replacing the stylesheetUrls and templateUrl with stylesheets and template metadata properties respectively. This simplifies consumption of the components by application developers.

I also moved the styles out into their own stylesheet rather than inlining them. My usecase is that I'd like to overwrite some of the default styles which I can do, but it requires me to use !important on every rule I override.

If you're happy with these changes I will also send a PR to https://github.com/Gbuomprisco/ngx-chips with a similar changeset. If you don't want the breaking change I can just re-inline the styles and deal with having to use !important

BREAKING CHANGE: The libraries stylesheet must now be included somewhere in your app. For CLI users this is a case of adding this line to src/styles.css:

@import '~ng2-material-dropdown/dist/ng2-dropdown.css';

Probably fixes #30

neilhem commented 6 years ago

Is any news merging this into master and releasing into npm? Lack of universal support limits usage of this plugin.