Angular 7 "expected 'styles' to be an array of strings"

Question

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

compiler.js:7992 Uncaught Error: Expected 'styles' to be an array of strings. at assertArrayOfStrings (compiler.js:7992) at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNonNormalizedDirectiveMetadata >>(compiler.js:17325) at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:17970) at compiler.js:17630 at Array.map () at >CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.j>s.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17630) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._loadModules (compiler.js:24899) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r._compileModuleAndComponents (compiler.js:24880) at >JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompile>r.compileModuleAsync (compiler.js:24840) at 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';
}

知道如何解决这个问题吗？这会阻止我加载 google

Answer 1

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

它应该是这样的：

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

我有同样的控制台错误，花了几天时间阅读 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 真正需要的相冲突。

Answer 6

在 webpack.config.js 中更改 scss loader 为我修复了它。它应该是这样的：

{
  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"

Angular 7 "expected 'styles' to be an array of strings"

Angular 7 "expected 'styles' to be an array of strings"

javascript

string

compiler-errors

angular

angular7