How to make html files directly accessible via links in Angular

Question

In our app, we have white listed all the URLs * as:

app.config(function ($sceProvider, $urlRouterProvider, $sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([

        'self',
        *
    ]);
}

We are trying to load a url from http://localhost:4200/assets/widget/botResponseTemplate.html

app.config(function ($sceProvider, $urlRouterProvider, $sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([

        'self',
        'http://localhost:4200/assets/widget/botResponseTemplate.html',
        *
    ]);
}

There is a directive also, in which I have allowed the security of the url:

app.directive('bots', function ($compile, $sce) {
    ...
    templateUrl: $sce.trustAsResourceUrl('http://localhost:4200/assets/widget/botResponseTemplate.html'),
    ...
}

Still, we're getting the same problem:

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.

Tried stuff mentioned here:

https://docs.angularjs.org/error/$sce/insecurl

What else could be required to solve this issue?