无法解决Angular4＆amp; AngularCLI未捕获错误：期望'styles'为字符串数组

Question

我一直在查看与此错误相关的每个问题，但尚未找到解决方案。我正在使用Angular（4）和angular-cli。我正在运行服务器来运行我的应用程序但是在加载我的启动/索引页面时我仍然在浏览器中看到此错误：

看到这个错误后，我的css实际上正在按预期工作，但我想应用程序无法识别并且无法编译。根据我的理解，angular不能正确解释我的组件中对css的引用，但我不知道为什么会发生这种情况。任何人都可以帮助/解释这个错误真正说的是什么以及它为什么会发生？以下是我项目中的一些有用的代码：

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';
}

角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": {}
 }
}

修改

应用组件：

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');

我的main.css是一个非常长的文件，除非有些人觉得有用，否则可能不需要。

Answer 1

如我所见，您已在多个地方加入了styles.css。由于您已在.angular-cli.json中全局引用该文件，因此您无需在单个组件中复制该文件。

尝试在HomeComponent和AppComponent中注释掉styleUrls: ['../../../styles.css']和styleUrls: ['../styles.css']。或者引用不同的文件。