Angular 7 “expected 'styles' to be an array of strings”

Question

I am trying to run my server and have my app.component.html load on localhost:8000. Instead, I am receiving this error

compiler.js:7992 Uncaught Error

Answer 1

I had the same console error, spent a few days reading every hit on Google...

Solved!

The story: I had to add functionality to an existing Angular project. When I performed git clone, ng serve, open browser -> error assert....

I decided to upgrade to Angular 8 and see if the problem goes away, and it didn't. Eventually, I created a new Angular 8 app using "ng new ..."

Compared package.json and angular.json of both existing and new project. I found out, the brand new Angular app, had no loader packages In package.json, while the existing did have. Also the existing project was specifying a webpack devDependancy, i removed all loaders, and webpack, deleted package-lock.json and node_modules folder -> npm install.

Solved. I guess there is some bit of code that was being forced to a specific version, conflicting with what Angular really needs.

Answer 2

It sounds to me that you are missing the square brackets around your styles.scss file reference in you angular.json file.

It should look like this:

"styles": [
    "src/styles.scss"
],

Answer 3

I got this as well in the process of upgrading to Angular 7 and upgrading various dependencies to their latest versions. I found that using raw-loader version 2.0.0 was causing this error even though my styleUrls were correct syntax. Downgrading to raw-loader version 1.0.0 resolved this issue. I don't know if this helps in your situation.

Answer 4

changing scss loader in webpack.config.js fixed it for me. It should look like this:

{
  test: /\.scss$/,
  exclude: [/node_modules/, /\.global\.scss$/],
  use: ["to-string-loader", "css-loader", "sass-loader"]
}

and in package json:

"to-string-loader": "^1.1.6",
"css-loader": "^3.4.2",
"sass-loader": "^8.0.2"

Answer 5

Stylesheets which are referenced in your angular.json's styles[] cannot be referenced in a Component's styleUrls[] decorator.

Make sure that you are not referencing ./app.component.css in both files.

Answer 6

In my case, it happened because in the multi-repo project the incorrect loader has been used during the Angular build process (raw-loader@2), so I had to add the correct loader to Angular project dependencies:

devDependencies: {
    ...
    raw-loader: "^1.0.0"
}