Styling with External SVGs in Angular Components

I'm working with Angular and trying to use some SVGs that I've made and I'm having a fairly difficult time getting them to display and style properly in the page with. I have some set up in a separate .svg file and I'm using the tag to bring them into the page.

Here is what the project file looks like:

• src
  • app
    • Shapes
      • shapes.component.html
      • shapes.component.ts
      • shapes.svg

Inside shapes.svg:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="blackGradient">
        <stop offset="10%" stop-color="#202020" />
        <stop offset="50%" stop-color="#404040" />
        <stop offset="80%" stop-color="#202020" />
    </linearGradient>
    <g id="testRect" fill="black">
        <circle cx="400" cy="400" r="5" />
        <g>
            <rect x="10" y="150" width="10" height="460" fill="url(#blackGradient)"/>
        </g>
    </g>  
  </defs>
</svg>

Inside shapes.component.html

<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <use href="app/Signals/PRR/prrdefs.svg#testRect" />
  </svg>
</div>

When I run this code, the rectangle does not display. If I change the fill to just black, it displays just fine. If I put all of the defs in shape.component.html then the rectangle displays and is styled correctly. Can someone see what I'm doing wrong when I'm using the gradient defs in the external shapes.svg file? I wouldn't think it's a url issue but I'm new to working SVGs into Angular.

Thank you in advance, Shaun