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

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?

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.

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

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

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:

- 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

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

Para Angular v4 y superior, simplemente use:

ng g c componentName -m ModuleName

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.

1. Primero, genera un módulo ejecutando.

ng g m modules/media

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

2. 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.

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

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

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'

Use este comando simple:

ng g c users/userlist

users: El nombre de tu módulo.

userlist: El nombre de su componente.

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

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

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

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.

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

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

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

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)

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.

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

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)