AUSNAHME: Fehler: Uncaught (in Versprechen): Erwarteter 'Stile' ein Array von Strings sein

Question

Ich bin auf angular2 "2.0.0-rc.1" Arbeits Aber zoneJS folgt geben Fehler

Error: Uncaught (in promise): Expected 'styles' to be an array of strings. 
    at resolvePromise (zone.js:538) 
    at zone.js:515 
    at ZoneDelegate.invoke (zone.js:323) 
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (eval at <anonymous> (vendor.js:335), <anonymous>:45:41) 
    at ZoneDelegate.invoke (zone.js:322) 
    at Zone.run (zone.js:216) 
    at zone.js:571 
    at ZoneDelegate.invokeTask (zone.js:356) 
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (eval at <anonymous> (vendor.js:335), <anonymous>:36:41) 
    at ZoneDelegate.invokeTask (zone.js:355) 

Mein Code ist wie

let styles = require('./dashboard.css'); 
let template = require('./dashboard.html'); 
declare var zingchart:any; 

@Component({ 
    selector: 'dashboard', 
    directives: [ RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ], 
    template: template, 
    styles: [ styles ] 
}) 

Answer 1

folgt ich denke, dass Sie eine falsche Konfiguration des styles Attribut in einer Komponente hat. Dies sollte so etwas sein:

@Component({ 
    (...) 
    styles: [` 
    .card { 
     height: 70px; 
     width: 100px; 
    } 
    `] 
}) 

diesen Link finden Sie weitere Details:

• https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

bearbeiten

Wenn Sie CSS-Dateien die Verwendung enthalten folgende:

@Component({ 
    (...) 
    styleUrls: ['css/style.css'] 
}) 

Answer 2

Der Fehler ist ziemlich klar. Wenn Sie Ihre Komponente definieren, sollte die styles-Eigenschaft ein Array und keine Zeichenfolge sein.

Siehe doc: https://angular.io/docs/ts/latest/guide/component-styles.html

EDIT: Wenn Sie eine CSS-Datei verwenden möchten, sollten Sie die styleUrls Eigenschaft und zeigen Sie auf Ihre Datei verwenden.

Answer 3

Wenn Sie keinen Lader für Ihre CSS-Dateien definiert haben, erhalten Sie diesen Fehler. wenn
prüfen Sie haben ein Setup-Modul-Lader in der webpack-Konfiguration wie folgt aus:

loaders: [ 
    { 
    test: /\.css$/, 
    loader: 'raw' 
    } 
    // ... 
] 

Webpack keine Dateien auswählen, wenn kein Loader für CSS-Dateien gibt es und wird diesen Fehler erhöhen.
Wenn nicht bereits in Ihren Abhängigkeiten enthalten, müssen Sie den Raw-Loader zu Ihren Dev-Abhängigkeiten mit npm install --save-dev raw-loader hinzufügen. Wenn Sie statische CSS-Dateien verwenden und keine Verarbeitung benötigen, können Sie stattdessen styleUrls verwenden.
Um sass zu verwenden, müssen Sie auf diese Weise die Stile laden und den Loader raw!sass für /\.scss$/ verwenden.

Answer 4

Versuchen Sie Folgendes: Lassen Sie Styles = String (require ('./ dashboard.css'));

Es funktioniert für mich. Da Stile einen string [] benötigen, müssen Sie Stile nach String() analysieren.