Как использовать CachedResourceLoader как эквивалентный механизм для $templateCache в Angular2?

Question

Я знаю, что есть 2 похожих вопроса по этому поводу, но ни один из них не имеет решения.

Так что я нашел эту проблему в репозитории Angular, где они запрашивают то же самое, то есть альтернативу templateCache в Angular 2, но закрывают ее, говоря, что вы можете использовать CachedResourceLoader.

Поэтому мой вопрос заключается в том, как использовать этот CachedResourceLoader для замены templateCache, я искал в Google об этом, но не смог найти связанный контент, поэтому, возможно, я не указываю в правильном направлении, или я что-то пропустил.

Ответ на этот вопрос может быть правильным ответом на другие 2 аналогичных вопроса.

Пример кода для функциональности, которую templateCache предоставляет в AngularJS:

Добавление:

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

Извлечение через $templateCache:

$templateCache.get('templateId.html')

Или поиск:

myApp.component('myComponent', {
   templateUrl: 'templateId.html'
});

Answer 1

CachedResourceLoader существует еще не документированная замена Angular 2+ на AngularJS $templateCache:

Реализация ResourceLoader, которая использует кэш шаблона, чтобы избежать создания фактического ResourceLoader.

Кэш шаблона должен быть собран и загружен в окно.$ TemplateCache через отдельный механизм.

Это должно работать, предоставляя ResourceLoader поставщик:

{provide: ResourceLoader, useClass: CachedResourceLoader}

Который уже был определен в существующих RESOURCE_CACHE_PROVIDER экспорт.

А также window.$templateCache должен содержать пары URL-адресов и ответов.

поскольку ResourceLoader должен быть указан перед компиляцией, он должен быть указан не в модуле приложения, а в параметрах компилятора.

Вот пример:

import {RESOURCE_CACHE_PROVIDER} from '@angular/platform-browser-dynamic';
import {COMPILER_OPTIONS} from '@angular/core';

window['$templateCache'] = { 'app.html': `...`};

platformBrowserDynamic({
  provide: COMPILER_OPTIONS,
  useValue: { providers: [RESOURCE_CACHE_PROVIDER] },
  multi: true
}).bootstrapModule(AppModule)

В отличие от AngularJS $templateCache, CachedResourceLoader не позволяет делать запросы на отсутствующие шаблоны. Это желательное поведение в большинстве случаев. Если это должно быть изменено, пользовательская реализация, которая расширяет стандартное значение ResourceLoader реализация может быть использована вместо.