Crea componente per modulo specifico con Angular-CLI

Sto iniziando a usare angular-cli e ho già letto molto per trovare una risposta su ciò che voglio fare ... nessun successo, quindi sono venuto qui.

C'è un modo per creare un componente in un nuovo modulo?

per esempio: ng g module newModule

ng g component newComponent (come aggiungere questo componente a newModule ??)

perché il comportamento predefinito di angular-cli è quello di inserire tutti i nuovi componenti app.module. Vorrei scegliere dove sarà il mio componente, in modo da poter creare moduli separati e non avere tutti i miei componenti all'interno app.module. È possibile farlo usando angular-cli o devo farlo manualmente?

Per creare un componente come parte di un modulo dovresti

1. ng g module newModule generare un modulo,
2. cd newModuleper cambiare directory nella newModulecartella
3. ng g component newComponent per creare un componente come figlio del modulo.

AGGIORNAMENTO: Angolare 9

Ora non importa in quale cartella ti trovi durante la generazione del componente.

1. ng g module NewMoudle per generare un modulo.
2. ng g component new-module/new-component per creare NewComponent.

Nota: quando la CLI angolare rileva new-module / new-component, comprende e traduce il caso in modo che corrisponda a new-module -> NewModule e new-component -> NewComponent. All'inizio può creare confusione, quindi un modo semplice è quello di abbinare i nomi in # 2 con i nomi delle cartelle per il modulo e il componente.

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

Non sono sicuro se forse la risposta di Alexander Ciesielski fosse corretta al momento della stesura, ma posso verificare che non funziona più. Non importa quale directory nel progetto si esegue la CLI angolare. Se digiti

ng g component newComponent

genererà un componente e lo importerà nel file app.module.ts

L'unico modo in cui è possibile utilizzare la CLI per importarla automaticamente in un altro modulo è specificando

ng g component moduleName/newComponent

dove moduleName è un modulo che hai già definito nel tuo progetto. Se moduleName non esiste, inserirà il componente nella directory moduleName / newComponent ma lo importerà comunque in app.module

Non ho trovato una risposta che mostrasse come utilizzare il cli per generare un componente all'interno di una cartella del modulo di livello superiore e inoltre il componente ha aggiunto automaticamente la raccolta di dichiarazioni del modulo.

Per creare il modulo esegui questo:

ng g module foo

Per creare il componente all'interno della cartella del modulo foo e aggiungerlo alla raccolta di dichiarazioni di foo.module.ts, eseguire questo:

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

E il cli impalcerà il modulo e il componente in questo modo:

--EDIT la nuova versione del cli angolare si comporta in modo diverso. 1.5.5 non vuole un nome di file del modulo, quindi dovrebbe essere il comando con v1.5.5

ng g component foo/fooList --module=foo

Puoi provare sotto il comando, che descrive il,

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

Quindi il tuo comando sarà come:

ng g c user/userComponent -m user.module

Per Angular v4 e versioni successive, utilizzare semplicemente:

ng g c componentName -m ModuleName

Questo è ciò che ha funzionato per me :

1 -->  ng g module new-module

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

Se vuoi generare un componente senza la sua directory usa --flat flag.

1. Innanzitutto, si genera un modulo eseguendo.

ng g m modules/media

questo genererà un modulo chiamato mediaall'interno della modulescartella.

2. In secondo luogo, si genera un componente aggiunto a questo modulo

ng g c modules/media/picPick --module=modules/media/media.module.ts

la prima parte del comando ng g c modules/media/picPickgenererà una cartella componente chiamata picPickdentro la modules/mediacartella che contiene il nostro nuovo mediamodulo.

la seconda parte farà picPickdichiarare il nostro nuovo componente nel mediamodulo importandolo nel file del modulo e aggiungendolo alla declarationsmatrice di questo modulo.

Vai al livello del modulo / possiamo anche essere nel livello principale e digitare i comandi seguenti

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

Esempio :

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

Primo modulo di generazione:

ng g m moduleName --routing

Ciò creerà una cartella moduleName, quindi passa alla cartella del modulo

cd moduleName

E dopo che genera componente:

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

Utilizzare --flat per non creare la cartella figlio all'interno della cartella del modulo

Sto riscontrando problemi simili con più moduli nell'applicazione. Un componente può essere creato su qualsiasi modulo, quindi prima di creare un componente dobbiamo specificare il nome del modulo particolare.

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

Usa questo semplice comando:

ng g c users/userlist

users: Il nome del tuo modulo.

userlist: Il nome del componente.

Secondo i documenti angolari, il modo di creare un componente per un modulo specifico è,

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

"nome directory" = dove la CLI ha generato il modulo funzione

Esempio :-

ng generate component customer-dashboard/CustomerDashboard

Ciò genera una cartella per il nuovo componente all'interno della cartella dashboard cliente e aggiorna il modulo funzione con CustomerDashboardComponent

Prima esecuzione ng g module newModule . Quindi corring g component newModule/newModule --flat

Ho creato un modulo figlio basato su componenti con una cartella principale specifica

Quel comando cli qui sotto ho specificato, per favore controlla

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

La riparazione è la cartella principale del nostro modulo figlio

-m è --module

c per il conteggio

g per generare

Mi sono imbattuto in questo problema oggi durante l'impalcatura di un'applicazione Angular 9. Ho ricevuto il "errore del modulo non esiste" ogni volta che ho aggiunto il .module.tso .moduleal nome del modulo. Il cli necessita solo del nome del modulo senza estensione. Supponendo che avessi un nome di modulo:, brands.module.tsil comando che ho usato era

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

rimuovere --dry-rununa volta confermato che la struttura del file è corretta.

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

esempio:

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

Un modello comune è quello di creare una funzione con un percorso, un modulo caricato pigro e un componente.

Itinerario: myapp.com/feature

app-routing.module.ts

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

Struttura del file:

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

Tutto ciò può essere fatto nel cli con:

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

O più breve

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

Oppure, se si lascia fuori il nome, il client lo richiederà. Molto utile quando è necessario creare diverse funzionalità

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

Aggiungi un componente all'app Angular 4 usando la CLI angolare

Per aggiungere un nuovo componente Angular 4 all'app, utilizzare il comando ng g component componentName. Dopo l'esecuzione di questo comando, la CLI angolare aggiunge una cartella component-namein src\app. Inoltre, i riferimenti dello stesso vengono aggiunti src\app\app.module.tsautomaticamente al file.

Un componente deve avere una @Componentfunzione di decorazione seguita da una classche deve essere modificata export. La @Componentfunzione decoratore accetta i metadati.

Aggiungi un componente a una cartella specifica dell'app Angular 4 usando la CLI angolare

Per aggiungere un nuovo componente a una cartella specifica, utilizzare il comando ng g component folderName/componentName

Se hai più app dichiarate in .angular-cli.json (ad esempio nel caso in cui lavori sul modulo funzione)

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

Puoi :

ng g c my-comp -a app-name

-a sta per --app (nome)

Uso questo particolare comando per generare componenti all'interno di un modulo.

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

Questo comando genererà il componente locale al modulo. oppure È possibile modificare prima la directory digitando.

cd <module-directory-name>

e quindi creare il componente.

ng g c <component-name>

Nota: il codice racchiuso tra <> rappresenta nomi specifici dell'utente.

1.- Crea il tuo modulo funzionale come al solito.

ng generate module dirlevel1/module-name

2.- Puoi specificare il PERCORSO ROOT del tuo progetto in --module (solo in --module, (/) punti radice al tuo ROOT DI PROGETTO e NON È IL ROOT DI SISTEMA !!! )

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

Esempio reale:

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 

Produzione:

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!

Testato con CLI angolare: 9.1.4

Crea un modulo, servizio e componente in particolare modulo

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)