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

[kblestarge]

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.

[kblestarge]

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]

can you share a sample project to reproduce?

[deebloo]

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

[kblestarge]

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

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]

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]

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

[kblestarge]

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]

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

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

[xtianus79]

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

https://github.com/angular/angular-cli/issues/6002

[kblestarge]

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

[kblestarge]

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

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

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

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

I opened an issue here that is in the actual angular repo...
https://github.com/angular/angular/issues/16134

[Toxicable]

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

[scascarini]

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]

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

[scascarini]

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

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

[Toxicable]

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

[scascarini]

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

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

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]

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

[scascarini]

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

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

[xtianus79]

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

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

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

[kblestarge]

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

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

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

[kblestarge]

@Toxicable can you give me an example?

[kblestarge]

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]

yes

[kblestarge]

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

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

@select yes

[scascarini]

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]

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]

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]

@timdk it is possible, yes

[timdk]

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]

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]

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

[YadJosan]

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

@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[bot]]

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._}