cli fails to compile with ViewEncapsulation.None, --aot and styleUrls

[borislemke]

Please provide us with the following information:

OS?

OS X El Capitan

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.21
node: 6.9.1
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Default cli configuration

The log given by the failure.

Normally this include a stack trace and some more information.

error_handler.js:53 TypeError: Cannot read property 'replace' of undefined
    at flattenStyles (dom_renderer.js:301)
    at new DomRenderer (dom_renderer.js:80)
    at DomRootRenderer_.DomRootRenderer.renderComponent (dom_renderer.js:38)
    at DebugDomRootRenderer.renderComponent (debug_renderer.js:15)
    at ViewUtils.renderComponent (view_utils.js:23)
    at View_AppComponent0.AppView (view.js:50)
    at new View_AppComponent0 (app.component.ngfactory.ts:107)
    at View_AppComponent_Host0.createInternal (app.component.ngfactory.ts:71)
    at View_AppComponent_Host0.AppView.createHostView (view.js:81)
    at ComponentFactory.create (component_factory.js:154)

Mention any other details that might be useful.

The compiler fails to compile with --aot flag if a styleUrls is specified on a component that has ViewEncapsulation.None. Removing the encapsulation and including the stylesheet in angular-cli.json works but is not intuitive. This should be mentioned somewhere in the docs or fixed to resolve the issue.

---

Thanks! We'll be in touch soon.

[aaronleestic]

This is a known issue and I just realized, that issue was filed under angular repo, not the angular-cli repo: angular/angular#11408

There I detailed a workaround to this awful bug; using /deep/ in scss instead of the ViewEncap..None.

[hansl]

We actually updated the @ngtools/webpack webpack plugin to support ViewEncapsulation. Closing this as fixed.

Cheers!

[vthinkxie]

@hansl Has it fixed yet? I update angular-cli@beta.22 and find it still not work

[hansl]

It's fixed. You're probably experiencing another issue.

[aaronleestic]

Does not appear to be fixed for me. I've been running beta.22, angular 2.2.3. In ng serve --aot=true, this error appears in web console when I use ViewEncapsulation.None on the root component. When I comment it out, app works fine.

vendor.bundle.js:22530TypeError: Cannot read property 'replace' of undefined at flattenStyles (vendor.bundle.js:17448) at new DomRenderer (vendor.bundle.js:17227) at DomRootRenderer_.DomRootRenderer.renderComponent (vendor.bundle.js:17185)

[vthinkxie]

@hansl I have the same error with @aaronleeucla , ViewEncapsulation.None and styleUrls will be conflicted when using ng serve --aot with angular-cli beta.22 and angular 2.2.3，and it seems a bug of angular itself, ref to angular/angular#11408

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