"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[]

[michaelsanford]

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.

[filipesilva]

This is a bug, but a hard one to fix... it happens because we need to identify which files are loaded in one way, and which ones are loaded as a global style and which ones are a component file. We do that by file name. So something that's listed in both is bundled incorrectly.

[LATAEVIA]

Having this exact issue but my project is not SCSS based. Instead I'm using a path to the minified Bootstrap css file in node_modules. Removing redundancies works for me as well.

[AttilaSATAN]

Same issue with Clarity Design Systems' minifiedcss

      "styles": [
        "styles.css",
        "../node_modules/clarity-ui/clarity-ui.min.css"
      ],

@angular/cli: 1.4.2
node: 6.10.0
os: linux x64
@angular/animations: 4.4.1
@angular/common: 4.4.1
@angular/compiler: 4.4.1
@angular/core: 4.4.1
@angular/forms: 4.4.1
@angular/http: 4.4.1
@angular/platform-browser: 4.4.1
@angular/platform-browser-dynamic: 4.4.1
@angular/router: 4.4.1
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.1
@angular/language-service: 4.4.1
typescript: 2.3.4

Couldn't found a workaround either.

[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

[eavestn]

Any progress on this? It'd be great to see less as include-able in the @Compoenent of the TypeScript.

Also, shameless plug, scss/sass blow (in my opinion); less is fantastic. Is there any documentation as to why Angular 2/4 are supporting the former by default? I'd like to get on the scss/sass train.

[Maseeharazzack]

@flyher I am facing the same issue can you help me in resolving?

[micheltank]

This works for me with webpack

{
        test: /\.scss$/,
        use: [
          { 
            loader: "to-string-loader"  //
          }]
      }

[vsarathy]

@micheltank - Is there a way to configure this in webpack as part of angular-cli ??

[flyher]

@micheltank
The scss works well except less

@Maseeharazzack
Hi , you can paste your code here.