Cannot Resolve Angular4 & AngularCLI Uncaught Error: Expected 'styles' to be an array of strings

Question

I have been looking at every question related to this error but have yet to find a solution. I am using Angular(4) with angular-cli. I am running ng serve to run my application but I continue to see this error in my browser when loading my startup/index page:

After seeing this error, my css is actually working as expected, but I suppose the app is not recognizing that and is failing to compile. From what I understand, angular is not interpreting the reference to the css in my component correctly, but I have no idea why this is happening. Can anyone help/explain to me what this error is really saying and why it is occuring? Below is some helpful code in my project:

HomeComponent:

import { Directive, HostListener, Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'home',
    templateUrl: '../../../assets/build/index.html',
    styleUrls: ['../../../styles.css']
})
export class HomeComponent{
    title = 'Home';
}

angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
  "name": "anexinet.cxp.web"
 },
 "apps": [
   {
     "root": "src",
     "outDir": "dist",
     "assets": [
       "assets",
       "favicon.ico"
     ],
     "index": "./assets/build/index.html",
     "main": "main.ts",
     "polyfills": "polyfills.ts",
     "test": "test.ts",
     "tsconfig": "tsconfig.app.json",
     "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
     "styles": [
       "styles.css"
     ],
     "scripts": [
       "./assets/build/js/vendor/jquery-1.11.2.min.js",
       "./assets/build/js/plugins.js",
       "./assets/build/js/vendor/modernizr-2.8.3.min.js",
       "./assets/build/js/main.js"
     ],
     "environmentSource": "environments/environment.ts",
     "environments": {
       "dev": "environments/environment.ts",
       "prod": "environments/environment.prod.ts"
     }
   }
 ],
 "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
   {
     "project": "src/tsconfig.app.json",
     "exclude": "**/node_modules/**"
   },
   {
     "project": "src/tsconfig.spec.json",
     "exclude": "**/node_modules/**"
   },
   {
     "project": "e2e/tsconfig.e2e.json",
     "exclude": "**/node_modules/**"
   }
 ],
 "test": {
   "karma": {
     "config": "./karma.conf.js"
   }
 },
 "defaults": {
   "styleExt": "css",
   "class": {
     "spec": false
   },
   "component": {}
 }
}

EDIT

App Component:

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

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

styles.css:

/* You can add global styles to this file, and also import other style files */
@import url('./assets/build/css/main.css');

My main.css is a pretty long file and probably isn't needed unless some would find that helpful.

Answer 1

As I see, you have included styles.css in multiple places. Since you have referenced that file globally in .angular-cli.json, you don't need to duplicate it in individual components.

Try to comment out styleUrls: ['../../../styles.css'] and styleUrls: ['../styles.css'] in your HomeComponent and AppComponent. Or reference different files.