Angular-cli: Variables in styleUrls not working

[DzmVasileusky]

🐞 Bug report

Command (mark with an x)

- [x] serve

Description

A clear and concise description of the problem...
Using variables in styleUrls array or setting styleUrls to an array variable isn't working.

🔬 Minimal Reproduction

Run

ng serve

Works fine:

@Component({
    selector: 'some-component',
    styleUrls: ['./some-component.less'],
    templateUrl: './some-component.pug'
})
export class SomeComponent {}

Not working if styleUrls set to a variable:

const pathes = ['./some-component.less'];

@Component({
    selector: 'some-component',
    styleUrls: pathes,
    templateUrl: './some-component.pug'
})
export class SomeComponent {}

Gives

GET http://localhost:8080/some-component.less 404 (Not Found)

Not working if some of style urls is a variable:

const path = './some-component.less';

@Component({
    selector: 'some-component',
    styleUrls: [path],
    templateUrl: './some-component.pug'
})
export class SomeComponent {}

Just don't apply styles to a component without any errors.

🌍 Your Environment

Angular CLI: 7.3.6
Node: 8.11.4
OS: darwin x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.6
@angular-devkit/build-optimizer   0.13.6
@angular-devkit/build-webpack     0.13.6
@angular-devkit/core              0.5.13
@angular-devkit/schematics        0.5.13
@angular/cdk                      7.3.5
@angular/cli                      7.3.6
@angular/material                 7.3.5
@ngtools/webpack                  7.3.6
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.4.0
typescript                        3.2.2
webpack                           4.29.0

[alan-agius4]

Hi, thanks for opening this issue, however at the moment this is not supported.

[DzmVasileusky]

Hi, thanks for opening this issue, however at the moment this is not supported.

Any explanation or workaround?

I'll explain why I need this feature.
Absolute urls won't be implemented for styleUrls as described in https://github.com/angular/angular/issues/4974
But It's really annoying to calculate and write long relative pathes to some shared rendered styles.
In my case it is

'../../../../../less/app/auth-forms.less'

It's just frustrating.
So I tried to calculate pathes with __dirname from Webpack.

const getRelativePath = (dirname: string, context: string = ''): string => {

    return dirname.replace(context, '').split('/').reduce((path: string) => {

        return path + '../';

    }, '');

};

const root = getRelativePath(__dirname, 'src/');

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'some-component',
    styleUrls: [`${root}less/app/auth-forms.less`],
    templateUrl: './some-component.pug'
})

[PogoniiA]

Any news on how to work this around?

[deebloo]

@DzmVasileusky this is because anything in an angular decorator is compiled at build time not at runtime. There is no current way to accomplish this.

[DzmVasileusky]

@DzmVasileusky this is because anything in an angular decorator is compiled at build time not at runtime. There is no current way to accomplish this.

Why not tying to resolve variables on compilation? __dirname is Webpack variable accessible while building I guess

[PogoniiA]

@DzmVasileusky I might have a solution.

`@Component({
selector: 'app-example',

templateUrl: './header.component.html',

styles: [require('./example.component.scss'), require('./example.component.'+ environment.variable +'.scss')]
})`

I am still testing it, but seems that it works.

[DzmVasileusky]

@PogoniiA
styleUrls are compiled with tree-shaking unlike styles.
I mean it won't create duplicates of same file styles listed in multiple components

[alan-agius4]

Duplicate of https://github.com/angular/angular-cli/issues/9237