Angular-cli: Angular library doesn't allow component styles (sass) to access node_modules via @import

[endigo9740]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Area

- [x] library (ng-package)

Versions

• node: v8.11.1
• npm: 6.1.0
• angular-cli: 6.0.8

Repro steps

This is the process for resolving the issue in a regular angular project. However this does not seem to work for a library:

• Open angular.js and set the stylePreprocessorOptions like so:

   "styles": ...,
    "stylePreprocessorOptions": {
        "includePaths": [
            "node_modules"
        ]
    },
    "scripts": ...

• Create a component and insert the import statement with a tilde:
  @import "~@material/button/mdc-button";
• This works fine for a standard angular project, but throws errors for my angular library (see below)

The log given by the failure

The structure of the angular.js > library project > architect > build > options doesn't allow me to set stylePreprocessorOptions. It throws the following errors:

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(stylePreprocessorOptions).

When using @import without setting stylePreprocessorOptions:

...
Rendering Stylesheets

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/.../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/.../Developement/jr-material-lib/node_modules/node-sass/lib/index.js:291:26)
...

Desired functionality

I need a way for my library components to utilize scss styles located in node_modules

[endigo9740]

This seems to have resolved the error:

https://github.com/dherges/ng-packagr/blob/b401c899789aa97d369c2607116f4bcf218319e5/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"]
    }
  }
}

No errors are thrown now, but no styles are actually applied to the element itself. This may be an unrelated issue so I'll post back if I find a solution.

[endigo9740]

Ok, I see the issue. The dist directory is being placed in the wrong place during the build process when "ngPackage" is used:

 projects > {library-name} > dist

Rather than at the root of the project inside the appropriately named library directory:

dist > {library-name}

Manually moving the files give the desired result. Any idea why this occurs?

[endigo9740]

This seems to be an issue on the ng-packagr end, so I'm going to go ahead and close this for now. I'll move my issue over to their tracker.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}