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

Question

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

could you show whats the code ? – Nishant Singh May 12 '16 at 15:09 — Nishant Singh, May 12 '16 at 15:09

score 5 · Answer 1 · answered Jun 10 '16 at 14:53

5

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

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

answered Jun 10 '16 at 14:53

Kristelle

51
1

Thierry Templier · Answer 2 · 2016-05-12T15:29:15.833

4

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

edited May 12 '16 at 15:29

answered May 12 '16 at 15:10

Thierry Templier

198,364
44
396
360

`require` loads a module or a JSON file. It's not the case for a CSS file. It won't get a string but an object... – Thierry Templier May 12 '16 at 15:30
In your case, I think the `styleUrls` attribute is what you're looking for... I updated my answer. – Thierry Templier May 12 '16 at 15:30

Jean-Philippe Leclerc · Answer 3 · 2016-05-12T15:31:07.987

2

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.

edited May 12 '16 at 15:31

answered May 12 '16 at 15:11

Jean-Philippe Leclerc

6,713
5
43
66

But I'm doing the same thing. – Akhilesh Kumar May 12 '16 at 15:20
No my friend, we can assign it using variable in style – Akhilesh Kumar May 12 '16 at 15:30
You can do what you want but `styleUrls` is the correct way to do it. – Jean-Philippe Leclerc May 12 '16 at 15:32
Yes, you are right friend that is working but why not this. – Akhilesh Kumar May 12 '16 at 15:35

Rainer Jung · Answer 4 · 2017-07-07T07:40:12.087

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$/.

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

4 Answers4

Linked