摆脱 chrome 开发工具 html 视图封装中的 _nghost 和 _ngcontent

Question

I am currently working on a already existing angular project - upon expecting the html page via google dev tools I found some weird additions to the html - like _nghost... and _ngcontent...

How do I get rid of those props? Ive never seen them in other projects.

I already found out, that it may have something to do with ViewEncapsulation in Angular, therefore I changed my tsconfig.json file so it includes the following statement:

Sadly no changes ... Thanks in advance for your help!

Answer 1

Add ViewEncapsulation.None, like that:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.scss' ],
    encapsulation: ViewEncapsulation.None
})

But in that case you need to work with styles specificity by yourself.