CODEWITHSUNDEEP
angularsvg
Raphaël Balet
Raphaël Balet

Reputation: 8583

angular 'path' is not a known element

I want to pass <path> through an ng-content, but angular is showing me the following error.

Only void and foreign elements can be self closed "path"ngtsc(-995002)
---
'path' is not a known element:
1. If 'path' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

I know,

  1. Wrapping the path around with an svg tag will solve the problem.
  2. adding the NO_ERRORS_SCHEMA could solve it.

But I was wondering if something else more elegant would be possible

// rounded-icon.component.html
<div class="card-img">
  <svg class="notice-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
    <ng-content></ng-content>
  </svg>
</div>

// parent.component.html
<rounded-icon>
   <path class="st1" d="M47.8,29.9c0,0,0.3-3.1,3-3.1s2.9,3.1,2.9,3.1" /> <!-- error -->
   <path d="M74.19,63.29v-.47l-.4-.62a30.27,30.27,0,0,1-4.66-14.64c-.39-8.63-4.43-18.51-14.26-21a5.22,5.22,0,0,0-5-3.45,5.36,5.36,0,0,0-5,3.38C34.72,28.9,30.87,39,30.77,47.68a28.86,28.86,0,0,1-4.42,14.25,3.66,3.66,0,0,0,.81,5l.7.56h.39a59.3,59.3,0,0,0,10.86,4.16,41.54,41.54,0,0,0,4.79,1,3.25,3.25,0,0,0-.18,1l0,.42a6,6,0,0,0,5.94,5l.5,0A5.65,5.65,0,0,0,56.06,74v-.4a2.51,2.51,0,0,0-.17-.88,42.53,42.53,0,0,0,5-1,56.6,56.6,0,0,0,11.52-4.54,3.5,3.5,0,0,0,1.7-2A3.57,3.57,0,0,0,74.19,63.29Z"/> <!-- error -->
</rounded-icon>

Upvotes: 1

Views: 1948

Answers (1)

yurzui
yurzui

Reputation: 214305

Angular doesn't know the context of path tag. You should prefix it with svg: namespace:

<svg:path ...

Upvotes: 5

Related Questions