EXCEPTION: Error: Uncaught (in promise): Expected 'styles' to be an array of strings

问题

I'm working on angular2 "2.0.0-rc.1" But zoneJS is giving following error

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)

My code is as follows

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 ]
})

回答1:

Try this: let styles = String(require('./dashboard.css'));

It work for me. Since styles required a string[], parse styles to String().

回答2:

I think that you did a wrong configuration of the styles attribute in a component. This should be something like that:

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

See this link for more details:

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

Edit

If you want to include CSS files use the following:

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

回答3:

The error is pretty clear. When you define your component, the styles property should be an array and not a string.

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

EDIT: If you want to use a .css file you should use the styleUrls property and point to your file.

回答4:

When you do not have a loader defined for your css-files you end up with this error.
Check if you have setup a module-loader in the webpack-configuration like this:

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

Webpack will not pick files if there's no loader for css-files and will raise this error.
If not already included in your dependencies you need to add the raw-loader to your dev-dependencies with npm install --save-dev raw-loader. If you use static css files and don't need any processing of course you can use styleUrls instead.
To use sass you will need to use this way to load the styles, and can use the loader raw!sass for /\.scss$/.

来源：https://stackoverflow.com/questions/37190891/exception-error-uncaught-in-promise-expected-styles-to-be-an-array-of-str

标签

angular

zone

zonejs