Créer un composant vers un module spécifique avec Angular-CLI


170

Je commence à utiliser angular-cli et j'ai déjà beaucoup lu pour trouver une réponse sur ce que je veux faire ... pas de succès, alors je suis venu ici.

Existe-t-il un moyen de créer un composant dans un nouveau module?

par exemple: ng g module newModule

ng g component newComponent (comment ajouter ce composant à newModule ??)

parce que le comportement par défaut angular-cli est de mettre tous les nouveaux composants à l'intérieur app.module. Je voudrais choisir où sera mon composant, afin de pouvoir créer des modules séparés et ne pas avoir tous mes composants à l'intérieur app.module. Il est possible de le faire en utilisant angular-cli ou dois-je le faire manuellement?

Réponses:


216

Pour créer un composant dans le cadre d'un module, vous devez

  1. ng g module newModule pour générer un module,
  2. cd newModulepour changer de répertoire dans le newModuledossier
  3. ng g component newComponent pour créer un composant en tant qu'enfant du module.

MISE À JOUR: Angular 9

Maintenant, peu importe le dossier dans lequel vous vous trouvez lors de la génération du composant.

  1. ng g module NewMoudle pour générer un module.
  2. ng g component new-module/new-component pour créer NewComponent.

Remarque: lorsque la CLI angulaire voit new-module / new-component, elle comprend et traduit le cas pour correspondre à new-module -> NewModule et new-component -> NewComponent. Cela peut être déroutant au début, donc un moyen simple est de faire correspondre les noms dans # 2 avec les noms de dossier pour le module et le composant.


92
Vous pouvez également rester à la racine du projet et préfixer le composant avec le nom du module ng g component moduleName/componentName.
JayChase

3
Avec Angular CLI version 1.6.8, j'obtenais toujours une erreur en disant que «le module spécifié n'existe pas», lorsque je séparais un module existant. Cela a fonctionné lorsque j'ai essayé la commande suivante: ng generate service service1 --module = module1 / module1.module.ts . Remarque: mon nom de service est service1 et mon nom de module est module1
Diallo

8
Cela créerait un nouveau composant dans le répertoire spécifié mais ne l'enregistrerait pas dans le module. Il l'enregistrera dans l'app.module. vous auriez besoin de spécifier le module avec l' --moduleoption comme:ng g component <your component> --module=<your module name>
Vinit Sarvade

3
obsolète au 6 octobre, Angular 6
tom87416

4
Dépassé. Angular 6 ne dépend pas des structures de dossiers pour voir dans quel module se trouve le composant. Deux modules peuvent être dans le même répertoire. @ réponse de daniel stackoverflow.com/a/44812014/511719 fonctionne pour Angular 6.
imafish

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

10
les autres réponses fonctionnent, mais c'est la plus efficace. --dry-runCela vaut la peine d'ajouter à la fin de cela juste pour voir ce qui sera affecté, c'est un bon
test de

ng g component path/to/myComponent --module=app.module.ts --dry-runest une commande très utile; juste pour vous assurer que votre composant est créé dans le bon répertoire.
theman0123

74

Je ne sais pas si la réponse d'Alexander Ciesielski était peut-être correcte au moment de la rédaction de cet article, mais je peux vérifier que cela ne fonctionne plus. Peu importe le répertoire du projet dans lequel vous exécutez la CLI angulaire. Si vous tapez

ng g component newComponent

il générera un composant et l'importera dans le fichier app.module.ts

La seule façon d'utiliser CLI pour l'importer automatiquement dans un autre module est de spécifier

ng g component moduleName/newComponent

où moduleName est un module que vous avez déjà défini dans votre projet. Si le moduleName n'existe pas, il placera le composant dans le répertoire moduleName / newComponent mais l'importera toujours dans app.module


2
c'était la bonne réponse pour moi à l'époque .. cela fonctionne correctement. Je crée une pull request pour ajouter ces informations aux documents. Un de ses contributeurs me demande de supprimer la partie cd-ing .. à la fin sera 1. ng g module newModule 2. ng g component new-module/newComponentselon lui devrait être new-module au lieu de newModule
Elmer Dantas

Juste pour souligner, en utilisant la technique d'Alexander Ciesielski et fonctionne comme prévu. Je dois noter que je n'ai pas besoin de créer le composant simplement nécessaire pour créer un dossier. Donc, je viens d' mkdirun dossier, puis j'ai exécuté le composant ng newComponent à l'intérieur du dossier nouvellement créé.
Charlie-Greenman

2
Je dirais que la réponse complète estng g component moduleName/newComponent -m moduleName
slavugan

Dans mon cas, le nom du composant est le même que le nom du module, j'ai donc créé le module avec ng generate module {modComName}1) J'ai créé le dossier 2) J'ai créé un fichier de module dans le dossier du même nom; la commande en ng generate component {modComName}fait 1) Création d'un fichier de composant dans le dossier du même nom 2) Modification du module pour importer le composant
The Red Pea

Soyez prudent si vous créez un module et l'importez dans un module de base; ngajoute des importations à la fin du tableau; mais vous voudrez peut-être: "L'ordre des routes dans la configuration compte et c'est par conception."
The Red Pea

37

Je n'ai pas trouvé de réponse qui montrait comment utiliser le cli pour générer un composant dans un dossier de module de niveau supérieur et que le composant avait également ajouté automatiquement la collection de déclarations du module.

Pour créer le module, exécutez ceci:

ng g module foo

Pour créer le composant dans le dossier du module foo et l'ajouter à la collection de déclarations de foo.module.ts, exécutez ceci:

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

Et le cli échafaudera le module et le composant comme ceci:

entrez la description de l'image ici

--EDIT la nouvelle version du cli angulaire se comporte différemment. 1.5.5 ne veut pas de nom de fichier de module donc la commande avec v1.5.5 devrait être

ng g component foo/fooList --module=foo

1
Yay pour l' --moduleargument; la documentation dit "Permet la spécification du module de déclaration." ; J'ajouterais --moduleprécise quel module existant doit être modifié pour importer le module que vous êtes sur le point de créer
The Red Pea

2
@TheRedPea Je crois que vous vouliez dire "--module spécifie quel module existant doit être modifié pour importer le composant que vous êtes ..."
cobolstinks

Ouais tu as raison! Module existant modifié en référence à un nouveau composant
The Red Pea

13

Vous pouvez essayer la commande ci-dessous, qui décrit le,

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

Ensuite, votre commande sera comme:

ng g c user/userComponent -m user.module

9

Pour Angular v4 et ci-dessus, utilisez simplement:

ng g c componentName -m ModuleName

1
Lève une erreur Specified module does not existalors que le module existait
Pardeep Jain

1
Vous ne spécifiez pas le nom du module, vous spécifiez le nom de fichier du module.
Roger

1
Fonctionne comme du charme! par exemple, si votre fichier de module est user-settings.module.tset que vous souhaitez ajouter un composant, public-infola commande sera:ng g c PublicInfo -m user-settings
Spiral Out

1
C'est la réponse la plus simple et la plus claire!
Barna Tekse le

8

C'est ce qui a fonctionné pour moi :

1 -->  ng g module new-module

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

Si vous souhaitez générer un composant sans son répertoire, utilisez l' --flat indicateur.


pas besoin d'écrire .ts
Lapenkov Vladimir

--module = chemin d'accès au module a fonctionné grâce à moi @Mohamed Makkaoui
Ian Poston Framer

8
  1. Tout d'abord, vous générez un module en exécutant.
ng g m modules/media

cela générera un module appelé à l' mediaintérieur du modulesdossier.

  1. Deuxièmement, vous générez un composant ajouté à ce module
ng g c modules/media/picPick --module=modules/media/media.module.ts

la première partie de la commande ng g c modules/media/picPickgénérera un dossier de composants appelé dossier picPickintérieur modules/mediacontenant notre nouveau mediamodule.

la deuxième partie rendra notre nouveau picPickcomposant déclaré dans mediamodule en l'important dans le fichier du module et en l'ajoutant au declarationstableau de ce module.

arbre de travail

entrez la description de l'image ici


2
Pouvez-vous expliquer plus en détail comment cela répond à la question?
Sterling Archer

Merci pour votre note, j'ai édité ma réponse car je suis un futur lecteur @CertainPerformance
Elhakim

3

Aller au niveau du module / on peut aussi être au niveau racine et taper ci-dessous les commandes

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

Exemple :

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

3

Premier module de génération:

ng g m moduleName --routing

Cela va créer un dossier moduleName puis naviguer vers le dossier module

cd moduleName

Et après cela, générer un composant:

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

Utilisez --flat pour ne pas créer de dossier enfant dans le dossier du module


1

J'ai des problèmes similaires avec plusieurs modules en application. Un composant peut être créé dans n'importe quel module donc avant de créer un composant, nous devons spécifier le nom du module particulier.

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

1

Utilisez cette commande simple:

ng g c users/userlist

users: Le nom de votre module.

userlist: Le nom de votre composant.


1

Selon la documentation Angular, la façon de créer un composant pour un module spécifique est,

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

"nom de répertoire" = où la CLI a généré le module de fonctionnalités

Exemple :-

ng generate component customer-dashboard/CustomerDashboard

Cela génère un dossier pour le nouveau composant dans le dossier du tableau de bord client et met à jour le module de fonctionnalités avec le composant CustomerDashboardComponent


1

Première course ng g module newModule . Puis coursng g component newModule/newModule --flat


1

J'ai créé un module enfant basé sur des composants avec un dossier racine spécifique

Cette commande cli ci-dessous que j'ai spécifiée, veuillez vérifier

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

La réparation est le dossier racine de notre module enfant

-m est --module

c pour compount

g pour générer


1

J'ai rencontré ce problème aujourd'hui lors de l'échafaudage d'une application Angular 9. J'obtiens l'erreur «module n'existe pas» chaque fois que j'ajoute le .module.tsou .moduleau nom du module. Le cli n'a besoin que du nom du module sans extension. En supposant que j'avais un nom de module:, brands.module.tsla commande que j'ai utilisée était

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

supprimez le --dry-runune fois que vous avez confirmé que la structure du fichier est correcte.


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

exemple:

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

1

Un modèle courant consiste à créer une fonction avec une route, un module à chargement différé et un composant.

Route: myapp.com/feature

app-routing.module.ts

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

Structure des fichiers:

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

Tout cela peut être fait dans le cli avec:

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

Ou plus court

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

Ou si vous omettez le nom, le cli vous le demandera. Très utile lorsque vous devez créer plusieurs fonctionnalités

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

0

Ajouter un composant à l'application Angular 4 à l'aide de la CLI angulaire

Pour ajouter un nouveau composant Angular 4 à l'application, utilisez la commande ng g component componentName. Après l'exécution de cette commande, Angular CLI ajoute un dossier component-namesous src\app. En outre, les références de la même chose sont ajoutées src\app\app.module.tsautomatiquement au fichier.

Un composant doit avoir une @Componentfonction de décorateur suivie d'un classqui doit être exportédité. La @Componentfonction décoratrice accepte les métadonnées.

Ajouter un composant à un dossier spécifique de l'application Angular 4 à l'aide de la CLI angulaire

Pour ajouter un nouveau composant à un dossier spécifique, utilisez la commande ng g component folderName/componentName


0

Si vous avez plusieurs applications déclarées dans .angular-cli.json (par exemple dans le cas où vous travaillez sur un module de fonctionnalités)

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

Vous pouvez :

ng g c my-comp -a app-name

-a signifie --app (nom)


0

J'utilise cette commande particulière pour générer des composants à l'intérieur d'un module.

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

Cette commande générera un composant local sur le module. ou Vous pouvez d'abord changer de répertoire en tapant.

cd <module-directory-name>

puis créez un composant.

ng g c <component-name>

Remarque: le code entre <> représente des noms spécifiques à l'utilisateur.


0

1.- Créez votre module de fonctionnalités comme d'habitude.

ng generate module dirlevel1/module-name

2.- Vous pouvez spécifier le ROOT PATH de votre projet dans --module (uniquement dans --module, (/) root pointe vers votre PROJECT ROOT et N'EST PAS LA ROOT DU SYSTEME !!! )

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

Exemple réel:

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 

Production:

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!

Testé avec Angular CLI: 9.1.4


0

Créer un module, un service et un composant dans un module particulier

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)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.