angular: cómo cambiar dinámicamente el contenido en el archivo index.html al ejecutar el comando ng-build

Esta sección fue evaluado por especialistas así garantizamos la exactitud de nuestra esta división.

Solución:

En angular.json puede configurar el archivo de índice que se usará (estoy usando Angular 8):

"projects": 
    "projectName": 
        "architect": 
            "build": 
                "options": 
                    "index": "src/index.html", // this is the default location (also for ng serve)
                    "configurations": 
                        "production": 
                            "index": "index-prod.html" // this is the prod version (you can also link it to /prod/index.html or whatever: it will be placed in the dist root folder with the provided name)
                        ,
                        "development": 
                            "index": "index-whatever.html" // this is the version for ng build --configuration=development`
                        
                    
                
            /*, UPDATED: THIS DOESN'T WORK
            "serve": 
                "index": "dev/index.html" // file to be used in ng serve
            */
        
    

AFAIK ninguno de esos "index"s es obligatorio, excepto el primero

Nota al margen: esto es lo que acabo de probar con algunos intentos, compilaciones y ng serves. No lo encontré en ninguna documentación.

Revísalo y hazme saber.

===========

ACTUALIZACIÓN 19 de octubre de 2019: noté que la configuración informada anteriormente todavía usa src/index.html También por serve en "@angular/cli": "^8.3.6", "@angular/compiler-cli": "^8.2.8". Parece que no hay anulación para serve sí mismo. Mi pregunta es: deberían serve heredar siempre la base index ¿configuración?

Tratando de cavar un poco más, encontré esto: https://github.com/angular/angular-cli/issues/14599

Hay un ejemplo de cómo debería funcionar con la nueva CLI, pero al intentar reemplazar la

"development": 
    index": "index-whatever.html"

con un

"development": 
    index": 
        "input": "index-whatever.html"
    

y construyendo, me da un
Schema validation failed with the following errors: Data path ".index" should be string.

===========

ACTUALIZACIÓN 10 de abril de 2020:

Me acabo de dar cuenta de que en la actualización de octubre me perdí una cita en el fragmento de código más reciente. No recuerdo si se copió directamente de mi código, por lo tanto, el error informado podría estar relacionado con eso, o si fue un error de escritura cuando intenté reescribir el código. Volveré a consultar cada vez que tenga tiempo

Para las versiones actuales de Angular desde v6.1.0-beta.2 en adelante, puede usar el fileReplacements valor en el angular.json configuraciones de archivos como se detalla en esta respuesta: https://stackoverflow.com/a/57274333/228429 by @massic80.

Más información aquí: https://github.com/angular/angular-cli/issues/4451#issuecomment-395651237

Para versiones anteriores a v6.1.0-beta.2, Angular CLI no proporciona ninguna de estas características. Pero puede usar variables de entorno para inyectar secuencias de comandos adecuadas dinámicamente en tiempo de ejecución.

P.ej:

main.ts

import  env  from './environments/environment';

if (env.production) 
   const script = document.createElement('script');
   script.src = https://my-site.net/prod.js
   document.head.appendChild(script);
 else 
   const script = document.createElement('script');
   script.src = https://my-site.net/dev.js
   document.head.appendChild(script);

Lea más aquí: https://github.com/angular/angular-cli/issues/4451#issuecomment-285329985

Si quieres seguir con el estándar src/index.html sirviendo localmente por querer tener especialistas index.html archivos por configuración de producción / prueba (como fue en mi caso, donde se aplicaron diferentes fragmentos de código de Google Analytics) hágalo simplemente:

1. Cree directorios separados, cada uno con una versión dedicada de index.html. P.ej.:

src/prod/index.htmlsrc/test/index.html

2. Dejar angular.json saber sobre ellos, por configuración:

"configurations": 
    "production": 
        "fileReplacements": [
            
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            
        ],
        "index": "src/index/prod/index.html",
        // other stuff
    ,
    "test":  
        "fileReplacements": [
            
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
            
        ],
        "index": "src/index/test/index.html",
        // other stuff
    
    // other stuff

Tienes la posibilidad compartir esta crónica si te fue útil.

---

---

Utiliza Nuestro Buscador