例外：错误：未捕获（承诺）：预期“样式”是字符串数组

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

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

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

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

Answer 2

试试这个： 让样式 = String(require('./dashboard.css'));

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

Answer 3

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

查看文档：https://angular.io/docs/ts/latest/guide/component-styles.html

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

Answer 4

我认为您对组件中的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']
})