Angular 5 - W3C 标记验证

Question

I'm building Angular 5 application with Angular Universal. Currently I got a problem with W3C validation. The validator is showing errors on every attribute from Angular core.

For example, for code part like:

<span _ngcontent-c1="" class="sr-only">Toggle</span>

I'm getting error like:

Attribute _ngcontent-c1 not allowed on element span at this point.

I read about adding before Angular attributes data- prefix, but on Angular 5 it won't work (I think).

Is there any solution to remove it on server side using Angular Universal, or is there any external tool?

Answer 1

Angular provide these _ngcontent-c1 , _ngcontent-c2 attribute added to specific DOM elements with styles.

_ngcontent-c1 is used unique identity when rendered from server. when we do ViewEncapsulation.Emulated and it's the default behaviour of angular.

If you don't want such kind of attribute so you can add ViewEncapsulation.None or ViewEncapsulation.Native .

eg.

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