Repository: ng-packagr/ng-packagr

Issue #424: [Bug] Components: multiple styleUrls processed incorrectly
Created: 2017-12-19T00:24:15Z
Type of Issue
[x] Bug Report
[ ] Feature Request

Description
Windows: When trying to bundle a component that contains multiple values in the styleUrls property the assets processing step fails. (See below for more details)
Unix/Linux: My colleague was able to run the process, but all styles were concatenated into a single string value. This caused it's own issue where some styles were applied but not others. I think this may be because the <style> tag has a max char limit (although I couldn't verify that). When separating the one string into three all styles were applied correctly.
How To Reproduce
Include multiple style URLs in the component definition. Ensure the total number of lines is greater than 611 (that's the total number combined from the component's style definitions) or at least a reasonable/realistic content length for a highly styled component.
Expected Behaviour
The expected behavior is that the three style URL references become translated to inline styles each with their own dedicated place in the array. (3 style URLs : 3 inline strings)
Error Output
Component Decorator:
@Component({
  selector: 'web-wrapper-header',
  templateUrl: './web-wrapper-header.component.html',
  styleUrls: [
    './web-wrapper-header-animations.component.scss',
    './web-wrapper-header-toolbar.component.scss',
    './web-wrapper-header-sidenav.component.scss'
  ],
  providers: [
    WebWrapperUtilsService
  ],
  encapsulation: ViewEncapsulation.None
})
export class WebWrapperHeaderComponent implements OnInit, OnDestroy {

Output:

ng-packagr -p ng-package.json
Building Angular Package
Building from sources for entry point 'web-wrapper'
Cleaning build directory
Extracting templateUrl and styleUrls
Processing assets
BUILD ERROR
Cannot inline stylesheet C:\src\git\web-wrapper\src\app\components\web-wrapper-header,
Error: Cannot inline stylesheet C:\src\git\web-wrapper\src\app\components\web-wrapper-header,
at Object. (C:\src\git\xpo-web-wrapper\node_modules\ng-packagr\lib\steps\assets.js:87:31)
at Generator.throw ()
at rejected (C:\src\git\web-wrapper\node_modules\ng-packagr\lib\steps\assets.js:5:65)
at 
Build failed. The working directory was not pruned. Files are stored at {ngPackage.workingDirectory}.
npm ERR! code ELIFECYCLE
npm ERR! errno 111
npm ERR! web-wrapper@2.2.2 build-npm: ng-packagr -p ng-package.json
npm ERR! Exit status 111
npm ERR!
npm ERR! Failed at the web-wrapper@2.2.2 build-npm script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Version Information
Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cdk: 5.0.1
@angular/cli: 1.6.1
@angular/compiler-cli: 5.0.2
@angular/flex-layout: 2.0.0-beta.12
@angular/language-service: 5.0.2
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
ng-packagr@2.0.0-rc.7
tsickle@0.25.5


OS Version: Windows 7 SP1 x64 | Build x64.2015.4.0

Duplicate issue #407: [Bug] Comma at end in styleUrl will not compile.
Created: 2017-12-13T14:22:27Z
Type of Issue
[x] Bug Report
Description
I get the following error:
ng-packagr -p package.json

Building Angular Package
Building from sources for entry point 'adilo-dashboard'
Cleaning build directory
Extracting templateUrl and styleUrls
Processing assets

BUILD ERROR
Cannot inline stylesheet absolute-path\in\project\,
Error: Cannot inline stylesheet absolute-path\in\project\,
    at Object.<anonymous> ([...]\node_modules\ng-packagr\lib\steps\assets.js:87:31)
    at Generator.throw (<anonymous>)
    at rejected ([...]\node_modules\ng-packagr\lib\steps\assets.js:5:65)
    at <anonymous>

Not Compile
/**
 * @export
 */
@Component({
    selector: 'my-component',
    templateUrl: 'my-component.html',
    styleUrls: [
        'my-component.scss',
    ],
})
export class MyComponent {}

Compile
/**
 * @export
 */
@Component({
    selector: 'my-component',
    templateUrl: 'my-component.html',
    styleUrls: [
        'my-component.scss'
    ],
})
export class MyComponent {}

Whats the different
If there is a comma(,) behind the styleUrl in the component it wont compile in packagr but in angular-cli
See: styleUrls: [ 'my-component.scss' -->,<-- ],
Version Information
ng-packagr: ^2.0.0-rc.6
@angular/*: ~5.0.0
typescript: "~2.4.2"
rxjs: "^5.5.5",
node: 9.3.0
npm: 5.5.1

Closing comment (2017-12-29T16:58:31Z): It's ok with 1.6.0, but I have the same issue with 2.0.0-rc.8.
I confirm that it is related to #424, because also multiple styles aren't working.