compiler-cli: Component-level CSS causes error

[sarunint]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Note: I'm not sure if this issue is an issue of @angular/compiler-cli or angular-cli
After compiling a style-embedded component, the compiler generates a .css.shim.ts file. But this file causes the following error while building:

ERROR in [default] C:\path\to\project\src\app\app.component.css.shim.ts:1:7
Property 'exports' does not exist on type '{ id: string; }'.

ERROR in [default] C:\path\to\project\src\app\app.component.ngfactory.ts:17:26
File 'C:/path/to/project/src/app/app.component.css.shim.ts' is not a module.

This is the content of app.component.css.shim.ts:

/**
 * This file is generated by the Angular 2 template compiler.
 * Do not edit.
 */
 /* tslint:disable */

export const styles:any[] = [''];

Expected behavior

.css.shim.ts files should not cause errors during build.

Reproduction of the problem

1. Use angular-cli from the master branch - as the time of writing, I use angular/angular-cli@e20af21 (The latest release still on RC5)
2. Generate a new project using ng new
3. Install @angular/compiler-cli and its dependency, @angular/platform-server
4. Compile the component using ./node_modules/.bin/ngc -p ./src
5. Edit main.ts to look like this: https://gist.github.com/sarunint/d19269000028d504685f38f206410dc0
6. Build using ng build or ng serve

Please tell us about your environment:
Tested on Windows 10 and Ubuntu 14.04 running NodeJS 6.5.0

• Angular version: 2.0.0-rc.6, angular/angular-cli@e20af21
• Language: TypeScript 2.0.2
• Node (for AoT issues): node --version = 6.5.0

[sarunint]

I did a bit of testing, and I found that if the file name contains css after the first ., it will cause error.

I'll continue investigating on this issue.

[vicb]

what file ?

do you have a mean to test on linux / mac ?
edit: oops sorry, you have tested on ubuntu

[sarunint]

I don't have a Mac, but I did a test on Ubuntu which gave the same result.

The file I mentioned is app.component.css.shim.ts, if I rename it to something like app.component.shim.ts or app.component.style.shim.ts (or anything that doesn't have css in its name), the error would gone.

[vicb]

You are renaming a generated file ???

[sarunint]

I found the issue. It's due to erroneous configuration of webpack in angular-cli.

Fixed in angular/angular-cli#2069

[vicb]

Thanks for reporting the solution here

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