Updating meta for content security policy dynamic but still getting content security policy issue in Angular app

Question

In my Ionic-Angular project, meta tag is getting added from app.component file. Suppost host url of my application is https://example.com

import { Meta } from '@angular/platform-browser';


this.meta.addTag({
      'http-equiv': 'Content-Security-Policy',
      content: `default-src 'self' https://example.com filesystem: cdvfile: data: 'self';`    
});

Now there is one page for client lets say https://example.com/client, on client page there is one get method api call which return the client specific url. Once application has this url then there are several get and post call which will use this client specific url. Lets say this client url is xyz.com.

Now all the APIs for client url is throwing CSP error.

Error: rest.service.ts:89 Refused to connect to 'xyz.com/endpoint' because it violates the following Content Security Policy directive: "default-src 'self' https://example.com data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.*

So what I did on /client page once I have the client specific url I am updating metas like below

this.meta.addTag({
          'http-equiv': 'Content-Security-Policy',
          content: `default-src 'self' https://example.com xyz.com filesystem: cdvfile: data: 'self';`    
});

I can see after inspecting the meta tag, meta is getting updated successfully but I am still getting CSP issue. When I am adding the client url from app.component(static) then its working but that's not possible to add it from app.component as we are getting this url from client page only.

in client page I tried below also but still same issue.

1.

this.meta.removeTag('http-equiv);

this.meta.addTag({
          'http-equiv': 'Content-Security-Policy',
          content: `default-src 'self' https://example.com xyz.com filesystem: cdvfile: data: 'self';`    
    });

this.meta.updateTag({
          'http-equiv': 'Content-Security-Policy',
          content: `default-src 'self' https://example.com xyz.com filesystem: cdvfile: data: 'self';`    
    });

Any idea what's going wrong or any alternate approach which I can try? Thanks.