Kann Angular4 & AngularCLI nicht auflösen Fehler: Erwartete 'Stile' als Array von Strings

Question

Ich habe mir jede Frage zu diesem Fehler angesehen, habe aber noch keine Lösung gefunden. Ich benutze Angular (4) mit eckigen Cliquen. Ich betreiben ng diene meine Anwendung laufen, aber ich weiterhin diesen Fehler in meinem Browser, um zu sehen, wenn mein Starts/Index-Seite geladen wird:

Nach diesem Fehler zu sehen, meine CSS ist tatsächlich wie erwartet funktioniert, aber Ich nehme an, die App erkennt das nicht und kompiliert nicht. Soweit ich verstehe, interpretiert angular den Bezug auf das CSS in meiner Komponente nicht richtig, aber ich habe keine Ahnung, warum dies geschieht. Kann mir jemand helfen/erklären, was dieser Fehler wirklich sagt und warum er auftritt? Im Folgenden finden Sie einige hilfreiche Code in meinem Projekt:

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

Winkel 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 Komponente:

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

Mein main.css ist eine ziemlich lange Datei- und wahrscheinlich ist nicht erforderlich, es sei denn einige, die hilfreich finden würde.

Answer 1

Wie ich sehe, haben Sie styles.css an mehreren Stellen enthalten. Da Sie diese Datei global in .angular-cli.json referenziert haben, müssen Sie sie nicht in einzelnen Komponenten duplizieren.

Versuchen Sie, styleUrls: ['../../../styles.css'] und styleUrls: ['../styles.css'] in Ihrer HomeComponent und AppComponent auskommentieren. Oder referenzieren Sie verschiedene Dateien.