"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[] #7245
Comments
Brocco
added
P3
|
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. |
filipesilva
added
freq1: low
|
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. |
|
Same issue with Clarity Design Systems' minified "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.4Couldn't found a workaround either. |
|
i 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 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 { 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 |
|
Any progress on this? It'd be great to see 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. |
|
@flyher I am facing the same issue can you help me in resolving? |
|
This works for me with webpack |
|
@micheltank - Is there a way to configure this in webpack as part of angular-cli ?? |
|
@micheltank @Maseeharazzack |
|
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: Make sure "styleExt" in your angular-cli.json file is exactly "scss" and that all scss files have lowercase extensions. |
|
Hi all, it seems that the lastest version have fix this bug! @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! |
|
Hi guys, 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; selector: 'app-root', and run ng serve (if u still facing the same issue) and run ng --port 5500 this will solved the issue. |
|
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: |
|
Can you still reproduce the issue? |
|
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 When building with (For clarity, this application called "Main" is a multi-module JBoss behemoth. There is a singular multi-module Angular application code all resides within Further details: |
|
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. |
|
@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. |
|
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. |
|
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. |
|
I was facing same issue in ionic project, make sure you import the scss file in global.scss file. |
|
Quick and dirty fix: Example (app/components/dasboard.component): 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() {
}
} |
|
@webia1
|
|
Is |
|
Has this problem been solved?Angualr8.2.0 has a similar problem |
|
** Quick Fix** I was facing the same issue in Angular 8 Project. I used @webia1 's solution but it caused the new error call, I'm using the latest Angular versions as below👇
After so many investigations, I assume that this error may be caused by , therefore, I downgraded both |
|
@ishaniDolawatta Which version of raw-loader are you using? |
|
This should have been solved in 8.3 Can someone confirm if this Is still reproducible? |
@arekgofi I'm using , |
It's still reproducible on angular |
thank you, after investigation I found that |
filipesilva
added
area: devkit/build-angular
and removed
P3
|
In a I see this error on build: |
|
@filipesilva I got the same error today while using Also, even if I managed to make the project work with JIT, as soon as I use the Any insight of what is happening? Should I open a new issue to provide more info of my project? Cheers! |
|
@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 The proper fix I found was described at this comment made by myself, on the EDIT N°2 item. Hope it helps. |
…al styles using file query instead of filename Previously, we introduced the `ngResource` query to Angular component resources we now use it with `resourceQuery` to differentiate between global and components styles, since in some cases while unlikely a file can be used as a component and global style. Closes #7245
|
This change seems to break importing of less files in typescriptfiles import example from './my-styles.less';Is there any workaround? |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
Bug Report or Feature Request (mark with an
x)Versions.
Repro steps.
With an SCSS-based project, include a SCSS stylesheet file reference in both a
@Componentdecorator'sstyleUrls[]array and.angular-cli.json'sapp[0].styles[]array.Trivial example:
app.component.ts
concurrently with
.angular-cli.json
The log given by the failure.
Breaking at
compiler.es5.js#assertArrayOfStrings()shows the errant entry invalues[]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:
compiler.es5.ts#assertArrayOfStringsthe cause may be exceedingly difficult to ascertain), orMention any other details that might be useful.
This application structure exists because we are porting an old angular 2 beta-6 application built with
gulpto angular 4.3.2 built withng.While these errors are almost certainly artifacts of legacy practices, I found it exceedingly difficult to isolate the cause. While
ngitself 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.The text was updated successfully, but these errors were encountered: