@ngtools crashes when using scss with ViewEncapsulation.None

[qdouble]

Please provide us with the following information:

OS?

Mac OSX (Sierra)

Versions.

Using webpack repo from the test directory: https://github.com/angular/angular-cli/tree/master/tests/e2e/assets/webpack/test-app

Repro steps.

If you set ViewEncapsulation.None any component, like right here: https://github.com/qdouble/show-encapsulation-error/blob/master/app/app.component.ts#L9 and then run the webpack command it will crash. You can download the repo from that link if you want, the only thing that I changed is adding ViewEncapsulation.None

The log given by the failure.

ERROR in ./app/ngfactory/app/app.component.ngfactory.ts                             
Module build failed: Error: /Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-err
or/app/ngfactory/app/app.component.ngfactory.ts (17,27): Cannot find module '../../a
pp.component.scss'.)                                                                
    at _transpile (/Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-error/node_m
odules/@ngtools/webpack/src/loader.js:101:19)                                       
    at /Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-error/node_modules/@ngto
ols/webpack/src/loader.js:125:26                                                    
 @ ./app/ngfactory/app/app.module.ngfactory.ts 34:0-54                              
 @ ./app/main.aot.ts                                                                

ERROR in ./app/ngfactory/app/lazy.module.ngfactory.ts                               
Module build failed: Error: /Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-err
or/app/ngfactory/app/app.component.ngfactory.ts (17,27): Cannot find module '../../a
pp.component.scss'.)                                                                
    at _transpile (/Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-error/node_m
odules/@ngtools/webpack/src/loader.js:101:19)                                       
    at /Users/qdouble/Sites/EXAMPLE_APPS/show-encapsulation-error/node_modules/@ngto
ols/webpack/src/loader.js:125:26                                                    
 @ ./app/ngfactory async                                                            
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js               
 @ ./app/ngfactory/app/app.module.ngfactory.ts                                      
 @ ./app/main.aot.ts 

[DzmitryShylovich]

Might be related to angular/angular#11408

[montella1507]

I hope this will be fixed soon.

[montella1507]

Is someone still working on that problem?

[kuldeepkeshwar]

any workaround for this ?

[debben]

For places where ViewEncapsulation.None was used, I've removed the styles altogether and just placed a line import 'styles!./path/to/style.scss' above the component. When using just-in-time compilation, Angular was pretty much just doing the same thing as the style loader I think and injecting a new style tag with the contents in the head section.

This bug has also had me reevaluating the styles I was using in components with ViewEncapsulation.None to determine what can be promoted to just a global stylesheet and what should stay. The styles that are component specific I'm working to change to use ViewEncapsulation.Emulated.

[hansl]

@DzmitryShylovich Yes it's related to that issue in the code generator.

In the CLI itself I'm going to move the generated code to its own directory. A PR should come soon to do just this. That way we will avoid the issue. There will not be a change in the configuration so you guys should not notice anything different (other than the bug being fixed).