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.