Angular CLI Library component sass @import with node_modules not working as expected

Type of Issue

[ ] Bug Report
[ ] Feature Request
[x] Support

Description

I’m using Angular CLI to build my library using the official Material Design web components: https://github.com/material-components/material-components-web/

My goal is to wrap these material web components in my own components for my custom library. Everything goes fine until I try to use @import to reference the required button styles from my node_modules. See my process below.

How To Reproduce

ng new jr-material-lib-app --style=scss

(rename jr-material-lib-app to jr-material-lib so I can reuse the name for the actual library)

cd jr-material-lib
ng generate library jr-material-lib --prefix=jrm

---

Add the following scripts to the root package.json:
"build_lib": "ng build --prod jr-material-lib"
"build_lib_serve": "ng build --prod jr-material-lib && ng serve"

---

Import the library module into my test app module
src/app/app.module.ts

Add the default component into the test app:
src/app/app.component.html

---

ng generate component button --project=jr-material-lib

Added the new component to the the module exports:
projects/jr-material-lib/src/lib/jr-material-lib.module.ts

Added the component reference into the public.api.ts:
export * from './lib/button/button.component';

After building, I added the component to the test app .html file. The button appears via "ng serve"

---

npm install @material/button

Change stylesheet from css to scss extension (the library ignores the global scss setting)
Build and serve -- works fine

Add the sass import to my component styles:
@import "~@material/button/mdc-button";
Build and serve -- receive the error below

Error:

BUILD ERROR
File to import not found or unreadable: @material/ripple/common.
Error: File to import not found or unreadable: @material/ripple/common.
    at options.error (/Users/chris/Developement/jr-material-lib/node_modules/node-sass/lib/index.js:291:26)

File to import not found or unreadable: @material/ripple/common.
Error: File to import not found or unreadable: @material/ripple/common.
    at options.error (/Users/chris/Developement/jr-material-lib/node_modules/node-sass/lib/index.js:291:26)

Expected Behaviour

To resolve this error with a standard Angular project I go into angular.json and add the following: “stylePreprocessorOptions”: { “includePaths”: [ “node_modules” ]

Per the instructions in the quick-start here: https://github.com/material-components/material-components-web/

However, for the library I’ve seen that this is configured instead in the library’s package.json: https://github.com/dherges/ng-packagr/blob/master/docs/style-include-paths.md

{
    "name": "jr-material-lib",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
        "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
        "@material/button": "^0.36.0"
    },
    "ngPackage": {
        "lib": {
            "styleIncludePaths": [
                "../../node_modules"
            ]
        }
    }
}

When I do this, the project builds, but the dist directory is put within the projects > {library-name} instead of the root dist > {library name} directory. However, manually copying the contents to the root dist folder produce the expected results.

Is there a way to automate this, or ensure the project builds in the correct location?

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: "^3.0.0-rc.2"
@angular/*: "^6.0.0
typescript: "~2.7.2"
rxjs: "^6.0.0"
node: v8.11.1

Please include all version numbers that might be relevant, e.g. third-party libraries

"@material/button": "^0.36.0"

[alan-agius4]

Can you actually create a small reproduction and share it please?

ng-packagr doesn’t use the angular.json, you need to set the settings in the ng-packagr.js which is under the lib folder.

Also since the import is for a node_module you don’t need to use the styleIncludePath, you simple use a tilda import and it will be resolved automatically.

import @material/ripple/common

will become 

import ~@material/ripple/common

[github-actions[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem. _{This action has been performed automatically by a bot.}