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

Question

I migrated the old angular project to angular

When run the project is compiling successfully but in the console it's showing below error.

Uncaught Error: Expected 'styles' to be an array of strings. at assertArrayOfStrings (compiler.js:2181) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10373) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata

Angular.json

"styles": [
    {
    "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
    },
    "src/styles.css"
],
"scripts": [],

Component.ts

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

Where i am doing wrong.

You need to pass array of strings to styles, and also styles doesn't support file urls. — Bharathkumar kamal
– Bharathkumar kamal, Commented Sep 3, 2019 at 8:16

mbojko · Accepted Answer · 2019-09-03 08:15:36Z

1

Well, it's exactly what it says on the tin: styles should be an array of strings. Instead of

    {
    "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
    },
    "src/styles.css"

do

    "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"

answered Sep 3, 2019 at 8:15

mbojko

14.8k2 gold badges20 silver badges28 bronze badges

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

7 Comments

Mohammad Fareed Over a year ago

No, still getting the same issue.

mbojko Over a year ago

Did you restart ng serve?

Mohammad Fareed Over a year ago

Yes, i did still getting the same issue

mbojko Over a year ago

And did you fix all styles entries? You can have more than one in the angular.json

Mohammad Fareed Over a year ago

i have only single angular.json

|

Adrita Sharma · Accepted Answer · 2019-09-03 08:23:03Z

0

In the styles array, you have array of objects with key "input",

It should be a simple array of strings

Try like this:

"styles": [
   "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.css"
 ],
 "scripts": [],

and prefix the file names with ./ incomponent decorator like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

edited Sep 3, 2019 at 8:23

answered Sep 3, 2019 at 8:16

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related