Crear componente para módulo específico con Angular-CLI


170

Estoy empezando a usar angular-cli y ya he leído mucho para encontrar una respuesta sobre lo que quiero hacer ... sin éxito, así que vine aquí.

¿Hay alguna manera de crear un componente para un nuevo módulo?

p.ej: ng g module newModule

ng g component newComponent (¿Cómo agregar este componente a newModule ??)

porque el comportamiento predeterminado de angular-cli es poner todos los componentes nuevos dentro app.module. Me gustaría elegir dónde estará mi componente, de modo que pueda crear módulos separados y no tenga todos mis componentes dentro app.module. ¿Es posible hacerlo usando angular-cli o tengo que hacerlo manualmente?

Respuestas:


216

Para crear un componente como parte de un módulo, debe

  1. ng g module newModule para generar un módulo,
  2. cd newModulecambiar el directorio a la newModulecarpeta
  3. ng g component newComponent para crear un componente como hijo del módulo.

ACTUALIZACIÓN: Angular 9

Ahora no importa en qué carpeta se encuentre al generar el componente.

  1. ng g module NewMoudle para generar un módulo.
  2. ng g component new-module/new-component para crear NewComponent.

Nota: cuando la CLI angular ve un módulo nuevo / componente nuevo, entiende y traduce el caso para que coincida con módulo nuevo -> Módulo nuevo y componente nuevo -> Componente nuevo. Puede ser confuso al principio, por lo que una manera fácil es hacer coincidir los nombres en el n. ° 2 con los nombres de las carpetas para el módulo y el componente.


92
También puede permanecer en la raíz del proyecto y prefijar el componente con el nombre del módulo ng g component moduleName/componentName.
JayChase

3
Con Angular CLI versión 1.6.8, siempre recibía un mensaje de error que decía que 'el módulo especificado no existe', cuando separo un módulo existente. Funcionó cuando probé el siguiente comando: ng generate service service1 --module = module1 / module1.module.ts . Nota: mi nombre de servicio es service1 y mi nombre de módulo es module1
Diallo

8
Esto crearía un nuevo componente en el directorio especificado pero no lo registraría en el módulo. Lo registrará en el app.module. necesitaría especificar el módulo con la --moduleopción como:ng g component <your component> --module=<your module name>
Vinit Sarvade el

3
desactualizado a partir del 6 de octubre, Angular 6
tom87416

44
Anticuado. Angular 6 no depende de las estructuras de carpetas para ver en qué módulo se encuentra el componente. Dos módulos pueden estar en el mismo directorio. @ daniel's answer stackoverflow.com/a/44812014/511719 funciona para Angular 6.
imafish

145
ng g component nameComponent --module=app.module.ts

10
las otras respuestas funcionan, pero esta es la más eficiente. Vale la pena agregar --dry-runal final de eso solo para ver qué se verá afectado, es un buen control de cordura
tony09uk 12/12/18

ng g component path/to/myComponent --module=app.module.ts --dry-runes un comando muy útil; solo para asegurarse de que su componente esté creado en el directorio correcto.
theman0123

74

No estoy seguro si tal vez la respuesta de Alexander Ciesielski era correcta al momento de escribir, pero puedo verificar que esto ya no funciona. No importa en qué directorio del proyecto ejecute la CLI angular. Si escribes

ng g component newComponent

generará un componente y lo importará al archivo app.module.ts

La única forma en que puede usar CLI para importarlo automáticamente a otro módulo es especificando

ng g component moduleName/newComponent

donde moduleName es un módulo que ya ha definido en su proyecto. Si el moduleName no existe, colocará el componente en el directorio moduleName / newComponent pero aún lo importará en app.module


2
fue la respuesta correcta para mí en ese momento ... funciona correctamente. Creo una solicitud de extracción para agregar esta información a los documentos. Uno de sus colaboradores me pide que elimine la parte de CD ... al final será 1. ng g module newModule 2. ng g component new-module/newComponentsegún él debería ser un módulo nuevo en lugar de un módulo nuevo
Elmer Dantas

Solo para señalar, utilizando la técnica de Alexander Ciesielski y funciona como se esperaba. Debo señalar que no necesitaba crear un componente, simplemente necesitaba crear una carpeta. Así que solo mkdiruna carpeta, y luego ejecuté ng component newComponent dentro de la carpeta recién creada.
Charlie-Greenman

2
Yo diría que la respuesta completa esng g component moduleName/newComponent -m moduleName
slavugan

En mi caso, el nombre del componente es el mismo que el nombre del módulo, así que creé el módulo con ng generate module {modComName}1) Creé la carpeta 2) Creé un archivo de módulo dentro de la carpeta del mismo nombre; el comando en ng generate component {modComName}realidad 1) creó un archivo de componente dentro de la carpeta del mismo nombre 2) modificó el módulo para importar el componente
The Red Pea

Tenga cuidado si crea un módulo y lo importa a un módulo base; ngagrega importaciones al final de la matriz; pero es posible que desee: "El orden de las rutas en la configuración es importante y esto es por diseño".
The Red Pea

37

No encontré una respuesta que mostrara cómo usar el cli para generar un componente dentro de una carpeta de módulo de nivel superior, y también hacer que el componente agregue automáticamente la colección de declaración del módulo.

Para crear el módulo, ejecute esto:

ng g module foo

Para crear el componente dentro de la carpeta del módulo foo y agregarlo a la colección de declaraciones de foo.module.ts, ejecute esto:

ng g component foo/fooList --module=foo.module.ts

Y el cli desplegará el módulo y el componente de esta manera:

ingrese la descripción de la imagen aquí

- EDITAR la nueva versión del cli angular se comporta de manera diferente. 1.5.5 no quiere un nombre de archivo de módulo, por lo que el comando con v1.5.5 debería ser

ng g component foo/fooList --module=foo

1
Yay por el --moduleargumento; los documentos dicen "Permite la especificación del módulo de declaración". ; Agregaría --moduleespecifica qué módulo existente debe modificarse para importar el módulo que está a punto de crear
The Red Pea

2
@TheRedPea Creo que querías decir "--module especifica qué módulo existente debe modificarse para importar el componente que eres ..."
cobolstinks

Sí tienes razón! Módulo existente modificado con referencia a un nuevo componente
The Red Pea

13

Puede probar el siguiente comando, que describe el,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

Entonces su comando será como:

ng g c user/userComponent -m user.module

9

Para Angular v4 y superior, simplemente use:

ng g c componentName -m ModuleName

1
Lanza un error Specified module does not existmientras que el módulo existía
Pardeep Jain

1
No especifica el nombre del módulo, especifica el nombre de archivo del módulo.
Roger

1
Funciona como encanto! por ejemplo, si su archivo de módulo es user-settings.module.tsy desea agregar un componente public-info, el comando será:ng g c PublicInfo -m user-settings
Spiral Out

1
¡Esta es la respuesta más simple y limpia!
Barna Tekse

8

Esto es lo que funcionó para mí:

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

Si desea generar un componente sin su directorio, use el --flat indicador.


no es necesario escribir .ts
Lapenkov Vladimir

--module = path-to-module trabajó de mí gracias @Mohamed Makkaoui
Ian Poston Framer

8
  1. Primero, genera un módulo ejecutando.
ng g m modules/media

Esto generará un módulo llamado mediadentro de la modulescarpeta.

  1. En segundo lugar, genera un componente agregado a este módulo
ng g c modules/media/picPick --module=modules/media/media.module.ts

la primera parte del comando ng g c modules/media/picPickgenerará una carpeta componente llamada picPickdentro de la modules/mediacarpeta que contiene nuestro nuevo mediamódulo.

la segunda parte hará que nuestro nuevo picPickcomponente se declare en el mediamódulo al importarlo en el archivo del módulo y agregarlo a la declarationsmatriz de este módulo.

árbol de trabajo

ingrese la descripción de la imagen aquí


2
¿Puede explicar más cómo responde esto a la pregunta?
Sterling Archer el

Gracias por su nota, edité mi respuesta ya que soy un futuro lector @CertainPerformance
Elhakim

3

Ir al nivel del módulo / también podemos estar en el nivel raíz y escribir los comandos a continuación

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

Ejemplo:

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

3

Primero generar módulo:

ng g m moduleName --routing

Esto creará una carpeta moduleName y luego navegará a la carpeta module

cd moduleName

Y después de eso generar componente:

ng g c componentName --module=moduleName.module.ts --flat

Use --flat para no crear una carpeta secundaria dentro de la carpeta del módulo


1

Tengo problemas similares con varios módulos en la aplicación. Se puede crear un componente para cualquier módulo, por lo que antes de crear un componente debemos especificar el nombre del módulo en particular.

'ng generate component newCompName --module= specify name of module'

1

Use este comando simple:

ng g c users/userlist

users: El nombre de tu módulo.

userlist: El nombre de su componente.


1

Según los documentos de Angular, la forma de crear un componente para un módulo específico es,

ng g component <directory name>/<component name>

"nombre de directorio" = donde la CLI generó el módulo de características

Ejemplo:

ng generate component customer-dashboard/CustomerDashboard

Esto genera una carpeta para el nuevo componente dentro de la carpeta del panel del cliente y actualiza el módulo de características con CustomerDashboardComponent


1

Primera carrera ng g module newModule . Entonces correng g component newModule/newModule --flat


1

Creé un módulo secundario basado en componentes con una carpeta raíz específica

Ese comando cli a continuación que especifiqué, echa un vistazo

ng g c Repair/RepairHome -m Repair/repair.module

Repair is Root Folder de nuestro módulo hijo

-m es --módulo

c para compuesto

g para generar


1

Me encontré con este problema hoy mientras andamiaba una aplicación Angular 9. Obtuve el "error de módulo no existe" cada vez que agregué el .module.tso .moduleal nombre del módulo. El cli solo necesita el nombre del módulo sin extensión. Suponiendo que tuviera un nombre de módulo: brands.module.tsel comando que usé fue

ng g c path/to/my/components/brands-component -m brands --dry-run

elimine --dry-rununa vez que haya confirmado que la estructura del archivo es correcta.


1
ng g c componentName --module=path-to-your-module-from-src-folder

ejemplo:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

1

Un patrón común es crear una característica con una ruta, un módulo con carga lenta y un componente.

Ruta: myapp.com/feature

app-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

Estructura de archivo:

app   
└───my-feature
      my-feature-routing.module.ts
      my-feature.component.html
      my-feature.component.css
      my-feature.component.spec.ts
      my-feature.component.ts
      my-feature.module.ts

Todo esto se puede hacer en el cli con:

ng generate module my-feature --module app.module --route feature

O más corto

ng g m my-feature --module app.module --route feature

O si omite el nombre, el cli lo solicitará. Muy útil cuando necesita crear varias funciones.

ng g m --module app.module --route feature

0

Agregue un componente a la aplicación Angular 4 usando Angular CLI

Para agregar un nuevo componente Angular 4 a la aplicación, use el comando ng g component componentName. Después de la ejecución de este comando, Angular CLI agrega una carpeta component-namedebajo src\app. Además, las referencias de la misma se agregan al src\app\app.module.tsarchivo automáticamente.

Un componente tendrá una @Componentfunción decoradora seguida de una classque necesita ser exporteditada. La @Componentfunción decoradora acepta metadatos.

Agregue un componente a una carpeta específica de la aplicación Angular 4 usando CLI angular

Para agregar un nuevo componente a una carpeta específica, use el comando ng g component folderName/componentName


0

Si tiene varias aplicaciones declaradas en .angular-cli.json (por ejemplo, en caso de trabajar en el módulo de funciones)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

Usted puede :

ng g c my-comp -a app-name

-a significa --app (nombre)


0

Utilizo este comando particular para generar componentes dentro de un módulo.

ng g c <module-directory-name>/<component-name>

Este comando generará un componente local para el módulo. o Puede cambiar el directorio primero escribiendo.

cd <module-directory-name>

y luego crear componente.

ng g c <component-name>

Nota: el código encerrado en <> representa nombres específicos del usuario.


0

1.- Cree su módulo de características como de costumbre.

ng generate module dirlevel1/module-name

2.- Puede especificar la RUTA DE RAÍZ de su proyecto en --module (solo en --module, (/) puntos raíz a su RAÍZ DE PROYECTO y NO ES LA RAÍZ DEL SISTEMA !!! )

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

Ejemplo real:

ng generate module stripe/payment-methods-list
ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

Salida:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Probado con CLI angular: 9.1.4


0

Hacer un módulo, servicio y componente en particular módulo

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)
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.