¿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?

Abhijith S
fuente
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
usuario3611927
fuente
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í

WasiF
fuente
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.

VIKAS KOHLI
fuente
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

Ace Valdez
fuente
4
ng g c folderName/SubFolder/.../componentName --spec=false 
SACHIN DUHAN
fuente
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

Sofía
fuente
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

esitarz
fuente
1

Sencillo

ng g component plainsight/some-name

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

Ahmed Adewale
fuente
1

Tratar de usar

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

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

Erich Benevides Diniz
fuente
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

Brian Akumah
fuente
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í

Brahmmeswara Rao Palepu
fuente
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!

Kavindu Narathota
fuente
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.

C_Ogoo
fuente
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
datta ambareesh
fuente
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

Ismail
fuente