Как вам нужен угловой шаблон HTML?

С ES6 ничего нельзя сделать:

import yourTemplate from 'path/to/file';

// inject $templateProvider in start point of your application

$templateProvider.put('path/to/file', yourTemplate);

$templateProvider по себе является простым экземпляром $cacheFactory, где вы можете поместить любой html любым ключом, который можно использовать в ng-include или просто использовать в вашей директиве, как показано ниже:

//Directive
import yourTemplate from 'path/to/file';

который используется в директивной конфигурации:

...,
controller: xxx,
template: yourTemplate,
link: () => { ... }
...

"inline" в отдельном файле противоречит самому себе.

Так как угловой код на стороне клиента, загрузка шаблона, который хранится в нем, отдельный файл всегда требует запроса http.

Единственный способ избежать этих запросов - добавить их в строку с другим кодом, а не в отдельный файл.

Используйте директиву для исправления этого

HTML

<div custom-include url="{{url}}"></div>

директива

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }