Jak wygenerować komponenty w określonym folderze z angular-cli?


221

Używam angualr4 z angular-cli i jestem w stanie utworzyć nowy komponent za pomocą następującego polecenia.

E:\HiddenWords>ng generate component plainsight

Ale muszę wygenerować komponent podrzędny w polu widzenia. Czy istnieje sposób na użycie angli-cli?


15
ng wygeneruj komponent twoja / ścieżka / z / the / app / folder / plainsight
maxime1992

4
jak wspomniano @Maxime, lub cd do katalogu
Z. Bagley,

Odpowiedzi:


124

ng g component plainsight/some-nameSprawia, że nowy katalog , kiedy go używać.

Ostatecznym wynikiem będzie:

plainsight/some-name/some-name.component.ts

Aby tego uniknąć, skorzystaj z opcji płaskiej ng g component plainsight/some-name --flat , aby wygenerować pliki bez tworzenia nowego folderu

plainsight/some-name.component.ts

12
szukałem opcji --flat!
nieszczęście

1
@ user3611927 - flat jest odpowiedzią, ponieważ użyje istniejących folderów i utworzy tylko foldery, które nie istnieją. Idealny!! Powinno to być domyślne zachowanie IMHO
Andrew Day

40

Szybka, prosta i bezbłędna metoda

tzn. chcesz utworzyć komponent w app/componentfolderze, a następnie wykonaj następujące kroki

  1. Kliknij prawym przyciskiem myszy folder, w którym chcesz utworzyć komponent
  2. Wybierz Open in Command Promptopcję
  3. W nowym terminalu (zobaczysz wybraną ścieżkę), a następnie wpisz ng g c my-new-component

Możesz również sprawdzić ten proces za pomocą tego obrazu

wprowadź opis zdjęcia tutaj


1
Jesteś geniuszem, a ja jestem po prostu głupkowaty ... Najlepszy sposób!
Ap0st0l

19

ng g c component-name

Aby określić niestandardową lokalizację: ng g c specific-folder/component-name

tutaj component-namezostanie utworzony wewnątrz określonego folderu.

Similarl podejście może być stosowany do wytwarzania innych składników podoba directive, pipe, service, class, guard, interface, enum, module, itd.


12

krótszy kod do wygenerowania komponentu: ng g c component-name
aby określić jego lokalizację:ng g c specific-folder/component-name


Dodatkowe informacje
krótszy kod do wygenerowania dyrektywy: ng g d directive-name
aby określić jej lokalizację:ng g d specific-folder/directive-name



4

Powyższe opcje nie działały dla mnie, ponieważ w przeciwieństwie do tworzenia katalogu lub pliku w terminalu, gdy CLI generuje komponent, domyślnie dodaje ścieżkę src / app do wprowadzonej ścieżki.

Jeśli wygeneruję komponent z głównego folderu aplikacji w ten sposób (ŹLE SPOSÓB)

ng g c ./src/app/child/grandchild 

komponent, który został wygenerowany, był następujący:

src/app/src/app/child/grandchild.component.ts

więc musiałem tylko pisać

ng g c child/grandchild 

Mam nadzieję, że to komuś pomaga


3

Nie miałem szczęścia z powyższymi odpowiedziami (w tym --flat), ale dla mnie zadziałało:

cd path/to/specific/directory

Stamtąd prowadziłem ng g c mynewcomponent


1

Prosty

ng g component plainsight/some-name

Stworzy folder „plainsight” i wygeneruje w nim jakiś składnik.


1

Spróbuj użyć

ng g component plainsight/some-name.component.ts

Lub spróbuj ręcznie, jeśli czujesz się bardziej komfortowo.


1

Gdy znajdziesz się w katalogu swojego projektu. użyj cd path/to/directorynastępnie użyj ng g c component_name --spec=falseto automatyzuje wszystko i jest wolne od błędów

że g cśrodki generowania składnik



1

Angular CLI zapewnia wszystkie polecenia potrzebne do tworzenia aplikacji. Aby spełnić określone wymagania, możesz łatwo użyć ng g( ng generate), aby wykonać pracę.

ng g c directory/component-namewygeneruje component-namekomponent w directoryfolderze.

Poniżej znajduje się mapa kilku prostych poleceń, których możesz użyć w swojej aplikacji.

  1. ng g c comp-namelub ng generate component comp-nameaby utworzyć komponent o nazwie „nazwa-komp.”
  2. ng g s serv-namelub ng generate service serv-nameutworzyć usługę o nazwie „nazwa-usługi”
  3. ng g m mod-namelub ng generate module mod-nameaby utworzyć moduł o nazwie „nazwa mod”
  4. ng g m mod-name --routinglub ng generate module mod-name --routingstworzyć moduł o nazwie „mod-name” z routingiem kątowym

Mam nadzieję że to pomoże!

Powodzenia!


1

Jeśli używasz VSCode, rozważ użycie konsoli kątowej

Zapewnia interfejs Angular CLI. Zobaczysz opcję określenia ścieżki.

Angular CLI jest niezwykle potężny i rozszerzalny. W rzeczywistości istnieje tak wiele możliwości, że dla programistów pomocne jest posiadanie wszystkich różnych opcji konfiguracji dla każdego dostępnego polecenia.

Dzięki Angular Console otrzymasz rekomendacje i będziesz w stanie pobrać nawet najłatwiej zapomniane lub rzadko używane funkcje!

Angular Console to przede wszystkim bardziej produktywny sposób pracy z tym, co zapewnia Angular CLI.


0

Po pierwsze, aby utworzyć komponent, musisz użyć:

  • ng nazwa komponentu gc

    Korzystając z powyższego polecenia, nowy komponent zostanie utworzony w folderze z
    ( nazwa komponentu) określonym powyżej.

Ale jeśli chcesz utworzyć komponent w innym komponencie lub w określonym folderze: -

  • ng gc nazwa_komponentu / newComponentName

0

Konieczność użycia --dryRun podczas korzystania z katalogu niestandardowego

Możesz przekazać własną ścieżkę do katalogu wraz z ngpoleceniem.

ng g c myfolder\mycomponent

Ale są szanse, że przegapisz przeliterowanie ścieżki i albo zostanie utworzony nowy folder, albo nastąpi zmiana katalogu docelowego. Z tego powodu dryRunjest bardzo pomocny. Wyświetla wynik wpływu zmian.
wprowadź opis zdjęcia tutaj

Po sprawdzeniu wyniku można uruchomić to samo polecenie bez -dwprowadzania zmian.

--dryRun = true | false

Gdy ma wartość true, przebiega i zgłasza aktywność bez zapisywania wyników.

Domyślnie: false

Aliasy: -d

Oficjalny dokument: - https://angular.io/cli/generate

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.