Promact / md2

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
http://code.promactinfo.com/md2/
MIT License
379 stars 112 forks source link

Can't resolve modules from md2 library #206

Closed ghost closed 7 years ago

ghost commented 7 years ago

Bug, feature request, or proposal:

Bug

What is the expected behavior?

MD2 component sass stylesheets should be correctly compiled to css.

What is the current behavior?

The module files reference .css files instead of scss and the sass styles are not getting compiled when running ng serve

What are the steps to reproduce?

  1. Create a base Angular 2 project using angular/cli.
  2. In your package.json, add a dependency as "md2": "git+https://github.com/Promact/md2.git"
  3. Run ng serve

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: http://plnkr.co/edit/rQmUz8WYRh5Vz4gwY8E4?p=info

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, MD2, OS, browsers are affected?

@angular/cli: 1.0.0
node: 7.10.0
os: darwin x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.1.2
md2: latest from github

Is there anything else we should know?

NPM Logs:

ERROR in ./~/md2/src/lib/toast/toast.ts
Module not found: Error: Can't resolve './toast.css' in '/Users/anil/Code/gymday/angular/node_modules/md2/src/lib/toast'
 @ ./~/md2/src/lib/toast/toast.ts 185:17-39
 @ ./~/md2/src/lib/toast/index.ts
 @ ./~/md2/src/lib/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/md2/src/lib/tooltip/tooltip.ts
Module not found: Error: Can't resolve './tooltip.css' in '/Users/anil/Code/gymday/angular/node_modules/md2/src/lib/tooltip'
 @ ./~/md2/src/lib/tooltip/tooltip.ts 393:17-41
 @ ./~/md2/src/lib/tooltip/index.ts
 @ ./~/md2/src/lib/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/md2/src/lib/accordion/accordionpanel.ts
Module not found: Error: Can't resolve './accordion.css' in '/Users/anil/Code/gymday/angular/node_modules/md2/src/lib/accordion'
 @ ./~/md2/src/lib/accordion/accordionpanel.ts 50:17-43
 @ ./~/md2/src/lib/accordion/accordion.ts
 @ ./~/md2/src/lib/accordion/index.ts
 @ ./~/md2/src/lib/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/md2/src/lib/accordion/accordiontab.ts
Module not found: Error: Can't resolve './accordion.css' in '/Users/anil/Code/gymday/angular/node_modules/md2/src/lib/accordion'
 @ ./~/md2/src/lib/accordion/accordiontab.ts 119:17-43
 @ ./~/md2/src/lib/accordion/accordion.ts
 @ ./~/md2/src/lib/accordion/index.ts
 @ ./~/md2/src/lib/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/md2/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
Module not found: Error: Can't resolve './pseudo-checkbox.css' in '/Users/anil/Code/gymday/angular/node_modules/md2/src/lib/core/selection/pseudo-checkbox'
 @ ./~/md2/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts 66:17-49
 @ ./~/md2/src/lib/core/selection/index.ts
 @ ./~/md2/src/lib/core/core.ts
 @ ./~/md2/src/lib/core/index.ts
 @ ./~/md2/src/lib/core.ts
 @ ./~/md2/src/lib/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
dharmeshpipariya-zz commented 7 years ago

@aniljaiswal use npm install md2 to install md2 in your project. and go throw step docs

ghost commented 7 years ago

@dharmeshpipariya As I mentioned in the first post, I've used md2 by directly referencing Github master branch as follows:

npm install --save https://github.com/Promact/md2.git

because we wanted to use the latest changes.

The above method is mentioned in your official docs. We aren't using the latest release, but the latest changes in Github repo.

Currently, what works for us is, renaming the .scss file reference to .css files in individual module's .ts files of md2 and then compiling.

Please suggest a solution by keeping the above point in consideration.

Thanks.

dharmeshpipariya-zz commented 7 years ago

@aniljaiswal please look issue #133