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

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?

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.

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

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

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:

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

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

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

ng g c componentName -m ModuleName

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.

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 .

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

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

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

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'

Verwenden Sie diesen einfachen Befehl:

ng g c users/userlist

users: Ihr Modulname.

userlist: Ihr Komponentenname.

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

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

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

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.

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

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)

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.

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

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

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

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)