CODEWITHSUNDEEP
angular
Stefan
Stefan

Reputation: 1511

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

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.

Upvotes: 2

Views: 3876

Answers (1)

msanford
msanford

Reputation: 12229

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:

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

Upvotes: 4

Related Questions