Comment utiliser CachedResourceLoader comme mécanisme équivalent à $ templateCache dans Angular2?

Question

Je sais qu'il ya 2similar questions à ce sujet, mais sans solution pour l'un d'entre eux.

J'ai donc trouvé this problème dans repo angulaire où ils demandent la même chose, c'est à dire une alternative pour templateCache dans Angular 2 mais ils le ferment en disant que vous pouvez utiliser CachedResourceLoader.

Donc ma question est comment utiliser ce CachedResourceLoader pour remplacer le templateCache, je suis une recherche sur Google à ce sujet mais n'a pas pu trouver un contenu connexe alors peut-être je ne pointe pas vers la bonne direction ou je manqué quelque chose .

La réponse à cette question pourrait constituer une réponse valable pour les 2 autres questions similaires.

exemple de code pour la fonctionnalité templateCache fournies dans AngularJS:

Ajout:

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

récupération via $ templateCache:

$templateCache.get('templateId.html') 

ou de récupération:

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

Answer 1

CachedResourceLoader est encore existante sans papier angulaire 2+ substitution pour AngularJS $templateCache:

Une mise en œuvre de ResourceLoader qui utilise un cache de modèle pour éviter de faire une ResourceLoader réelle.

Le cache de modèle doit être construit et chargé dans la fenêtre. $ TemplateCache via un mécanisme séparé .

Il est supposé fonctionner en fournissant ResourceLoader fournisseur:

{provide: ResourceLoader, useClass: CachedResourceLoader} 

Ce qui a déjà été défini dans l'exportation existant RESOURCE_CACHE_PROVIDER.

Et window.$templateCache est censé contenir des paires d'URL et de réponses.

Puisque ResourceLoader doit être spécifié avant la compilation, il doit être fourni non pas dans le module d'application mais dans les options du compilateur.

Voici an example:

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) 

Contrairement à AngularJS $templateCache, CachedResourceLoader ne permet pas de faire des demandes pour les modèles manquants. C'est un comportement souhaitable la plupart du temps. Si elle doit être modifiée, une implémentation personnalisée qui étend la valeur par défaut ResourceLoader implementation peut être utilisée à la place.