Initiate AOT compilation from the command line using ngc is failing Error : Expected 'stylesUrls' to be an array of strings. Angular 4

[xtianus79]

Bug Report or Feature Request (mark with an x)

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

Output from: ng --version.
"@angular/compiler-cli": "4.0.2",

node v7.9.0
macOS ( Sierra?)

Simple steps to reproduce this bug.
Please include: commands run, packages added, related code changes.
A link to a sample repo would help too.

following the steps here https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
this command is run:
node_modules/.bin/ngc -p tsconfig-aot.json

The log given by the failure.

Error: Expected 'styleUrls' to be an array of strings.
at assertArrayOfStrings (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:3361:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13786:13)
at CompileMetadataResolver._getEntryComponentMetadata (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14484:45)
at /Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14470:48
at Array.forEach (native)
at CompileMetadataResolver._getEntryComponentsFromProvider (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14469:30)
at /Users/xxxxx/xxxxxx/xxxxx/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:14433:83
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (/Users/xxxxxxx/xxxxxx/xxxxxxx/xxxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14397:19)
at /Users/xxxxxx/xxxxxxxxx/xxxxxxx/xxxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14399:23
Compilation failed

Desired functionality.

it should work

Mention any other details that might be useful.

I am using angular 4.0.2 and it's components

[clydin]

The CLI (ng ...) handles the details of AOT compilation.
Create a new project via ng new aot-test (for example) then execute ng build --prod from within the project directory. (AOT is enabled by default with a production build). The dist directory will contain the AOT compiled and optimized output.

[xtianus79]

@clydin this is using AOT that is in an existing project. What help does your instructions provide?

[clydin]

if you are not using the CLI then the appropriate repository to open an issue concerning your problem is angular/angular which maintains the 'ngc' tool.

[xtianus79]

@clydin I am using the cli... I am not sure how to segregate out the ngc tool. this seems to be an issue deriving from cli through typescript

@clydin sorry I see what you are saying but from my understanding ngc is an equal tpc replacement from the cli... I didn't install ngc for example.

[filipesilva]

On CLI projects you don't use ngc directly, you use ng build instead. The instructions in https://angular.io/docs/ts/latest/cookbook/aot-compiler.html are not for CLI projects, but rather projects like https://github.com/angular/quickstart.

[RonNewcomb]

Late to the party, but I had this issue caused by including a css file twice, once in the angular-cli.json's styles array, and once in a particular component's styleUrls array. Apparently the cli's webpack sees the filename/filepath that it already recognizes in the component and wraps/replaces the filepath string with something like __webpack__require(filepath) which is obviously not the string the styleUrls property was looking for.

Fix is to remove it from one of those locations. (Assuming you don't have it on multiple components. In that case, remove it from angular-cli.json)

Even a slight change to the filepath could fix it. Changing one of them from xxx.min.css to just xxx.css would cure the error, even though you wouldn't want it twice in your project.

[angular-automatic-lock-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.}