Build CLI angulaire utilisant base-href et deploy-url pour accéder aux ressources sur CDN

Question

L'arrière-plan

Je suis Angulaire à l'aide de la CLI pour construire un projet (avec plusieurs applications). Je veux publier des applications sur des sous-chemins sur mon domaine, comme example.com/apps/app1/.

Si j'ai mis l' --base-href paramètre /apps/app1/ il résout toutes les questions concernant le routeur, et il se charge de l'actif (js, css, images, etc) très bien.

Si j'utilise l' Location de service, je peux l'utiliser

this.location.prepareExternalUrl('/assets/data/data.json')

pour résoudre chargement dynamique des actifs (ils seront résolues /apps/app1/assets/data/data.json).

So far So good. Mais maintenant, je veux servir de l'application de l'actif par l'intermédiaire d'un CDN, comme cdn.example.com, tandis que l'hébergement de l'application elle-même sur l'url d'origine example.com/apps/app1/. Alors maintenant, j'construire l'application à l'aide de:

 ng build -prod --app app1 --base-href "/apps/app1/" --deploy-url "http://cdn.example.com/app-assets/apps/app1/"

Cette fois, je l'applique à la fois l' --base-href et --deploy-url paramètres. Il fonctionne très bien en ce qu'il utilise la base href afin d'aider le Routeur résoudre l'URL et il charge les fichiers js et css de la CAN. Il résout également l'url de l'image des références dans les fichiers CSS à l'aide de la CAN url.

---

Le problème

Lors du chargement des images ou des données du dossier des ressources dynamiquement (dans un service ou d'un modèle), je ne peux pas trouver un bon moyen pour elle de résoudre les Url à l'aide de l' deploy-url configuration.

Si j'utilise l' Location de service, il utilise toujours l' base-href pour résoudre les url, de sorte

this.location.prepareExternalUrl('/assets/data/data.json')

va encore se résoudre à /apps/app1/assets/data/data.json au lieu de http://cdn.example.com/app-assets/apps/app1/assets/data/data.json.

Je me serais attendu à utiliser l' deploy-url de la valeur si celle-ci est définie, d'autant plus que ce serait une solution générale qui serait à l'œuvre lors de l'hébergement de fichiers sur le même domaine et lorsque l'hébergement des fichiers sur un domaine externe.

---

La question

Est-il un moyen de résoudre l'actif Url considérant à la fois l' base-href et de la deploy-url paramètres?

Idéalement, un officiel Angulaire de la fonction comme Location.prepareExternalUrl, mais si je peux obtenir la base href et déployez-les paramètres d'url à partir Angulaire d'une certaine façon, j'ai pu construire mon propre service de celle-ci.

Je ne voudrais pas définir l'Url dans l'environnement config depuis:

1. Il aurait besoin d'un environnement configs par application
2. Il crée un risque de conflit avec les valeurs fournies lors de la construction de l'application.

Answer 1

Pour accéder à la valeur --deploy-url lors de l'exécution de l'application, créez deploy-url.ts avec:

 export const DEPLOY_URL = new InjectionToken<string>('deployUrl');
 

Et utilisez cet extrait dans votre fichier main.ts:

 const deployUrl = (function() {
  const scripts = document.getElementsByTagName('script');
  const index = scripts.length - 1;
  const mainScript = scripts[index];
  return mainScript.src.replace(/main.*?\.js$/, '');
})();

const DEPLOY_URL_PROVIDER = {
  provide: DEPLOY_URL,
  useValue: deployUrl,
};

platformBrowserDynamic([DEPLOY_URL_PROVIDER])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));
 

L'idée est d'obtenir l'url du fichier Javascript actuellement exécuté, qui est main.js (ou main.hash.js si outputHashing est activé) et de supprimer le nom du fichier. Ensuite, dans vos services, injectez une valeur de --deploy-url avec @Inject(DEPLOY_URL) deployUrl: string comme paramètre constructeur.

Answer 2

Je suis tombé sur cette même situation exacte, et comme vous l'avez souligné dans The Background , la construction avec les ensembles base-href et deploy-url fonctionne, car nous sommes en mesure de servir nos CSS et fichiers js à partir d'un CDN tout en hébergeant l'application sur un autre serveur.

En tant que solution pour les actifs chargés dynamiquement dans nos modèles, nous avons écrit une API qui fournit des variables d'environnement à cet effet qui fournit les URL appropriées nécessaires par déploiement.

Answer 3

Voici comment j'ai fait pour quelques projets.

Définissez l'APP_BASE_HREF en utilisant une valeur dynamique définie par le serveur. Par exemple, Cookie et SPA le lit sur init. La fonction getBaseUrl lit simplement une valeur de cookie.

 { provide: APP_BASE_HREF, useFactory: () => getBaseUrl() }
 

Définissez deployUrl dans le cadre de votre processus CI. Vous devez définir dynamiquement la CONSTRUCTION et la VERSION. Cela peut être fait en utilisant un simple script shell.

 https://my-cloud.cloudfront.net/my-app/{BUILD}/{VERSION}/