ng build --prod | ERROR in Expected 'styles' to be an array of strings. #5989

kblestarge · 2017-04-17T20:58:44Z

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.

The text was updated successfully, but these errors were encountered:

kblestarge · 2017-04-17T20:59:45Z

Also, this seems to work fine: ng build --prod --aot=false which makes me believe that this is an AOT bug.

Any suggestions or help is appreciated.

deebloo · 2017-04-18T03:46:14Z

can you share a sample project to reproduce?

deebloo · 2017-04-18T03:47:13Z

also make you your @angular/compiler-cli version matches the version of angular you are using

kblestarge · 2017-04-18T15:39:06Z

@deebloo I'm pretty sure my angular version is on 4.0.2 which matches my @angular/compiler-cli version (also 4.0.2).

kblestarge · 2017-04-18T15:40:13Z

Maybe there is something wrong in my angular-cli.json file. Have a look and let me know if you see anything strange:

{
    "project": {
        "version": "1.0.0-beta.17",
        "name": "xion"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": ["assets", "HPP", "robots.txt", "sitemap.xml"],
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "xion",
            "mobile": false,
            "styles": [
                "normalize.css",
                "forms.css",
                "theme.scss",
                "styles.css"
            ],
            "scripts": [
                "../node_modules/hammerjs/hammer.min.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false
    }
}

kblestarge · 2017-04-18T15:42:12Z

The error makes it sound like there is something wrong in the main.ts file, so here's that too:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

YeomansIII · 2017-04-18T16:00:13Z

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.

webpack-contrib/style-loader#123

kblestarge · 2017-04-18T17:33:25Z

Yes, the fixes you referenced would require us to run ng eject, which would take us out of the default angular-cli webpack config --which scares me because I am not a webpack expert.

A solution with the cli would be ideal.

xtianus79 · 2017-04-18T18:34:27Z

@kblestarge run this command if you have a tsconfig-aot.json

node_modules/.bin/ngc -p tsconfig-aot.json

xtianus79 · 2017-04-18T18:57:18Z

I started this issue because while it is related I don't believe it is the same thing

#6002

kblestarge · 2017-04-18T19:35:52Z

@xtianus79, my project doesn't have a tsconfig-aot.json. Should I still run that command?

kblestarge · 2017-04-18T19:38:34Z

@xtianus79 I ran it, but it gave me the following error: Error: ENOENT: no such file or directory, lstat 'tsconfig-aot.json'

Do I need to create a tsconfig-aot.json file?

xtianus79 · 2017-04-18T21:01:08Z

@kblestarge yes you need the file at your root

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "es2017", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 }
}

kblestarge · 2017-04-18T21:34:59Z

@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

xtianus79 · 2017-04-18T21:47:17Z

@kblestarge hahaha... so it is the same bug** well i don't know if this is the compiler-cli's fault or angular-cli....

xtianus79 · 2017-04-18T21:48:12Z

I opened an issue here that is in the actual angular repo...
angular/angular#16134

Toxicable · 2017-04-19T02:50:03Z

@kblestarge can you please provide a minimal reproduction of this issue?

scascarini · 2017-04-19T15:44:53Z

I have the same issue. If it helps I have a minimal repro here https://github.com/scascarini/repo5989

The only changes from a raw ng new project are to add 'requires' to the template and styles in app.component.ts and to copy across my custom tsconfig.app.json settings from my original project.

Toxicable · 2017-04-19T19:07:11Z

@scascarini require ('somestring') is not a string, you need to pass a string not a require

scascarini · 2017-04-20T07:05:21Z

@Toxicable It works (ie builds and runs) in other than the AoT build.

http://stackoverflow.com/questions/37244821/angular-2-template-syntax

Toxicable · 2017-04-20T07:28:35Z

@scascarini JIT does not have type safety, AOT does, therefore just because it works in JIT doesn't mean it will in AOT

scascarini · 2017-04-20T07:51:41Z

@Toxicable I think the underlying issue is that 'require' works in JIT (ie it's returning the template as a string) and it doesn't work in AoT (ie it returns null/undefined). Question is - should it work ?

Toxicable · 2017-04-20T07:57:16Z

@scascarini no, becasue unless my understanding is incorrect, since the AOT compiler does not execute your code then it cannot call the require function and retrieve the template, since it cannot retrieve the template it cannot compile your code

scascarini · 2017-04-20T10:25:00Z

I had hopes this would work. But same issue (works OK ng build but not ng build --prod)

declare module "*html" {
    const content: string;
    export default content;
}

declare module "*css" {
    const content: string;
    export default content;
}


import contentHtml from "./app.component.html";
import contentCss from "./app.component.css";

@Component({
  selector: 'app-root',
  template: contentHtml,
  styles: [contentCss]
})

Toxicable · 2017-04-20T10:25:50Z

@scascarini why aren't you just using a path?

scascarini · 2017-04-20T11:09:12Z

@Toxicable I need to be able to build and deploy my components as node modules - paths don't work (or at least didn't last time I tried on @angular/[email protected])

deebloo · 2017-04-20T12:11:07Z

@kblestarge ok. was just looking at your package.json and it said you compiler cli version is
"@angular/compiler-cli": "^2.4.0",

xtianus79 · 2017-04-20T18:08:37Z

@Toxicable if JIT doesn't have type safety and AOT does than that is a huge problem... A user should expect that if it is running it in JIT than things should be running in AOT.

Also, JIT may not have type safety but running your application tied to an tsconfig gives your application type saftey... So again, a user would expect a similiar result in method of deployment.

This is certainly a bug or at the least not a well thought out flow.

Toxicable · 2017-04-20T19:09:14Z

@xtianus79 I think I misworded that slightly, the AOT compiler has type safety since it's run before transpilstion, the JIT compiler does not since it's run after transpilstion and this is never going to change, you cannot run the JitCompiler on untranspiled code

xtianus79 · 2017-04-21T03:15:15Z

@Toxicable ahhhh ok. I get what you're saying now. So AOT using typescript is causing this issue

kblestarge · 2017-04-22T03:23:14Z

@deebloo my package.json may say that in the devDependencies, but in the normal dependencies, it looks like it's the updated version: "@angular/compiler-cli": "^4.0.1",
Also, ng version shows the version as @angular/compiler-cli: 4.0.2. So I don't think that is the problem here.

kblestarge · 2017-04-25T21:22:22Z

@xtianus79 or @Toxicable, any suggestions for workarounds?

This is how I'm building my deliverable project in the meantime:
ng build --prod --env=prod --aot=false
However, this is not a good workaround because now I'm not taking advantage of all the benefits of AOT.

Toxicable · 2017-04-25T21:25:24Z

@kblestarge the work around is to do it correctly, ie, use an actual path not a require

kblestarge · 2017-04-25T21:40:14Z

@Toxicable can you give me an example?

kblestarge · 2017-04-25T21:49:15Z

Are you suggesting that I change component meta data from this:

@Component({
    selector: 'xion-home',
    template: require('./home.component.html'),
    styles: [ require('./home.component.css') ],
})

to this:

@Component({
    selector: 'xion-home',
    templateUrl: './home.component.html',
    styleUrls: [ './home.component.css' ]
})

?

Toxicable · 2017-04-25T21:50:48Z

yes

kblestarge · 2017-04-25T22:54:17Z

@Toxicable, thank you. This solved my problem.

Now I just have to change all of my private variables that are referenced in external templates to public variables. I wish this problem was mentioned in the Angular changelog. Here's the issue I'm referencing.

select · 2017-04-26T16:19:10Z

@Toxicable

@kblestarge the work around is to do it correctly, ie, use an actual path not a require

Will this work for SASS files too?

Toxicable · 2017-04-26T18:52:23Z

@select yes

scascarini · 2017-04-27T14:17:26Z

Unfortunately it doesn't work if I'm building and deploying the component as a node module. So it looks like I shall either have to embed the templates directly (which is ugly) or copy the templates in as a pre-build step (which is what I'd hoped require or import would stop me having to do - and which works fine in non-AoT builds).

sqlsolver · 2017-05-08T22:32:27Z

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.

timdk · 2017-05-08T22:52:24Z

I'm having this issue after migrating to Angular 4 from 2. I don't include any of my styles by require() and nor do I reference any of the styles in my angular-cli styles array directly in any of my components as @sqlsolver suggested.

I've globally commented out all of my styles and styleUrls on my components as a test and I still get the same error. Is it possible that the error is coming from a 3rd party library I am using?

Toxicable · 2017-05-08T22:53:11Z

@timdk it is possible, yes

timdk · 2017-05-10T22:47:14Z

As an update to anyone else having this issue: I updated all of my packages to the latest version and it gave me some new warnings that it previously didn't warn about. Once I fixed those the build succeeds.

I still had one component that used a private member in its template and in my router testing stubs files I declared a module before its components. One of those components doesn't declare any styles (router outlet stub) so maybe the error was coming from that.

YadJosan · 2017-05-17T16:26:48Z

Hi, I am having this issue while ng build --prod. it works fine ng build but give issue in 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 'D:\Projects\simplifyng2\src'
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts

kblestarge · 2017-05-18T15:28:57Z

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

YadJosan · 2017-05-18T16:34:00Z

@kblestarge Thanks .
There was a require in theme file.
now it works for me.

can you please let me know how we can minify js in cli

kblestarge · 2017-05-18T18:05:26Z

@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...

angular-automatic-lock-bot · 2019-09-07T03:41:08Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

xtianus79 mentioned this issue Apr 19, 2017

Initiate AOT compilation from the command line using ngc of compiler-cli is failing Error : Expected 'stylesUrls' to be an array of strings. Angular 4 angular/angular#16134

Closed

kblestarge closed this as completed Apr 25, 2017

RicardoVaranda mentioned this issue May 19, 2017

ng build --prod issue #6355

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

ng build --prod | ERROR in Expected 'styles' to be an array of strings. #5989

ng build --prod | ERROR in Expected 'styles' to be an array of strings. #5989

Comments

kblestarge commented Apr 17, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

kblestarge commented Apr 17, 2017 • edited Loading

deebloo commented Apr 18, 2017

deebloo commented Apr 18, 2017

kblestarge commented Apr 18, 2017

kblestarge commented Apr 18, 2017

kblestarge commented Apr 18, 2017

YeomansIII commented Apr 18, 2017

kblestarge commented Apr 18, 2017

xtianus79 commented Apr 18, 2017 • edited Loading

xtianus79 commented Apr 18, 2017

kblestarge commented Apr 18, 2017

kblestarge commented Apr 18, 2017 • edited Loading

xtianus79 commented Apr 18, 2017 • edited Loading

kblestarge commented Apr 18, 2017

xtianus79 commented Apr 18, 2017

xtianus79 commented Apr 18, 2017

Toxicable commented Apr 19, 2017

scascarini commented Apr 19, 2017

Toxicable commented Apr 19, 2017

scascarini commented Apr 20, 2017 • edited Loading

Toxicable commented Apr 20, 2017

scascarini commented Apr 20, 2017

Toxicable commented Apr 20, 2017

scascarini commented Apr 20, 2017

Toxicable commented Apr 20, 2017

scascarini commented Apr 20, 2017

deebloo commented Apr 20, 2017

xtianus79 commented Apr 20, 2017

Toxicable commented Apr 20, 2017

xtianus79 commented Apr 21, 2017

kblestarge commented Apr 22, 2017

kblestarge commented Apr 25, 2017

Toxicable commented Apr 25, 2017

kblestarge commented Apr 25, 2017

kblestarge commented Apr 25, 2017

Toxicable commented Apr 25, 2017

kblestarge commented Apr 25, 2017

select commented Apr 26, 2017

Toxicable commented Apr 26, 2017

scascarini commented Apr 27, 2017

sqlsolver commented May 8, 2017 • edited Loading

timdk commented May 8, 2017

Toxicable commented May 8, 2017

timdk commented May 10, 2017

YadJosan commented May 17, 2017 • edited Loading

kblestarge commented May 18, 2017

YadJosan commented May 18, 2017 • edited Loading

kblestarge commented May 18, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

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

kblestarge commented Apr 17, 2017 •

edited

Loading

xtianus79 commented Apr 18, 2017 •

edited

Loading

kblestarge commented Apr 18, 2017 •

edited

Loading

xtianus79 commented Apr 18, 2017 •

edited

Loading

scascarini commented Apr 20, 2017 •

edited

Loading

sqlsolver commented May 8, 2017 •

edited

Loading

YadJosan commented May 17, 2017 •

edited

Loading

YadJosan commented May 18, 2017 •

edited

Loading