Question

我正在研究angular2“2.0.0-rc.1” 但是zoneJS给出了以下错误

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)

我的代码如下

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

试试这个： let styles = String（require（＆＃39; ./ dashboard.css＆＃39;））;

它对我有用。由于样式需要字符串[]，因此将样式解析为String（）。

Answer 2

我认为您对组件中的styles属性进行了错误的配置。这应该是这样的：

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

有关详细信息，请参阅此链接：

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

修改

如果要包含CSS文件，请使用以下命令：

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

Answer 3

错误很清楚。定义组件时，styles属性应该是数组而不是字符串。

请参阅文档：https://angular.io/docs/ts/latest/guide/component-styles.html

编辑：如果你想使用.css文件，你应该使用styleUrls属性并指向你的文件。

Answer 4

如果没有为css文件定义加载程序，则最终会出现此错误检查您是否在webpack-configuration中设置了模块加载器，如下所示：

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

如果css文件没有加载程序，Webpack将不会选择文件，并且会引发此错误。
如果尚未包含在依赖项中，则需要使用npm install --save-dev raw-loader将raw-loader添加到dev-dependencies。如果您使用静态CSS文件并且当然不需要任何处理，则可以使用styleUrls代替。要使用sass，您需要使用这种方式加载样式，并可以使用加载程序raw!sass作为/\.scss$/。

EXCEPTION：错误：未捕获（在承诺中）：期望的'styles'是一个字符串数组

4 个答案: