Repository navigation
/deep/ causes build to fails with Angular 8 #30815
Description
🐞 bug report
Is this a regression?
Yes, the previous version in which this bug was not present was: Angular 7.2
Description
After migrating my application from Angular 7 to Angular 8 the production build fails with the following error :
/deep/ .k-grid tr.done { background-color :lightgrey !important }
^
Expected selector.
Is this a regression ?
🔥 Exception or Error
/deep/ .k-grid tr.done { background-color :lightgrey !important }
^
Expected selector.
🌍 Your Environment
Angular Version:
Angular CLI: 8.0.1
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/build-webpack 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cdk 7.3.3
@angular/cli 8.0.1
@ngtools/webpack 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
Reacted by Thomas Nordengen and Andy Westmeyer
Reacted by Trotyl Yu
Activity
depyronick commentedon Jun 3, 2019
https://angular.io/guide/deprecations#deep-component-style-selector
graphicsxp commentedon Jun 3, 2019
The documentation is very confusing regarding this. A few lines above, there is a table with the following :
template syntax | /deep/, >>>, and ::ng-deep | unspecified -- | -- | --unspecified being the version number ....
Besides, it was working with version 7.2 and has stopped working after migration to 8.0. There must be another explanation ...
gkalpak commentedon Jun 3, 2019
The reason it fails in 8, is due to moving from
node-sasstosass(dart-based) in angular/angular-cli@ce1589902 (see the commit message for details).dart-sassdoes not understand/deep/: sass/dart-sass#154graphicsxp commentedon Jun 3, 2019
Ah ok ! That's a good answer !😀
I've installed node-sass instead and now it is working indeed.
I don't understand why this syntax is getting deprecated but I'll see if I can find a way around this.
montella1507 commentedon Jun 14, 2019
@gkalpak please, reopen the issue, it is not solved...
It is deprecated - it isnt "not supported anymore". From my point of view, you should be able to build with /deep/. It is not even mentioned as breaking change ("Do not use /deep/ it is not supported anymore").
/deep/ is really needed in the future and we still do not have any replacement - there may be ::slotted() ? I think this is bigger issue for developers and it should have got bigger priority months ago
trotyl commentedon Jun 14, 2019
@montella1507 You have deep misunderstanding of what happened.
The very reason for
::ng-deepbeing introduced in first place it that CSS preprocessors are not going to support/deep/, and Angular cannot change that. See #17677 for more information.Angular has never dropped support for
/deep/, as long as you are not using any CSS preprocessor.maxn0d3x commentedon Aug 27, 2019
use :host ::ng-deep instad of /deep/
angular-automatic-lock-bot commentedon Sep 27, 2019
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.