Crea componente per modulo specifico con Angular-CLI


170

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?

Risposte:


216

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.


92
Puoi anche rimanere nella radice del progetto e aggiungere il prefisso al componente con il nome del modulo ng g component moduleName/componentName.
JayChase

3
Con Angular CLI versione 1.6.8, ho sempre avuto l'errore di scoprire che "il modulo specificato non esiste", quando separo un modulo esistente. Ha funzionato quando ho provato il seguente comando: ng generate service service1 --module = module1 / module1.module.ts . Nota: il mio nome del servizio è service1 e il mio nome del modulo è module1
Diallo,

8
Ciò creerebbe un nuovo componente nella directory specificata ma non lo registrerebbe nel modulo. Lo registrerà nel modulo app. dovresti specificare il modulo con l' --moduleopzione come:ng g component <your component> --module=<your module name>
Vinit Sarvade,

3
obsoleto dal 6 ottobre, 6 angolare
tom87416

4
Obsoleto. L'angolo 6 non dipende dalle strutture delle cartelle per vedere in quale modulo si trova il componente. Due moduli possono trovarsi nella stessa directory. @ Daniel risposta stackoverflow.com/a/44812014/511719 lavora per angolare 6.
imafish

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

10
le altre risposte funzionano, ma questa è la più efficiente. Vale la pena aggiungerlo --dry-runalla fine solo per vedere cosa sarà interessato, è un buon controllo di sanità mentale
tony09uk

ng g component path/to/myComponent --module=app.module.ts --dry-runè un comando molto utile; solo per assicurarsi che il componente sia creato nella directory corretta.
theman0123

74

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


2
era la risposta giusta per me in quel momento ... funziona correttamente. Creo una richiesta pull per aggiungere queste informazioni ai documenti. Uno dei suoi collaboratori mi chiede di rimuovere la parte cd-ing .. alla fine sarà 1. ng g module newModule 2. ng g component new-module/newComponentsecondo lui dovrebbe essere new-module invece di newModule
Elmer Dantas

Solo per sottolineare, usando la tecnica di Alexander Ciesielski e funziona come previsto. Dovrei notare che non avevo bisogno di creare componenti necessari semplicemente per creare una cartella. Quindi ho solo mkdiruna cartella, quindi ho eseguito ng componente newComponent all'interno della cartella appena creata.
Charlie-Greenman,

2
Direi che la risposta completa èng g component moduleName/newComponent -m moduleName
slavugan,

Nel mio caso il nome del componente è uguale al nome del modulo, quindi ho creato il modulo con ng generate module {modComName}1) Creato la cartella 2) Creato un file del modulo all'interno della cartella con lo stesso nome; il comando in ng generate component {modComName}realtà 1) Creato un file componente all'interno della cartella con lo stesso nome 2) Modificato il modulo per importare il componente
Il pisello rosso

Fai attenzione se crei un modulo e lo importi in un modulo base; ngaggiunge le importazioni alla fine dell'array; ma potresti volere: "L'ordine dei percorsi nella configurazione è importante e questo è in base alla progettazione".
The Red Pea,

37

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:

inserisci qui la descrizione dell'immagine

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

1
Yay per l' --moduleargomento; i documenti dicono "Permette la specifica del modulo dichiarante". ; Vorrei aggiungere --modulespecifica quale modulo esistente dovrebbe essere modificato per importare il modulo che si sta per creare
The Red Pea,

2
@TheRedPea Credo che volessi dire "--module specifica quale modulo esistente dovrebbe essere modificato per importare il componente che sei ..."
cobolstinks

Sì hai ragione! Modulo esistente modificato con riferimento al nuovo componente
Il pisello rosso

13

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

9

Per Angular v4 e versioni successive, utilizzare semplicemente:

ng g c componentName -m ModuleName

1
Genera un errore Specified module does not existmentre esisteva il modulo
Pardeep Jain,

1
Non si specifica il nome del modulo, si specifica il nome del file del modulo.
Roger,

1
Funziona come il fascino! ad esempio, se il file del modulo è user-settings.module.tse si desidera aggiungere un componente, public-infoil comando sarà:ng g c PublicInfo -m user-settings
Spiral Out

1
Questa è la risposta più semplice e pulita!
Barna Tekse,

8

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.


non c'è bisogno di scrivere .ts
Lapenkov Vladimir il

--module = path-to-module ha funzionato da me grazie @Mohamed Makkaoui
Ian Poston Framer

8
  1. Innanzitutto, si genera un modulo eseguendo.
ng g m modules/media

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

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

albero funzionante

inserisci qui la descrizione dell'immagine


2
Puoi per favore spiegare di più su come questo risponde alla domanda?
Sterling Archer,

Grazie per la tua nota, ho modificato la mia risposta poiché sono un futuro lettore @CertainPerformance
Elhakim

3

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

3

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


1

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'

1

Usa questo semplice comando:

ng g c users/userlist

users: Il nome del tuo modulo.

userlist: Il nome del componente.


1

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


1

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


1

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


1

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.


1
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

1

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

0

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


0

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)


0

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.


0

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


0

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)
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.