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

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?

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.

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

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

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:

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

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

Pour Angular v4 et ci-dessus, utilisez simplement:

ng g c componentName -m ModuleName

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.

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.

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

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

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

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'

Utilisez cette commande simple:

ng g c users/userlist

users: Le nom de votre module.

userlist: Le nom de votre composant.

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

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

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

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.

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

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

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

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)

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.

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

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)