typescript - instalar - ng server

¿Puedo pasar argumentos a angular-cli en tiempo de construcción?

Question

Me gustaría pasar argumentos personalizados a angular-cli al crear una aplicación Angular2 (mecanografía). es posible? ¿Cómo puedo acceder a estos argumentos en mi código?

El escenario es así: tengo una aplicación Angular2 con 2 diseños. Cada diseño tiene 3 colores (rojo, azul, verde). Quiero construir todas las combinaciones posibles. Una aplicación por diseño y color => layout1red, layout1green, layout2blue, ...

Quiero crear 6 archivos de configuración JSON para cada compilación donde defino el diseño y el color, y tal vez algunas propiedades adicionales.

Answer 1

Es posible crear múltiples archivos de configuración con @angular/cli .

Como se menciona en los docs los archivos de configuración personalizados se pueden agregar de la siguiente manera:

• crear un src/environments/environment.NAME.ts
• agregue { "NAME": ''src/environments/environment.NAME.ts'' } a las apps[0].environments objeto en .angular-cli.json
• --env=NAME a través del --env=NAME en los comandos de compilación / servicio.

Por lo tanto, es probable que necesite 6 archivos de configuración para dev y 6 archivos de configuración para prod.

Y luego, para acceder a esas variables, solo importe el objeto de environment.ts archivo environment.ts .

Answer 2

No entendí completamente tu pregunta, puedo pensar en dos maneras de hacer que esto suceda:

A- Pasando argumentos al generar un nuevo proyecto:

1- Para poder pasar argumentos al cli angular, necesita saber dónde quiere que se use.

Si esas configuraciones se utilizan en su diseño, puede bifurcar el clúster Angular y actualizarlo y agregar fácilmente su propia configuración.

Aquí está el modelo de componentes:

     angular-cli/packages/@angular/cli/blueprints/component/files/__path__/__name__.component.ts

Que se parece a esto:

@Component({
  selector: ''<%= selector %>'',<% if(inlineTemplate) { %>
  template: `

ves selector ? ese es el nombre del componente con el que puedes jugar y al final, cuando estés creando un nuevo proyecto, puedes pasar tus propias banderas allí y usarlo.

Pero esta no es la mejor idea porque siempre estás en problemas cuando Angular Cli se actualiza.

2- La otra solución posible es usar ng eject

Esto generará la configuración del webpack en un archivo separado y lo webpack en la carpeta raíz de su proyecto, luego podrá jugar con ese archivo, proporcionar su configuración y personalizarlo según su aplicación.

Pero una vez más, no estoy seguro de cómo quiere usar esa configuración.

Este es un candidato perfecto para su configuración de build time .

3- Usa la configuración de environments :

Como ya se ha respondido, esto también es muy conveniente para proporcionar una configuración de build time :

Sigue la respuesta de @mikedanylov y luego @mikedanylov así en tus archivos:

import { environment } from ''./environments/environment'';

if(environment.colorRed===''blue''){

     console.log(''the color is blue'');

}


 npm build -e=colorRed

B: Run time :

Esta es una mejor opción, puede crear una llamada en su index.html como esta:

  <script scr="wherever/configurations/blue"></script>

y luego dentro de la configuración podría tener:

  var configuration = {
      whatEver:"blue"
  }

y como se trata de un script, estará disponible en todas partes y podrá acceder a él en sus componentes:

export class MyComponent{


    ngOnInit(){
        console.log(''colour is : ''+window[''configuration.whatEver'']); // obviously you can improve this and create type definitions and what not.
    }
}

Esto le dará más flexibilidad para actualizar su configuración en el futuro sin tener que volver a construir su aplicación.

Obviamente, puedes hacer la misma llamada a través de una llamada Ajax, pero me parece que más arriba es más agnóstico de la aplicación.