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.