Question

我正在尝试运行服务器，并在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）在compile.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';
}

关于如何解决此问题的任何想法？这阻止了我加载Google

Answer 1

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

Answer 2

在您的angular.json的{{1}}中引用的

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

确保两个文件中都没有引用styleUrls[]。

Answer 3

我遇到了相同的控制台错误，花了几天时间阅读Google上的所有匹配内容...

解决了！

故事：我必须向现有的Angular项目添加功能。当我执行git clone，ng服务时，打开浏览器->错误声明。...

我决定升级到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 4

在我的情况下，这是因为在multi-repo项目中，在Angular构建过程中使用了错误的加载器（raw-loader@2），所以我不得不将正确的加载器添加到Angular项目依赖项中：

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

Answer 5

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

Answer 6

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

它应该像这样：

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

Angular 7“期望'样式'为字符串数组”

6 个答案: