Angular-cli: Expected 'styles' to be an array of strings.

[benohead]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 7.1.2
Node: 10.13.0
NPM: 6.4.1
OS: Windows 10 x64
Angular: 7.1.2

Repro steps

ng new my-app --routing --style SCSS
cd my-app
ng serve

Open http://localhost:4200/ in Chrome

The log given by the failure

This error is logged on the browser console:

Uncaught Error: Expected 'styles' to be an array of strings. at assertArrayOfStrings (compiler.js:9200) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:18141) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:18786) at compiler.js:18446 at Array.map (<anonymous>) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18446) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:25715) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25696) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25656) at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)

Desired functionality

The sample application should be displayed. Instead a white page is displayed and the error above is logged to the console.

Mention any other details that might be useful

Nothing was changed in the application after creating it using ng new. Using ng build and accessing the application through IIS leads to the same results.

[benohead]

Using CSS instead of SCSS leads to the same results.

Also adding any rule to a CSS or SCSS file leads to the error:

ERROR in ./src/app/app.component.CSS 1:3 Module parse failed: Unexpected token (1:3) You may need an appropriate loader to handle this file type.

or:

ERROR in ./src/styles.CSS 2:5 Module parse failed: Unexpected token (2:5) You may need an appropriate loader to handle this file type.

[alan-agius4]

Hi thanks for reporting this.

The problem here is that at the moment we only handle extensions in lowercase

[benohead]

@alan-agius4 yes, you're right. After renaming the SCSS/CSS files to lowercase and updating references, the generated application works !

[alan-agius4]

Note: we should only accept valid file extensions.

[alan-agius4]

Re-opened, as we should provide a better error message if an invalid extension is provided. Ie: we should use an enum. Though this might be a breaking change if someone if using the API and we should include it for V8.

[jacobbuck72]

I got this as well in the process of upgrading to Angular 7 and upgrading various dependencies to their latest versions. I found that using raw-loader version 2.0.0 was causing this error even though my styleUrls were correct syntax. Downgrading to raw-loader version 1.0.0 resolved this issue. I don't know if this helps in the above situation.

[faresayyad]

I got this as well in the process of upgrading to Angular 7 and upgrading various dependencies to their latest versions. I found that using raw-loader version 2.0.0 was causing this error even though my styleUrls were correct syntax. Downgrading to raw-loader version 1.0.0 resolved this issue. I don't know if this helps in the above situation.

This helped me, ma problem got solved, but how did you figure out the solution?

[JoelParke]

I also saw this same error when I upgrade raw-loader to 2.0.0. Back to 1.0.0 removed this error as well.

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