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: Expected 'styles' to be an array of strings. at assertArrayOfStrings (compiler.js:7992) at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNonNormalizedDirectiveMetadata >>(compiler.js:17325) at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:17970) at compiler.js:17630 at Array.map () at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17630) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._loadModules (compiler.js:24899) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._compileModuleAndComponents (compiler.js:24880) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r.compileModuleAsync (compiler.js:24840) at CompilerImpl.push../node_modules/@angular/platform-browser->dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync >>(platform-browser-dynamic.js:143)

I tried messing around with the syntax and checked my angular.json file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'public';
}

Any idea on how to solve this? This is blocking me from loading my google

Answer 1

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 2

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 3

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"
}

Answer 4

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 5

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 6

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"
],