¿Cómo generar componentes en una carpeta específica con angular-cli?


220

Estoy usando angualr4 con angular-cli y puedo crear un nuevo componente con el siguiente comando.

E:\HiddenWords>ng generate component plainsight

Pero necesito generar un componente hijo dentro de la vista general. ¿Hay alguna manera de hacer con angular-cli?


15
ng generar componente su / ruta / de / the / app / folder / plainsight
maxime1992

44
como @Maxime mencionó, o cd en el directorio
Z. Bagley

Respuestas:


124

El ng g component plainsight/some-namehace un nuevo directorio cuando lo usamos.

El resultado final será:

plainsight/some-name/some-name.component.ts

Para evitar eso, utilice la opción plana ng g component plainsight/some-name --flat y generará los archivos sin crear una nueva carpeta

plainsight/some-name.component.ts

11
¡La opción --flat es lo que estaba buscando!
accidente

1
@ user3611927 --flat es la respuesta, ya que usará carpetas existentes y solo creará carpetas que no existen. ¡¡Perfecto!! Este debería ser el comportamiento predeterminado en mi humilde opinión
Andrew Day el

38

Método rápido, simple y sin errores

es decir, desea crear un componente en una app/componentcarpeta, luego siga estos pasos

  1. Haga clic derecho en la carpeta en la que desea crear el componente
  2. Seleccionar Open in Command Promptopcion
  3. En la nueva terminal (verá la ruta seleccionada), luego escriba ng g c my-new-component

También puedes consultar este proceso a través de esta imagen

ingrese la descripción de la imagen aquí


1
Eres un genio o solo estoy fokin stoopid ... ¡La mejor manera!
Ap0st0l

19

ng g c component-name

Para especificar una ubicación personalizada: ng g c specific-folder/component-name

aquí component-namese creará dentro de una carpeta específica.

Enfoque Similarl se puede utilizar para la generación de otros componentes como directive, pipe, service, class, guard, interface, enum, module, etc.


12

código más corto para generar componente: ng g c component-name
para especificar su ubicación:ng g c specific-folder/component-name


Información adicional
más código más corto para generar directiva: ng g d directive-name
para especificar su ubicación:ng g d specific-folder/directive-name



4

Las opciones anteriores no me funcionaban porque, a diferencia de la creación de un directorio o archivo en el terminal, cuando la CLI genera un componente, agrega la ruta src / app de manera predeterminada a la ruta que ingresa.

Si genero el componente desde mi carpeta principal de la aplicación de esta manera (MANERA INCORRECTA)

ng g c ./src/app/child/grandchild 

El componente que se generó fue este:

src/app/src/app/child/grandchild.component.ts

así que solo tuve que escribir

ng g c child/grandchild 

Espero que esto ayude a alguien


3

No tuve suerte con las respuestas anteriores (incluidas --flat), pero lo que funcionó para mí fue:

cd path/to/specific/directory

A partir de ahí, corrí el ng g c mynewcomponent


1

Sencillo

ng g component plainsight/some-name

Creará la carpeta "plainsight" y generará algún componente de nombre dentro de ella.


1

Tratar de usar

ng g component plainsight/some-name.component.ts

O pruébelo manualmente, si se siente más cómodo.


1

Una vez que esté en el directorio de su proyecto. use cd path/to/directoryluego use ng g c component_name --spec=falselo automatiza todo y está libre de errores

los g cmedios generan componente


1

Vaya a la carpeta del proyecto en el símbolo del sistema o en la Terminal del proyecto.

Ejecute cmd: ng gc componentname

ingrese la descripción de la imagen aquí


1

Angular CLI proporciona todos los comandos que necesita en el desarrollo de su aplicación. Para sus requisitos específicos, puede usar fácilmente ng g( ng generate) para realizar el trabajo.

ng g c directory/component-namegenerará component-namecomponente en la directorycarpeta.

A continuación se muestra un mapa de algunos comandos simples que puede usar en su aplicación.

  1. ng g c comp-nameo ng generate component comp-namepara crear un componente con el nombre 'nombre-comp'
  2. ng g s serv-nameo ng generate service serv-namepara crear un servicio con el nombre 'serv-name'
  3. ng g m mod-nameo ng generate module mod-namepara crear un módulo con el nombre 'nombre-mod'
  4. ng g m mod-name --routingo ng generate module mod-name --routingpara crear un módulo con el nombre 'nombre-mod' con enrutamiento angular

¡Espero que esto ayude!

¡Buena suerte!


1

Si usa VSCode, considere usar la consola angular

Proporciona una interfaz para la CLI angular. Verá una opción para especificar la ruta.

La CLI angular es inmensamente potente y extensible. De hecho, hay tantas capacidades que es útil para los desarrolladores tener todas las diferentes opciones de configuración para cada comando disponible para ellos.

¡Con Angular Console, obtendrá recomendaciones y podrá acceder incluso a las funciones más fáciles de olvidar o de usar raramente!

Angular Console es, ante todo, una forma más productiva de trabajar con lo que proporciona Angular CLI.


0

En primer lugar, para crear un componente que necesita usar: -

  • ng nombrecomponente gc

    Al usar el comando anterior, se creará un nuevo componente en una carpeta con
    (nombre de componente) que especificó anteriormente.

Pero si necesita crear un componente dentro de otro componente o en una carpeta específica: -

  • ng gc componentname / newComponentName

0

Necesidad de usar --dryRun cuando se usa un directorio personalizado

Puede pasar su ruta de directorio personalizada junto con el ngcomando.

ng g c myfolder\mycomponent

Pero hay posibilidades de que no deletree la ruta y se cree una nueva carpeta o se cambien los directorios de destino. Por esta razón dryRunes muy útil. Muestra una salida de cómo se verán afectados los cambios.
ingrese la descripción de la imagen aquí

Después de verificar el resultado, puede ejecutar el mismo comando sin -drealizar los cambios.

--dryRun = verdadero | falso

Cuando es verdadero, se ejecuta e informa de la actividad sin escribir resultados.

Predeterminado: falso

Alias: -d

Doc oficial: - https://angular.io/cli/generate

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.