"Expected 'styles' to be an array of strings." when a stylesheet is referenced in a Component's styleUrls[] and .angular-cli.json's app[0].styles[]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

λ ng --version && node -v && npm -v                         
    _                      _                 ____ _     ___ 
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/                                        
@angular/cli: 1.2.6                                         
node: 8.1.2                                                 
os: win32 x64                                               
@angular/animations: 4.3.2                                  
@angular/common: 4.3.2                                      
@angular/compiler: 4.3.2                                    
@angular/core: 4.3.2                                        
@angular/forms: 4.3.2                                       
@angular/http: 4.3.2                                        
@angular/platform-browser: 4.3.2                            
@angular/platform-browser-dynamic: 4.3.2                    
@angular/router: 4.3.2                                      
@angular/cli: 1.2.6                                         
@angular/compiler-cli: 4.3.2                                
@angular/language-service: 4.3.2                            
v8.1.2
5.3.0

Repro steps.

With an SCSS-based project, include a SCSS stylesheet file reference in both a @Component decorator’s styleUrls[] array and .angular-cli.json’s app[0].styles[] array.

Trivial example:

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <router-outlet></router-outlet>
    <message-banner *ngIf="showMessage" [messageContainer]="messageContainer"></message-banner>
  `,
  styleUrls: ["./assets/scss/my/styles.scss"],
  providers: [AuthenticationService, AuthenticationGuard, MessagingService]
})

concurrently with

.angular-cli.json

"styles": [
  "./../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./../node_modules/font-awesome/scss/font-awesome.scss",
  "./assets/scss/my/loadingPage.scss",
  "./assets/scss/my/styles.scss"
],

The log given by the failure.

Uncaught Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (compiler.es5.js:3920)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15174)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:15891)
    at compiler.es5.js:15473
    at Array.map (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15473)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26799)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26772)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26701)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)

Breaking at compiler.es5.js#assertArrayOfStrings() shows the errant entry in values[] is {}, along with the other stringified styles.

When the duplicate reference is removed from all Component decorators, it appears to work as expected.

Desired functionality.

Any of:

• That the redundant style would fall out of the tree when shaken and would not produce an error, or
• A more informative error message in the console (though looking at compiler.es5.ts#assertArrayOfStrings the cause may be exceedingly difficult to ascertain), or
• Better documentation on global styling indicating allowed values, caveats and restrictions. (I’d be happy to submit a PR for that).

Mention any other details that might be useful.

This application structure exists because we are porting an old angular 2 beta-6 application built with gulp to angular 4.3.2 built with ng.

While these errors are almost certainly artifacts of legacy practices, I found it exceedingly difficult to isolate the cause. While ng itself may mitigate a large portion of the instances of this issue, it remains an often-cited error message on SO, each with a different cause.

[flyher]

i npm run build success, but it show the same error in console

compiler.es5.js:3936 Uncaught Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (compiler.es5.js:3936)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15329)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:16047)
    at compiler.es5.js:15629
    at Array.map (<anonymous>)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15629)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26958)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)
    at PlatformRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)

It happend when import less file in component ,

import { Component } from '@angular/core';
import { Links, Header } from '../../model/header.model';

const HEADER: Header = {
  id: 1,
  title: 'Test Page',
  logo: './',
  friendlinks: [
    {
      id: 1,
      key: 'home',
      value: 'Home',
      url: '/home',
      selected: true
    }, {
      id: 2,
      key: 'newfeatures',
      value: 'New features',
      url: '/newfeatures',
      selected: false
    }
  ]
}
@Component({
  selector: 'component-friend-link',
  templateUrl: './friend-link.component.html',
  styleUrls: ['./friend-link.component.less']
})
export class FriendLinkComponent {
  header = HEADER;
}

The temporary solution is import the scss/less replace import in styleUrls,or import css file in styleUrls

import { Component } from '@angular/core';
import { Links, Header } from '../../model/header.model';
import './friend-link.component.less';

const HEADER: Header = {
  id: 1,
  title: 'Test Page',
  logo: './',
  friendlinks: [
    {
      id: 1,
      key: 'home',
      value: 'Home',
      url: '/home',
      selected: true
    }, {
      id: 2,
      key: 'newfeatures',
      value: 'New features',
      url: '/newfeatures',
      selected: false
    }
  ]
}
@Component({
  selector: 'component-friend-link',
  templateUrl: './friend-link.component.html'
})
export class FriendLinkComponent {
  header = HEADER;
}

or

import { Component } from '@angular/core';
import { Links, Header } from '../../model/header.model';

const HEADER: Header = {
  id: 1,
  title: 'Test Page',
  logo: './',
  friendlinks: [
    {
      id: 1,
      key: 'home',
      value: 'Home',
      url: '/home',
      selected: true
    }, {
      id: 2,
      key: 'newfeatures',
      value: 'New features',
      url: '/newfeatures',
      selected: false
    }
  ]
}
@Component({
  selector: 'component-friend-link',
  templateUrl: './friend-link.component.html',
  styleUrls: ['./friend-link.component.css']
})
export class FriendLinkComponent {
  header = HEADER;
}

update:2017-12-19 You can read the code here

[filipesilva]

In a ~9.0.0-next.5 CLI app, using the following config:

            "styles": [
              "src/styles.css",
              "src/app/app.component.css"
            ],

I see this error on build:

$ ng build

chunk {main} main-es2015.js, main-es2015.js.map (main) 623 bytes [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 678 bytes [initial] [rendered]
chunk {polyfills-es5} polyfills-es5-es2015.js, polyfills-es5-es2015.js.map (polyfills-es5) 441 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 11.9 kB [initial] [rendered]
Date: 2019-10-01T15:54:15.339Z - Hash: 0a7ddf4facb6e510b294 - Time: 5574ms

ERROR in document is not defined