Utwórz komponent do określonego modułu za pomocą Angular-CLI

Zaczynam używać angular-cli i już dużo czytałem, aby znaleźć odpowiedź na temat tego, co chcę zrobić ... bez sukcesu, więc przyjechałem tutaj.

Czy istnieje sposób na utworzenie komponentu do nowego modułu?

na przykład: ng g module newModule

ng g component newComponent (jak dodać ten komponent do newModule ??)

ponieważ domyślnym zachowaniem angular-cli jest umieszczanie wszystkich nowych komponentów w środku app.module. Chciałbym wybrać, gdzie będzie mój komponent, aby móc tworzyć oddzielne moduły i nie mieć w sobie wszystkich moich komponentów app.module. Czy można to zrobić za pomocą angular-cli, czy muszę to zrobić ręcznie?

Aby stworzyć komponent jako część modułu, powinieneś

1. ng g module newModule wygenerować moduł,
2. cd newModuleaby zmienić katalog na newModulefolder
3. ng g component newComponent aby utworzyć komponent jako element podrzędny modułu.

AKTUALIZACJA: Angular 9

Teraz nie ma znaczenia, w jakim folderze jesteś podczas generowania komponentu.

1. ng g module NewMoudle aby wygenerować moduł.
2. ng g component new-module/new-component aby utworzyć NewComponent.

Uwaga: Kiedy Angular CLI widzi nowy-moduł / nowy-komponent, rozumie i tłumaczy przypadek, aby dopasować nowy-moduł -> NowyModule i nowy-komponent -> NowyKomponent. Na początku może to być mylące, więc prostym sposobem jest dopasowanie nazw w # 2 do nazw folderów modułu i komponentu.

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

Nie jestem pewien, czy może odpowiedź Aleksandra Ciesielskiego była poprawna w momencie pisania tego tekstu, ale mogę zweryfikować, że to już nie działa. Nie ma znaczenia, w którym katalogu w projekcie uruchomisz Angular CLI. Jeśli wpiszesz

ng g component newComponent

wygeneruje komponent i zaimportuje go do pliku app.module.ts

Jedynym sposobem użycia interfejsu CLI do automatycznego zaimportowania go do innego modułu jest określenie

ng g component moduleName/newComponent

gdzie moduleName to moduł, który już zdefiniowałeś w projekcie. Jeśli module nazwa_modułu nie istnieje, umieści komponent w katalogu nazwa_modułu / newComponent, ale nadal będzie importować go do app.module

Nie znalazłem odpowiedzi, która pokazałaby, jak użyć cli do wygenerowania komponentu w folderze modułu najwyższego poziomu, a także że komponent automatycznie dodał kolekcję deklaracji modułu.

Aby utworzyć moduł, uruchom to:

ng g module foo

Aby utworzyć komponent w folderze modułu foo i dodać go do kolekcji deklaracji foo.module.ts, uruchom to:

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

A CLI będzie szkieletować moduł i komponent w następujący sposób:

--EDIT nowa wersja kątowego CLI zachowuje się inaczej. Wersja 1.5.5 nie potrzebuje nazwy pliku modułu, więc powinno tak być w poleceniu w wersji 1.5.5

ng g component foo/fooList --module=foo

Możesz wypróbować poniższe polecenie, które opisuje,

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

Wtedy twoje polecenie będzie brzmiało:

ng g c user/userComponent -m user.module

W przypadku Angular v4 i nowszych po prostu użyj:

ng g c componentName -m ModuleName

to działa dla mnie:

1 -->  ng g module new-module

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

Jeśli chcesz wygenerować komponent bez jego katalogu użyj --flat flagi.

1. Najpierw generujesz moduł, wykonując.

ng g m modules/media

wygeneruje to moduł o nazwie mediainside modulesfolder.

2. Po drugie, generujesz komponent dodany do tego modułu

ng g c modules/media/picPick --module=modules/media/media.module.ts

pierwsza część polecenia ng g c modules/media/picPickwygeneruje folder komponentów o nazwie picPickwewnątrz modules/mediafolderu, który zawiera nasz nowy mediamoduł.

druga część sprawi, że nasz nowy picPickkomponent zostanie zadeklarowany w mediamodule, importując go do pliku modułu i dodając do declarationstablicy tego modułu.

Przejdź na poziom modułu / możemy też być na poziomie głównym i wpisać poniższe polecenia

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

Przykład:

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

Najpierw wygeneruj moduł:

ng g m moduleName --routing

Spowoduje to utworzenie folderu moduleName, a następnie przejdź do folderu modułu

cd moduleName

Następnie wygeneruj komponent:

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

Użyj --flat, aby nie tworzyć folderu podrzędnego w folderze modułu

Mam podobne problemy z wieloma modułami w aplikacji. Komponent można stworzyć do dowolnego modułu, dlatego przed utworzeniem komponentu musimy podać nazwę konkretnego modułu.

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

Użyj tego prostego polecenia:

ng g c users/userlist

users: Nazwa Twojego modułu.

userlist: Nazwa twojego komponentu.

Zgodnie z dokumentacją Angular, sposobem na stworzenie komponentu dla konkretnego modułu jest:

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

„nazwa katalogu” = miejsce, w którym CLI wygenerował moduł funkcji

Przykład: -

ng generate component customer-dashboard/CustomerDashboard

Spowoduje to wygenerowanie folderu dla nowego komponentu w folderze pulpitu klienta i zaktualizuje moduł funkcji za pomocą komponentu CustomerDashboardComponent

Pierwszy bieg ng g module newModule . Następnie uruchomićng g component newModule/newModule --flat

Stworzyłem moduł potomny oparty na komponentach z określonym folderem głównym

To polecenie CLI poniżej, które określiłem, sprawdź

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

Naprawa jest folderem głównym naszego modułu podrzędnego

-m to --module

c dla compount

g do generowania

Napotkałem ten problem dzisiaj podczas tworzenia szkieletu aplikacji Angular 9. Otrzymałem komunikat „moduł nie istnieje” za każdym razem, gdy dodałem .module.tslub .moduledo nazwy modułu. CLI potrzebuje tylko nazwy modułu bez rozszerzenia. Zakładając, że mam nazwę modułu:, brands.module.tspolecenie, którego użyłem, to

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

usuń --dry-runpo potwierdzeniu, że struktura plików jest prawidłowa.

Typowym wzorcem jest utworzenie elementu z trasą, leniwym ładowanym modułem i komponentem.

Trasa: myapp.com/feature

app-routing.module.ts

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

Struktura plików:

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

To wszystko można zrobić w CLI za pomocą:

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

Albo krócej

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

Lub jeśli pominiesz nazwę, cli zapyta o to. Bardzo przydatne, gdy musisz stworzyć kilka funkcji

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

Dodaj komponent do aplikacji Angular 4 za pomocą Angular CLI

Aby dodać nowy komponent Angular 4 do aplikacji, użyj polecenia ng g component componentName. Po wykonaniu tego polecenia Angular CLI dodaje folder component-namepod src\app. Również odniesienia do tego samego są src\app\app.module.tsautomatycznie dodawane do pliku.

Komponent powinien mieć funkcję @Componentdekoratora, po której następuje element, classktóry należy exportedytować. Funkcja @Componentdekoratora akceptuje metadane.

Dodaj komponent do określonego folderu aplikacji Angular 4 przy użyciu interfejsu wiersza polecenia Angular

Aby dodać nowy komponent do określonego folderu, użyj polecenia ng g component folderName/componentName

Jeśli masz wiele aplikacji zadeklarowanych w .angular-cli.json (np. W przypadku pracy z modułem funkcji)

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

Możesz :

ng g c my-comp -a app-name

-a oznacza --app (nazwa)

Używam tego konkretnego polecenia do generowania komponentów wewnątrz modułu.

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

To polecenie wygeneruje komponent lokalnie dla modułu. lub Najpierw możesz zmienić katalog, wpisując.

cd <module-directory-name>

a następnie utwórz komponent.

ng g c <component-name>

Uwaga: kod zawarty w <> reprezentuje nazwy użytkownika.

1. - Jak zwykle utwórz moduł funkcji.

ng generate module dirlevel1/module-name

2.- Możesz określić ścieżkę ROOT swojego projektu w --module (tylko w --module, (/) wskazuje korzenie twojego PROJEKTU i NIE JEST KORZENIEM SYSTEMU !!! )

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

Prawdziwy przykład:

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 

Wynik:

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!

Testowane za pomocą Angular CLI: 9.1.4

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

przykład:

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

Stwórz moduł, usługę i komponent w konkretnym module

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)