Angular 7“预期'样式'是一个字符串数组”答案

【问题标题】：Angular 7 "expected 'styles' to be an array of strings"Angular 7“预期'样式'是一个字符串数组”
【发布时间】：2019-06-03 08:42:15
【问题描述】：

我正在尝试运行我的服务器并在 localhost:8000 上加载我的 app.component.html。相反，我收到此错误

compiler.js:7992 未捕获的错误：预期的“样式”是字符串数组。在 assertArrayOfStrings (compiler.js:7992) 在 >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNonNormalizedDirectiveMetadata >>(compiler.js:17325) 在 >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:17970) 在 compiler.js:17630 在 Array.map() 在 >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17630) 在 >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._loadModules (compiler.js:24899) 在 >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._compileModuleAndComponents (compiler.js:24880) 在 >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r.compileModuleAsync (compiler.js:24840) 在 CompilerImpl.push../node_modules/@angular/platform-browser->dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync >>(platform-browser-dynamic.js:143)

我尝试弄乱语法并检查了我的 angular.json 文件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'public';
}

关于如何解决这个问题的任何想法？这阻止我加载我的谷歌

【问题讨论】：

您能说明您在主应用模块中包含哪些模块吗？

标签： javascript angular string compiler-errors angular7

【解决方案1】：

更改 webpack.config.js 中的 scss 加载程序为我修复了它。它应该是这样的：

{
  test: /\.scss$/,
  exclude: [/node_modules/, /\.global\.scss$/],
  use: ["to-string-loader", "css-loader", "sass-loader"]
}

并在 json 包中：

"to-string-loader": "^1.1.6",
"css-loader": "^3.4.2",
"sass-loader": "^8.0.2"

【讨论】：

【解决方案2】：

我遇到了同样的控制台错误，我花了几天时间阅读 Google 上的每一次点击...

解决了！

故事：我必须向现有的 Angular 项目添加功能。当我执行 git clone, ng serve, open browser -> error assert....

我决定升级到 Angular 8，看看问题是否会消失，但事实并非如此。最终，我使用“ng new ...”创建了一个新的 Angular 8 应用程序

比较现有项目和新项目的 package.json 和 angular.json。我发现，全新的 Angular 应用程序在 package.json 中没有 loader 包，而现有的确实有。现有项目还指定了 webpack devDependancy，我删除了所有加载器和 webpack，删除了 package-lock.json 和 node_modules 文件夹 -> npm install。

解决了。我猜有一些代码被强制转换为特定版本，与 Angular 真正需要的相冲突。

【讨论】：

【解决方案3】：

在我的例子中，发生这种情况是因为在多 repo 项目中，在 Angular 构建过程中使用了不正确的加载器 (raw-loader@2)，所以我必须将正确的加载器添加到 Angular 项目依赖项中：

devDependencies: {
    ...
    raw-loader: "^1.0.0"
}

【讨论】：

【解决方案4】：

我在升级到 Angular 7 并将各种依赖项升级到最新版本的过程中也得到了这个。我发现使用 raw-loader 版本 2.0.0 会导致此错误，即使我的 styleUrls 语法正确。降级到 raw-loader 版本 1.0.0 解决了这个问题。我不知道这对您的情况是否有帮助。

【讨论】：

它确实回答了这个问题。问题是Any idea how to solve this?，这是一个关于它的想法，它实际上帮助了我，因为它也是由于更新了我的依赖关系。
这解决了我的问题，但是您如何确定原始加载程序版本会导致此问题？
我在尝试将许多依赖项升级到最新版本时遇到了问题。起初，错误消息毫无意义，在搜索 SO 解决方案无济于事后，我返回并一次升级一个（或几个）依赖项，直到出现错误，来回切换直到我将其缩小到完全这个库。
这仍然是问题，感谢您提供解决方案...降级版本对我有用！
这解决了我在升级 ng5 -> ng8 时遇到的问题。我的 raw-loader 是 v4.0.0。我降级到 v1.0.0。我担心返回 3 个主要版本会错过功能。有人愿意发表评论吗？

【解决方案5】：

在angular.json 的styles[] 中引用的样式表不能在组件的styleUrls[] 装饰器中引用。

确保您没有在两个文件中引用./app.component.css。

【讨论】：

这对我有用。不应在组件的 styleUrls [] 中复制 angular.json 中的样式表。如果重复，捆绑将无法正常工作。

【解决方案6】：

在我看来，您在 angular.json 文件中缺少样式.scss 文件引用周围的方括号。

应该是这样的：

"styles": [
    "src/styles.scss"
],

【讨论】：