预期的“样式”是一个字符串数组。角2答案

【问题标题】：Expected 'styles' to be an array of strings. Angular2预期的“样式”是一个字符串数组。角2
【发布时间】：2017-05-29 11:46:09
【问题描述】：

我收到这样的错误

未捕获的错误：预期的“样式”是字符串数组。

这是我的代码

styleUrls:[
    "../../styles/login.component.styles.scss"
],

当我以相同的方式声明它们但具有样式的文件与组件存在于同一目录中时，不会出现问题。

【问题讨论】：

styleUrls:[ require("../../styles/login.component.styles.scss") ] 怎么样？
我得到 找不到模块“。”
我真的不明白为什么这不起作用，我什至在一个角度项目中对其进行了测试并且它起作用了。我怀疑还有其他问题。您是否收到任何其他错误消息？当您使用ng serve 或为生产构建时会出现此错误吗？这是一个角度cli生成的项目吗？你弹出来生成 webpack.config 文件了吗？
当我通过 npm start 启动时，项目只是没有启动，并且这个错误出现在控制台中。我只有这个错误。
当我设置它时它正在工作styleUrls:[ "./login.component.styles.scss" ],

标签： angular

【解决方案1】：

为此我filed an issue，被分类为workaround 2: non-obvious、priority: 2 (required)、severity 3: broken。

在将现有的 angular 2 beta-6 应用程序移植到 angular-cli 1.2.6 时，我遇到了类似的问题；我们始终使用 SCSS。

警告：我不知道我需要进行的修改（如下所述）是我们遗留架构的产物，是框架的限制，还是其他原因，但它们适用于我。

经过多次调试和尝试各种来源的建议后，我发现一些 webpack 魔法导致编译的 CSS 是由 @Component 的 styleUrl[] 中的文件引用产生的，这也在 @ 987654328@ 的styles[] 数组被解释为{}。预期的输出是已编译的 SCSS 文件的字符串表示形式为 CSS。

这将导致angular-compiler 的assertArrayOfStrings() 调用throw 而不是其他人Expected '" + identifier + "' to be an array of strings.

我必须对我的应用程序进行以下更改才能使其正常工作：

必须将 app.component 的 styleUrls[] 数组的全局样式表引用移动到 .angular-cli.json 的 app[0].styles[] 数组。
app.component 的 styleUrls[] 数组应该为空。
app.component 的 encapsulation: ViewEncapsulation.None 元装饰器可以被移除。
在.angular-cli.json 的app[0].styles[] 数组中引用的样式表不得在任何组件的styleUrls[] 装饰器中引用。

【讨论】：

#4 毁了我的一天。谢谢！
@TylerMerle 甜蜜！可悲的是，该错误仍然存在。也许我会把它作为hacktoberfest 的目标。