Javascript – Angular 7 “expected ‘styles’ to be an array of strings”

angularangular7compiler-errorsjavascriptstring

I am trying to run my server and have my app.component.html load on localhost:8000. Instead, I am receiving this error

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)

I tried messing around with the syntax and checked my angular.json file.

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

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

Any idea on how to solve this? This is blocking me from loading my google

Best Answer

Stylesheets which are referenced in your angular.json's styles[] cannot be referenced in a Component's styleUrls[] decorator.

Make sure that you are not referencing ./app.component.css in both files.

Related Solutions

Javascript – How to check if an array includes a value in JavaScript

Modern browsers have Array#includes, which does exactly that and is widely supported by everyone except IE:

console.log(['joe', 'jane', 'mary'].includes('jane')); //true

You can also use Array#indexOf, which is less direct, but doesn't require polyfills for outdated browsers.

console.log(['joe', 'jane', 'mary'].indexOf('jane') >= 0); //true

Many frameworks also offer similar methods:

jQuery: $.inArray(value, array, [fromIndex])
Underscore.js: _.contains(array, value) (also aliased as _.include and _.includes)
Dojo Toolkit: dojo.indexOf(array, value, [fromIndex, findLast])
Prototype: array.indexOf(value)
MooTools: array.indexOf(value)
MochiKit: findValue(array, value)
MS Ajax: array.indexOf(value)
Ext: Ext.Array.contains(array, value)
Lodash: _.includes(array, value, [from]) (is _.contains prior 4.0.0)
Ramda: R.includes(value, array)

Notice that some frameworks implement this as a function, while others add the function to the array prototype.

Javascript – How to append something to an array

Use the Array.prototype.push method to append values to the end of an array:

// initialize array
var arr = [
  "Hi",
  "Hello",
  "Bonjour"
];

// append new value to the array
arr.push("Hola");

console.log(arr);

You can use the push() function to append more than one value to an array in a single call:

// initialize array
var arr = ["Hi", "Hello", "Bonjour", "Hola"];

// append multiple values to the array
arr.push("Salut", "Hey");

// display all values
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Update

If you want to add the items of one array to another array, you can use firstArray.concat(secondArray):

var arr = [
  "apple",
  "banana",
  "cherry"
];

arr = arr.concat([
  "dragonfruit",
  "elderberry",
  "fig"
]);

console.log(arr);

Update

Just an addition to this answer if you want to prepend any value to the start of an array (i.e. first index) then you can use Array.prototype.unshift for this purpose.

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

It also supports appending multiple values at once just like push.

Update

Another way with ES6 syntax is to return a new array with the spread syntax. This leaves the original array unchanged, but returns a new array with new items appended, compliant with the spirit of functional programming.

const arr = [
  "Hi",
  "Hello",
  "Bonjour",
];

const newArr = [
  ...arr,
  "Salut",
];

console.log(newArr);

Best Answer

Related Solutions

Javascript – How to check if an array includes a value in JavaScript

Javascript – How to append something to an array

Related Topic