Angular-cli: "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.

[maxmumford]

Not sure if this is the best place to put this, but a note for anybody googling for this issue: you'll also get this error message if you use uppercase file extensions for scss files in your component decorator, eg:

styleUrls: ['./test.component.SCSS']

Make sure "styleExt" in your angular-cli.json file is exactly "scss" and that all scss files have lowercase extensions.

[micheltank]

@flyher
Yeah, for .less I use "less-loader".

@vsarathy
In the angular-cli just put your .less file here:

"apps": [ { "styles": [ "file.less" ] }

[flyher]

Hi all, it seems that the lastest version have fix this bug!

@michaelsanford
@hansl
@filipesilva
I think you can close this issue.
And could you tell us how did you solve this problem?

[michaelsanford]

@flyher Which is "the latest version" _exactly_ that you're using (for those of us that come back to this issue much later).

Thanks!

[jaganchoccy]

Hi guys,
iam facing same issue,

ERROR: Expected 'styles' to be an array of strings.

solved 😀

In your TS file:

import 'jsrender';

import '../../scripts/jquery.easing.min';

import '../../scripts/ej.dashboardViewer.all.min';

import '../../themes/default-theme/ej.dashboardViewer.all.css'; // declare your css file here

declare var $:any;

@Component({

selector: 'app-root',
templateUrl: './dashboard.component.html',
styleUrls:['../../themes/default-theme/ej.dashboardViewer.all.css'] // remove this
})

and run ng serve (if u still facing the same issue) and run ng --port 5500

this will solved the issue.

[manojadams]

I was facing this similar problem and fixed it by importing the css file in component css file(e.g-> dashboard.component.css) like this:

@import '~bootstrap/dist/css/bootstrap.min.css'; // this is included under node modules directory

And including the component css file in styleUrls section of the component:
styleUrls:['./dashboard.component.css']

[mgechev]

Can you still reproduce the issue?

[michaelsanford]

Hi @mgechev, thanks for following up.

An issue still exists in angular/core 7.1.3

I just tested by choosing an scss file referenced in angular.json's projects.Main.architect.build.options.styles[] and adding a reference to it in my AppComponent's styleUrls[].

When building with ng build --prod --named-chunks --source-map I get this error:

ERROR in Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'replace' of undefined
    at normalizeBackSlashDirection (C:\Users\michael\Main\app\FD\src\ui\node_modules\webpack\lib\RequestShortener.js:16:17)
    at new RequestShortener (C:\Users\michael\Main\app\FD\src\ui\node_modules\webpack\lib\RequestShortener.js:26:15)
    at new Compiler (C:\Users\michael\Main\app\FD\src\ui\node_modules\webpack\lib\Compiler.js:184:27)
    at Compiler.createChildCompiler (C:\Users\michael\Main\app\FD\src\ui\node_modules\webpack\lib\Compiler.js:430:25)
    at Compilation.createChildCompiler (C:\Users\michael\Main\app\FD\src\ui\node_modules\webpack\lib\Compilation.js:2481:24)
    at Object.pitch (C:\Users\michael\Main\app\FD\src\ui\node_modules\mini-css-extract-plugin\dist\loader.js:70:43)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! `ng build --prod --named-chunks --source-map`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the qa script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\michael\AppData\Roaming\npm-cache\_logs\2018-12-19T19_10_51_516Z-debug.log

(For clarity, this application called "Main" is a multi-module JBoss behemoth. There is a singular multi-module Angular application code all resides within FD\. The Angular application repeats the name of the whole project.)

Further details:

λ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.3
Node: 11.2.0
OS: win32 x64
Angular: 7.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.1
@angular-devkit/build-angular     0.11.1
@angular-devkit/build-optimizer   0.11.1
@angular-devkit/build-webpack     0.11.1
@angular-devkit/core              7.1.1
@angular-devkit/schematics        7.1.1
@angular/cdk                      7.1.1
@angular/pwa                      0.11.1
@ngtools/webpack                  7.1.1
@schematics/angular               7.1.1
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

[mgechev]

Thanks for the follow up! Looks like we don't have many occurrences of the problem so we might not be able to prioritize it for the next sprint but we'll keep it open so we can fix it as soon as possible.

[michaelsanford]

@mgechev Quite understandable.

Frankly, the fix developer-side was simple: we just organised our scss so that we never repeated global stylesheet references in components (which is probably just good practice anyway).

Others on this thread may have different problem cases.

[dragonbane0]

I have this issue specifically after attempting to implement ShadowDom as the View Encapsulation strategy. I have my Angular app embedded right now in a page with some legacy HTML code. However some global stylesheets from the legacy code affect the Angular app and vice versa, which I tried to solve by putting my root Angular component in a ShadowDom. In this case I don't know what the best strategy is to import global stylesheets like a 3rd party font into the ShadowDom, I used styleUrls in the respective component and that seems to work fine.

The problem here is which other people also seem to experience a lot is that a lot of these libraries like font-awesome only work properly with ShadowDoms when imported both in the ShadowDom and the root document. And if I want to do that by using styles in the Angular.json I get the aforementioned error, because I can't import the same scss file twice (in the Angular.json and the root component with styleUrls). It seems to work fine if I import these stylesheets in my index.html and host them on my server, but that doesnt seem very optimal.

[jlowcs]

This error could be caused by a improper (ie too new) version of raw-loader.

Setting it to 1.0.0 fixed the issue in my project.

[sri037]

I was facing same issue in ionic project, make sure you import the scss file in global.scss file.
for angular you need to import a scss file in app.scss
global.scss file
@import 'app/components/ui-components/ui-components.page';
angular.json
"styles": [ { "input": "src/theme/variables.scss" }, { "input": "src/global.scss" }, { "input": "src/app/app.scss" } ]

[webia1]

Quick and dirty fix:

Example (app/components/dasboard.component):
-> Expected 'styles' to be an array of strings

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['../../../styles.scss']
})
export class DashboardComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Fixed Version

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

const styles = '../../../styles.scss';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [styles]
})
export class DashboardComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

[kelian9]

@webia1
It really works, but could you tell me why?
'something' is also a string type, it is the same as string value of variable const something = 'something';,
So I can’t understand why there is an error in the first case

Quick and dirty fix:

Example (app/components/dasboard.component): -> Expected 'styles' to be an array of strings

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['../../../styles.scss']
})
export class DashboardComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Fixed Version

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

const styles = '../../../styles.scss';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [styles]
})
export class DashboardComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

[clydin]

Is '../../../styles.scss' the global style sheet for the application? If so, that file should not be used as a component style. They exist in completely separate contexts. Global stylesheets are extracted from the application bundle which is why it doesn't work. The _fixed_ version is essentially hiding the stylesheet from the static analyzer and causing the stylesheet to be added to the application twice (or more depending on how many components are using the global stylesheet). Global stylesheets tend to be quite large and this duplication can cause a large increase in the overall size of the application.

[BerQin]

Has this problem been solved?Angualr8.2.0 has a similar problem

[ishaniDolawatta]

* Quick Fix*

I was facing the same issue in Angular 8 Project. I used @webia1 's solution but it caused the new error call,
Uncaught Error: The template specified for component AppComponent is not a string

I'm using the latest Angular versions as below👇

"@angular-devkit/core": "^8.2.1", "@angular/animations": "8.2.1", "@angular/cdk": "8.1.2", "@angular/common": "8.2.1", "@angular/compiler": "8.2.1", "@angular/core": "8.2.1",

After so many investigations, I assume that this error may be caused by raw-loaderor less loder.

, therefore, I downgraded both raw-loaderand less loder versions.

[arekgotfryd]

@ishaniDolawatta Which version of raw-loader are you using?

[alan-agius4]

This should have been solved in 8.3

Can someone confirm if this Is still reproducible?

[ishaniDolawatta]

@ishaniDolawatta Which version of raw-loader are you using?

@arekgofi I'm using ,
raw-loader: 1.0.0 with angular 8.2.1

[marcelriegr]

This should have been solved in 8.3

Can someone confirm if this Is still reproducible?

It's still reproducible on angular 8.2.4

[rainmak33r]

* Quick Fix*

I was facing the same issue in Angular 8 Project. I used @webia1 's solution but it caused the new error call,
Uncaught Error: The template specified for component AppComponent is not a string

I'm using the latest Angular versions as below

"@angular-devkit/core": "^8.2.1", "@angular/animations": "8.2.1", "@angular/cdk": "8.1.2", "@angular/common": "8.2.1", "@angular/compiler": "8.2.1", "@angular/core": "8.2.1",

After so many investigations, I assume that this error may be caused by raw-loaderor less loder.

, therefore, I downgraded both raw-loaderand less loder versions.

thank you, after investigation I found that raw-loader 3.*.* was used in "@angular-devkit/build-angular": "~0.803.3", so after I downgraded that to ~0.802.2 everything worked like a charm.

[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

[KingDarBoja]

@filipesilva I got the same error today while using 8.2.10 version in a custom webpack configuration for production, which makes use of the AngularCompilerPlugin to enable AOT.

Also, even if I managed to make the project work with JIT, as soon as I use the @ngtools/webpack to handle my typescript files plus the AngularCompilerPlugin, Webpack bundles the project but I do get a black screen while trying to load by using webpack-dev-server.

Any insight of what is happening? Should I open a new issue to provide more info of my project?

Cheers!

[filipesilva]

@KingDarBoja what you're describing seems to be a different problem than the one on this issue. The best way to report it would be to open a new issue with a reproduction so that we can look at it.

[KingDarBoja]

@KingDarBoja what you're describing seems to be a different problem than the one on this issue. The best way to report it would be to open a new issue with a reproduction so that we can look at it.

Sure, but just to address something related to this issue, I got the same "Expected 'styles' to be an array of strings." error while using [email protected].

The proper fix I found was described at this comment made by myself, on the EDIT N°2 item.

Hope it helps.