Créer un composant et l'ajouter à un module spécifique avec Angular-CLI

Question

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

Existe-t-il un moyen de créer un composant pour 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 d'angular-cli est de mettre tous les nouveaux composants à l'intérieur de app.module . J'aimerais pouvoir choisir l'emplacement de mon composant, afin de pouvoir créer des modules séparés et de ne pas avoir tous mes composants à l'intérieur. app.module . Est-il possible de le faire en utilisant angular-cli ou dois-je le faire manuellement ?

Answer 1

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 newModule pour changer de répertoire dans le newModule dossier
3. ng g component newComponent pour créer un composant en tant qu'enfant du module.

MISE À JOUR : Angular 9

Maintenant, le dossier dans lequel vous vous trouvez lorsque vous générez le composant n'a plus d'importance.

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 le CLI d'Angular voit new-module/new-component, il comprend et traduit le cas pour correspondre à new-module -> NewModule et new-component -> NewComponent. Cela peut être déroutant au début, donc la solution la plus simple est de faire correspondre les noms dans #2 avec les noms de dossier pour le module et le composant.

Answer 2

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

Answer 3

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

ng g component newComponent

il va générer un composant et l'importer 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 quand même dans app.module.

Answer 4

Je n'ai pas trouvé de réponse qui montre comment utiliser le cli pour générer un composant à l'intérieur d'un dossier de module de premier niveau, et aussi pour que le composant soit automatiquement ajouté à la collection de déclarations du module.

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

ng g module foo

Pour créer le composant à l'intérieur du dossier du module foo et l'ajouter à la collection de déclarations du fichier foo.module.ts, exécutez cette procédure :

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

Et la cli va échafauder le module et le composant comme ceci :

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

ng g component foo/fooList --module=foo

Answer 5

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

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

Alors votre commande sera comme :

ng g c user/userComponent -m user.module