angular-cli: ng build --prod | ERROR in Expected 'styles' to be an array of strings.

Bug Report or Feature Request (mark with an `x`)

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

Versions.

@angular/cli: 1.0.0 node: 6.9.3 os: darwin x64 @angular/animations: 4.0.2 @angular/common: 4.0.2 @angular/compiler: 4.0.2 @angular/compiler-cli: 4.0.2 @angular/core: 4.0.2 @angular/forms: 4.0.2 @angular/http: 4.0.2 @angular/material: 2.0.0-beta.3 @angular/platform-browser: 4.0.2 @angular/platform-browser-dynamic: 4.0.2 @angular/platform-server: 4.0.2 @angular/router: 4.0.2 @angular/cli: 1.0.0

Repro steps.

Run this: ng build --prod

package.json:

{
  "name": "xion",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@nglibs/meta": "^0.4.0-rc.1",
    "@types/underscore": "^1.7.33",
    "aws-sdk": "^2.6.8",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "ng2-auto-complete": "^0.7.4",
    "rxjs": "5.0.1",
    "speakingurl": "^9.0.0",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.2.2",
    "underscore": "^1.8.3",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "^2.5.38",
    "@types/node": "^6.0.42",
    "@types/underscore": "^1.7.33",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "2.0.3"
  }
}

The log given by the failure.

Here is the error that came from the ng build --prod:

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

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/src'
 @ ./src/main.ts 5:0-74
 @ multi ./src/main.ts

Desired functionality.

This should successfully create the production build without any fatal errors.

Mention any other details that might be useful.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 49 (3 by maintainers)

Most upvoted comments

This popped up for me right after I’d added a new stylesheet to the styles array inside of the .angular-cli.json file, and the error message seemed to imply there was a problem with the styles array inside that file. The issue though, was inside a component referencing the same stylesheet at a different path. The styles array in the component had to be corrected to match the reference that was newly added to .angular.cli.json and then the error resolved.

sqlsolver on May 8, 2017

yes

Toxicable on Apr 25, 2017

@YadJosan, I’m pretty sure the cli does the minifying for us with Webpack upon building the project. You shouldn’t have to manually configure anything…

kblestarge on May 18, 2017

@YadJosan, make sure you are not using require to reference files in your components, directives, and services. See my comment above.

kblestarge on May 18, 2017

@xtianus79, I added the file and ran node_modules/.bin/ngc -p tsconfig-aot.json, but got an error.

Here’s the error:

Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:3361:19)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:13785:13)
    at CompileMetadataResolver._loadDirectiveMetadata (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:13703:23)
    at /Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:13927:54
    at Array.forEach (native)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:13926:41)
    at /Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:22228:85
    at Array.map (native)
    at AotCompiler.compileAll (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler/bundles/compiler.umd.js:22228:28)
    at CodeGenerator.codegen (/Users/kevbot/Documents/xion/august_repo/xion/xion_ng2/node_modules/@angular/compiler-cli/src/codegen.js:30:14)
Compilation failed

kblestarge on Apr 18, 2017

Also getting this same exact error. There are a lot of solutions on the Webpack git, but we don’t have access to the Webpack config to make those fixes.

https://github.com/webpack-contrib/style-loader/issues/123

YeomansIII on Apr 18, 2017