Erstellen Sie mit Angular-CLI eine Komponente für ein bestimmtes Modul


170

Ich fange an, Angular-Cli zu verwenden und habe bereits viel gelesen, um eine Antwort darauf zu finden, was ich tun möchte ... kein Erfolg, also bin ich hierher gekommen.

Gibt es eine Möglichkeit, eine Komponente für ein neues Modul zu erstellen?

z.B: ng g module newModule

ng g component newComponent (Wie füge ich diese Komponente zu newModule hinzu?)

weil das Angular-Cli-Standardverhalten darin besteht, alle neuen Komponenten darin zu platzieren app.module. Ich möchte auswählen, wo sich meine Komponente befindet, damit ich separate Module erstellen kann und nicht alle meine Komponenten darin enthalten sind app.module. Ist das mit Angular-Cli möglich oder muss ich das manuell machen?

Antworten:


215

Um eine Komponente als Teil eines Moduls zu erstellen, sollten Sie

  1. ng g module newModule ein Modul generieren,
  2. cd newModuleum das Verzeichnis in den newModuleOrdner zu wechseln
  3. ng g component newComponent um eine Komponente als untergeordnetes Element des Moduls zu erstellen.

UPDATE: Winkel 9

Jetzt spielt es keine Rolle, in welchem ​​Ordner Sie sich beim Generieren der Komponente befinden.

  1. ng g module NewMoudle ein Modul generieren.
  2. ng g component new-module/new-component um NewComponent zu erstellen.

Hinweis: Wenn die Angular-CLI neues Modul / neue Komponente sieht, versteht und übersetzt sie den Fall so, dass er mit dem neuen Modul -> NewModule und der neuen Komponente -> NewComponent übereinstimmt. Am Anfang kann es verwirrend werden. Daher ist es einfach, die Namen in # 2 mit den Ordnernamen für das Modul und die Komponente abzugleichen.


92
Sie können auch im Projektstamm bleiben und der Komponente den Modulnamen voranstellen ng g component moduleName/componentName.
JayChase

3
Bei Angular CLI Version 1.6.8 wurde immer die Fehlermeldung angezeigt, dass das angegebene Modul nicht vorhanden ist, wenn ich ein vorhandenes Modul abtrenne. Es hat funktioniert, als ich den folgenden Befehl ausprobiert habe: ng generate service service1 --module = module1 / module1.module.ts . Hinweis: mein Service - Name ist service1 und mein Modulname ist module1
Diallo

8
Dies würde eine neue Komponente im angegebenen Verzeichnis erstellen, diese jedoch nicht im Modul registrieren. Es wird in der app.module registriert. Sie müssten das Modul mit der folgenden --moduleOption angeben :ng g component <your component> --module=<your module name>
Vinit Sarvade

3
veraltet ab 6. Oktober, Angular 6
tom87416

4
Veraltet. Angular 6 hängt nicht von Ordnerstrukturen ab, um festzustellen, in welchem ​​Modul sich die Komponente befindet. Zwei Module können sich im selben Verzeichnis befinden. @ Daniels Antwort stackoverflow.com/a/44812014/511719 funktioniert für Angular 6.
Imafish

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

10
Die anderen Antworten funktionieren, aber dies ist die effizienteste. Es lohnt sich --dry-run, am Ende noch etwas hinzuzufügen , um zu sehen, was davon betroffen sein wird. Es ist eine nette Überprüfung der
geistigen Gesundheit

ng g component path/to/myComponent --module=app.module.ts --dry-runist ein sehr nützlicher Befehl; Nur um sicherzustellen, dass Ihre Komponente im richtigen Verzeichnis erstellt wird.
theman0123

74

Ich bin mir nicht sicher, ob Alexander Ciesielskis Antwort zum Zeitpunkt des Schreibens richtig war, aber ich kann überprüfen, ob dies nicht mehr funktioniert. Es spielt keine Rolle, in welchem ​​Verzeichnis des Projekts Sie die Angular-CLI ausführen. Wenn Sie tippen

ng g component newComponent

Es wird eine Komponente generiert und in die Datei app.module.ts importiert

Die einzige Möglichkeit, CLI zum automatischen Importieren in ein anderes Modul zu verwenden, besteht in der Angabe

ng g component moduleName/newComponent

Dabei ist moduleName ein Modul, das Sie bereits in Ihrem Projekt definiert haben. Wenn der Modulname nicht vorhanden ist, wird die Komponente im Verzeichnis moduleName / newComponent abgelegt und dennoch in app.module importiert


2
Es war damals die richtige Antwort für mich. Es funktioniert richtig. Ich erstelle eine Pull-Anfrage, um diese Informationen zu den Dokumenten hinzuzufügen. Einer seiner Mitwirkenden bittet mich, den CD-Teil zu entfernen. Am Ende wird es 1. ng g module newModule 2. ng g component new-module/newComponentLaut ihm sollte ein neues Modul anstelle von newModule sein
Elmer Dantas

Nur um darauf hinzuweisen, mit Technik von Alexander Ciesielski und funktioniert wie erwartet. Ich sollte beachten, dass ich keine Komponente erstellen musste, die nur zum Erstellen eines Ordners benötigt wurde. Also habe ich nur mkdireinen Ordner und dann ng Komponente newComponent innerhalb des neu erstellten Ordners ausgeführt.
Charlie-Greenman

2
Ich würde sagen, dass die vollständige Antwort istng g component moduleName/newComponent -m moduleName
Slavugan

In meinem Fall ist der Komponentenname mit dem Modulnamen identisch, daher habe ich das Modul erstellt mit ng generate module {modComName}1) Erstellt den Ordner 2) Erstellt eine Moduldatei im gleichnamigen Ordner; der Befehl ng generate component {modComName}tatsächlich 1) Erstellt eine Komponentendatei im gleichnamigen Ordner 2) Modifiziert das Modul, um die Komponente zu importieren
The Red Pea

Seien Sie vorsichtig, wenn Sie ein Modul erstellen und in ein Basismodul importieren. ngFügt Importe am Ende des Arrays hinzu. aber Sie möchten vielleicht: "Die Reihenfolge der Routen in der Konfiguration ist wichtig und dies ist beabsichtigt."
Die rote Erbse

37

Ich habe keine Antwort gefunden, die zeigt, wie mit der CLI eine Komponente in einem Modulordner der obersten Ebene generiert wird, und die Komponente hat automatisch die Deklarationssammlung des Moduls hinzugefügt.

Führen Sie Folgendes aus, um das Modul zu erstellen:

ng g module foo

Führen Sie Folgendes aus, um die Komponente im Ordner foo module zu erstellen und zur Deklarationssammlung von foo.module.ts hinzuzufügen:

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

Und das CLI wird das Modul und die Komponente wie folgt ausbauen:

Geben Sie hier die Bildbeschreibung ein

--EDIT Die neue Version des eckigen Cli verhält sich anders. 1.5.5 möchte keinen Moduldateinamen, daher sollte der Befehl mit v1.5.5 lauten

ng g component foo/fooList --module=foo

1
Ja für das --moduleArgument; In den Dokumenten heißt es: "Ermöglicht die Angabe des deklarierenden Moduls." ;; Ich würde hinzufügen --modulespezifiziert, welches vorhandene Modul geändert werden soll , um das Modul zu importieren, das Sie erstellen
The Red Pea

2
@ TheRedPea Ich glaube, Sie wollten sagen "--Modul gibt an, welches vorhandene Modul geändert werden soll, um die Komponente zu importieren, die Sie sind ..."
Cobolstinks

Ja, du hast recht! Bestehendes Modul geändert in Bezug auf neue Komponente
The Red Pea

13

Sie können den folgenden Befehl ausprobieren, der Folgendes beschreibt:

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

Dann lautet Ihr Befehl wie folgt:

ng g c user/userComponent -m user.module

9

Verwenden Sie für Angular v4 und höher einfach:

ng g c componentName -m ModuleName

1
Wirft einen Fehler, Specified module does not existwährend das Modul vorhanden war
Pardeep Jain

1
Sie geben nicht den Namen des Moduls an, sondern den Dateinamen des Moduls.
Roger

1
Funktioniert wie Charme! Beispiel: Wenn Ihre Moduldatei ist user-settings.module.tsund Sie eine Komponente hinzufügen möchten, lautet public-infoder Befehl:ng g c PublicInfo -m user-settings
Spiral Out

1
Dies ist die einfachste und sauberste Antwort!
Barna Tekse

8

Das hat bei mir funktioniert:

1 -->  ng g module new-module

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

Wenn Sie eine Komponente ohne deren Verzeichnis generieren möchten, verwenden Sie das --flat Flag.


Ich muss nicht schreiben .ts
Lapenkov Vladimir

--module = Pfad zum Modul arbeitete von mir danke @Mohamed Makkaoui
Ian Poston Framer

8
  1. Zunächst generieren Sie ein Modul durch Ausführen.
ng g m modules/media

Dadurch wird ein Modul generiert, das mediaim modulesOrdner aufgerufen wird .

  1. Zweitens generieren Sie eine Komponente, die diesem Modul hinzugefügt wurde
ng g c modules/media/picPick --module=modules/media/media.module.ts

Der erste Teil des Befehls ng g c modules/media/picPickgeneriert einen Komponentenordner namens " picPickInside modules/mediaOrdner", der unser neues mediaModul enthält.

Im zweiten Teil wird unsere neue picPickKomponente im mediaModul deklariert, indem sie in die Moduldatei importiert und an das declarationsArray dieses Moduls angehängt wird.

Arbeitsbaum

Geben Sie hier die Bildbeschreibung ein


2
Können Sie bitte näher erläutern, wie dies die Frage beantwortet?
Sterling Archer

Vielen Dank für Ihre Nachricht, ich habe meine Antwort bearbeitet, da ich ein zukünftiger Leser bin. @CertainPerformance
Elhakim

3

Gehen Sie zur Modulebene / wir können uns auch in der Stammebene befinden und die folgenden Befehle eingeben

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

Beispiel:

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

3

Zuerst Modul generieren:

ng g m moduleName --routing

Dadurch wird ein Modulname-Ordner erstellt und dann zum Modulordner navigiert

cd moduleName

Und danach Komponente generieren:

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

Verwenden Sie --flat, um keinen untergeordneten Ordner im Modulordner zu erstellen


1

Ich habe ähnliche Probleme mit mehreren Modulen in der Anwendung. Eine Komponente kann für jedes Modul erstellt werden. Bevor Sie eine Komponente erstellen, müssen Sie den Namen des jeweiligen Moduls angeben.

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

1

Verwenden Sie diesen einfachen Befehl:

ng g c users/userlist

users: Ihr Modulname.

userlist: Ihr Komponentenname.


1

Laut Angular-Dokumenten können Sie eine Komponente für ein bestimmtes Modul erstellen.

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

"Verzeichnisname" = wo die CLI das Funktionsmodul generiert hat

Beispiel: -

ng generate component customer-dashboard/CustomerDashboard

Dadurch wird ein Ordner für die neue Komponente im Kunden-Dashboard-Ordner generiert und das Funktionsmodul mit der CustomerDashboardComponent aktualisiert


1

Erster Lauf ng g module newModule . Dann renneng g component newModule/newModule --flat


1

Ich habe ein komponentenbasiertes untergeordnetes Modul mit einem bestimmten Stammordner erstellt

Den folgenden CLI-Befehl habe ich angegeben

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

Reparatur ist der Stammordner unseres untergeordneten Moduls

-m ist --module

c für compount

g für generieren


1

Ich bin heute auf dieses Problem gestoßen, als ich eine Angular 9-Anwendung erstellt habe. Ich habe den Fehler "Modul existiert nicht" erhalten, wenn ich das .module.tsoder .modulezum Modulnamen hinzugefügt habe . Die CLI benötigt nur den Namen des Moduls ohne Erweiterung. Angenommen, ich hätte einen Modulnamen : brands.module.ts, war der Befehl, den ich benutzte

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

Entfernen Sie das, --dry-runsobald Sie bestätigt haben, dass die Dateistruktur korrekt ist.


0

Fügen Sie der Angular 4-App mithilfe der Angular-CLI eine Komponente hinzu

Verwenden Sie den Befehl, um der App eine neue Angular 4-Komponente hinzuzufügen ng g component componentName. Nach Ausführung dieses Befehls fügt Angular CLI einen Ordner component-nameunter hinzu src\app. Außerdem werden die Referenzen derselben src\app\app.module.tsautomatisch zur Datei hinzugefügt .

Eine Komponente muss eine @ComponentDekorationsfunktion haben, gefolgt von einer, classdie bearbeitet werden muss export. Die @ComponentDekorationsfunktion akzeptiert Metadaten.

Fügen Sie mithilfe der Angular CLI eine Komponente zu einem bestimmten Ordner der Angular 4-App hinzu

Verwenden Sie den Befehl, um einem bestimmten Ordner eine neue Komponente hinzuzufügen ng g component folderName/componentName


0

Wenn Sie mehrere Apps in .angular-cli.json deklariert haben (z. B. wenn Sie an einem Funktionsmodul arbeiten)

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

Sie können :

ng g c my-comp -a app-name

-a steht für --app (Name)


0

Ich verwende diesen speziellen Befehl zum Generieren von Komponenten innerhalb eines Moduls.

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

Dieser Befehl generiert eine lokale Komponente für das Modul. oder Sie können das Verzeichnis zuerst durch Eingabe ändern.

cd <module-directory-name>

und dann Komponente erstellen.

ng g c <component-name>

Hinweis: Der in <> eingeschlossene Code steht für benutzerspezifische Namen.


0

1.- Erstellen Sie Ihr Funktionsmodul wie gewohnt.

ng generate module dirlevel1/module-name

2.- Sie können den ROOT PATH Ihres Projekts in --module angeben (nur in --module, (/) root verweist auf Ihren PROJECT ROOT und IST NICHT DER SYSTEM ROOT !!! )

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

Echtes Beispiel:

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 

Ausgabe:

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!

Getestet mit Angular CLI: 9.1.4


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

Beispiel:

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

0

Ein gängiges Muster besteht darin, ein Feature mit einer Route, einem verzögert geladenen Modul und einer Komponente zu erstellen.

Route: myapp.com/feature

app-routing.module.ts

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

Dateistruktur:

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

Dies kann alles in der CLI erfolgen mit:

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

Oder kürzer

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

Oder wenn Sie den Namen weglassen, werden Sie vom cli dazu aufgefordert. Sehr nützlich, wenn Sie mehrere Funktionen erstellen müssen

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

0

Erstellen Sie ein Modul, einen Service und eine Komponente in einem bestimmten Modul

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)
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.