Expected 'styles' to be an array of strings. Angular2

Question

I get such error

Uncaught Error: Expected 'styles' to be an array of strings.

Here is my code

styleUrls:[
    "../../styles/login.component.styles.scss"
],

When I have them declared in the same way but, the file with styles exist in the same directory as the component the problem does not occur.

How about styleUrls:[ require("../../styles/login.component.styles.scss") ]? — eko
– eko, Commented May 29, 2017 at 11:49
I really don't see why this doesn't work, I even tested it in an angular project and it worked. I suspect there is something else wrong. do you get any other error messages? do this error come up when you use ng serve or when you build for production? is this an angular cli generated project? did you eject to generate the webpack.config file? — Hamed Baatour
– Hamed Baatour, Commented May 29, 2017 at 11:51
When I start by npm start, project just do not start, and this error appear in console. I have only this error. — Stefan
– Stefan, Commented May 29, 2017 at 11:55
When i set it like that it's working styleUrls:[ "./login.component.styles.scss" ], — Stefan
– Stefan, Commented May 29, 2017 at 11:56

msanford · Accepted Answer · 2018-04-27 20:55:47Z

4

I filed an issue for this, which was triaged as workaround 2: non-obvious, priority: 2 (required), severity 3: broken.

I was struggling with something similar while porting an existing angular 2 beta-6 application to angular-cli 1.2.6; we use SCSS throughout.

Caveat: I do not know if the modifications I was required to make (outlined below) are artifacts from our legacy architecture, are limitations of the framework, or are something else, but they worked for me.

After much debugging and trying recommendations from various sources, I discovered that some webpack magic causes the compiled CSS resulting from a file reference in a @Component's styleUrl[] which is also in .angular-cli.json's styles[] array to be interpreted as {}. The expected output is a string representation of the compiled SCSS file as CSS.

This will then cause angular-compiler's assertArrayOfStrings() call to throw with none other than Expected '" + identifier + "' to be an array of strings.

I had to make the following changes to my application to get it to work:

Global stylesheet references that were app.component's styleUrls[] array must be moved to .angular-cli.json's app[0].styles[] array.
app.component's styleUrls[] array should be empty.
app.component's encapsulation: ViewEncapsulation.None meta-decorator can be removed.
Stylesheets which are referenced in .angular-cli.json's app[0].styles[] array must not be referenced in any Component's styleUrls[] decorator.

edited Apr 27, 2018 at 20:55

answered Aug 2, 2017 at 19:08

msanford

12.4k13 gold badges73 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

msanford Over a year ago

@TylerMerle Sweet! Sadly that bug is still open. Maybe I'll make it a hacktoberfest goal.

Collectives™ on Stack Overflow

Expected 'styles' to be an array of strings. Angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related