CSP Response Headers within an Angular web.config not applied

Question

I have a deployed an Angular app that implements a CSP where the Response Headers are set via the IIS Manager. This works as advertised. Meaning, that I can see the CSP in the response headers and the OWASP is clean.

However, I would prefer to set have the headers set via a web.config file as below. So, I removed the CSP that I setup through IIS Manager and redeployed the Angular app. The app runs and works as expected, but the CSP is no longer being applied.

1. my knowledge of IIS minimalistic at best,
2. the rewrite rule is working because the app is functional and I can see it via the IIS Manager,
3. I can see that the headers are set (looking at them through IIS Manager), however, they do not seem to have any effect or they aren't being applied. I know this, because I viewed the response in debug and do not see them and I ran OWASP. OWASP is now reporting many alerts

Any help, is greatly appreciated

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-XSS-Protection" value="1; mode=block" />
        <add name="X-Content-Type-Options" value="nosniff" />
        <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self'; connect-src 'self'; 
        style-src 'self' 'unsafe-inline'; font-src 'self' data:;
        img-src 'self' data:; frame-ancestors 'self'; form-action 'self';" />
      </customHeaders>
    </httpProtocol>

    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>