Как создавать компоненты в определенной папке с помощью Angular CLI?

avatar
user8520658
20 октября 2017 в 14:32
413530
21
324

Я использую Angular 4 с Angular CLI и могу создать новый компонент с помощью следующей команды.

E:\HiddenWords>ng generate component plainsight

Но мне нужно сгенерировать дочерний компонент внутри Plainsight. Есть ли способ сделать это с помощью Angular CLI?

Источник
maxime1992
20 октября 2017 в 14:33
21

ng сгенерировать компонент ваш/путь/из/приложения/папки/plainsight

Z. Bagley
20 октября 2017 в 14:33
7

как упоминалось @Maxime, или перейдите в каталог

Martin Zamora
14 октября 2020 в 03:50
1

Чтобы получить хороший результат, когда вы впервые запускаете что-то вроде: ng generate component plainsight в качестве родителя, а теперь хотите создать дочерний элемент, просто запустите: ng generate component plainsight/child

Juan Pablo
23 февраля 2021 в 23:44
2

Удобный инструмент, который я использую, — это -d в конце команды, который выполнит пробный запуск, т. е. фактически не добавит файлы в ваш проект, а только покажет вам, куда они пойдут. Таким образом вы можете проверить, что они идут в нужную папку: ng generate component path/to/folder/plainsight -d

Ответы (21)

avatar
Junaid khan
20 августа 2021 в 06:00
2

Откройте терминал определенной папки, используя эту команду

ng g c имя компонента --flat

avatar
Panagiotis Bougioukos
4 июня 2021 в 17:20
2

2021 Дальнейшее ускорение с помощью подключаемых модулей IDE

Если вы хотите еще больше ускорить этот обычный процесс и избежать распространенных ошибок, которые стоят вам времени, вы можете попробовать плагины кода Visual Studio.

Например, я использую Angular-Schematics и избегаю терминала. Вы можете вызвать ng cli с помощью мыши.

enter image description here

avatar
Matthew
17 декабря 2020 в 14:03
8

Использование 'ng generate component ./target_directory/Component_Name'

André Luiz Myszko
8 февраля 2022 в 01:18
0

Это работает, большое спасибо!

avatar
Prageeth godage
6 декабря 2020 в 02:31
8

Это очень просто,

enter image description here

Другой путь,

в терминале перейдите в свою ПАПКУ,

**xxx\ИМЯ_ПАПКИ>cd ИМЯ_ПАПКИ

xxx\FOLDER_NAME> ng generate component plainsight

Бонусный балл, если вы, как и я, копируете путь (код Visual Studio),

enter image description here

avatar
Seshu Vuggina
4 ноября 2020 в 15:07
6

Создать компонент в определенной папке:

ng g c folder-name/component-name

Создайте компонент внутри папки для определенного (существующего) модуля с помощью Angular-CLI:

ng g c folder-name/component-name --module=folder-name/moduleName.module.ts
sid7747
6 августа 2021 в 15:07
0

Мы можем использовать - ng g c modules/moduleName/IfComponentsFolder/ComponentYouWantToCreate --project parentProjectName

avatar
syed
17 августа 2020 в 12:17
5

Чтобы открыть терминал в коде VS, просто введите CTRL + ~, чтобы открыть терминал. Вот шаги:

  1. Проверьте наличие конкретного компонента, для которого необходимо создать новый компонент.

  2. Перенаправить путь к определенной папке/компоненту, где необходимо создать другой компонент

НАПРИМЕР: cd src/app/particularComponent

Вместо particularComponent введите имя компонента, в котором нужно сгенерировать новый компонент.

  1. Когда вы находитесь в компоненте, где вам нужно сгенерировать новый компонент, просто введите эту команду: ng g c NewComponentName

(Измените имя NewComponentName на требуемое имя компонента.)

avatar
Ismail
7 февраля 2020 в 12:09
3

Необходимость использования --dryRun при использовании пользовательского каталога

Вы можете передать путь к пользовательскому каталогу вместе с командой ng.

ng g c myfolder\mycomponent

Но есть вероятность, что вы пропустите путь и либо создастся новая папка, либо изменится целевой каталог. По этой причине dryRun очень полезен. Он отображает вывод о том, как будут затронуты изменения.

После проверки результата вы можете запустить ту же команду без -d, чтобы внести изменения.

--dryRun=true|false

Если установлено значение true, выполняется и сообщает об активности без записи результатов.

По умолчанию: false

Псевдонимы: -d

Официальный документ: - https://angular.io/cli/generate

avatar
Sofia
14 января 2020 в 15:28
13

Вышеупомянутые параметры у меня не работали, потому что в отличие от создания каталога или файла в терминале, когда CLI создает компонент, он добавляет путь src/app по умолчанию к пути, который вы вводите.

Если я сгенерирую компонент из папки основного приложения вот так (НЕПРАВИЛЬНО)

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

был сгенерирован следующий компонент:

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

поэтому мне нужно было набрать только

ng g c child/grandchild 

Надеюсь, это кому-нибудь поможет

avatar
C_Ogoo
24 декабря 2019 в 11:31
0

Если вы используете VSCode, рассмотрите возможность использования консоли Angular

Он предоставляет интерфейс для Angular CLI. Вы увидите возможность указать путь.

Интерфейс командной строки Angular невероятно мощный и расширяемый. На самом деле возможностей так много, что разработчикам полезно иметь все различные параметры конфигурации для каждой доступной им команды.

С Angular Console вы получите рекомендации и сможете найти даже самые легко забываемые или редко используемые функции!

Angular Console — это, прежде всего, более продуктивный способ работы с тем, что предоставляет Angular CLI.

avatar
datta ambareesh
24 декабря 2019 в 11:25
0

Во-первых, чтобы создать Компонент, вам нужно использовать:-

  • ng g c имя_компонента

    С помощью вышеуказанной команды новый компонент будет создан в папке с
    (имя компонента), указанное выше.

Но если вам нужно создать компонент внутри другого компонента или в определенной папке:-

  • ng g c имя_компонента/newComponentName
avatar
Kavindu N
21 октября 2019 в 12:07
3

Angular CLI предоставляет все необходимые команды для разработки приложений. Для вашего конкретного требования вы можете легко использовать ng g (ng generate), чтобы выполнить работу.

ng g c directory/component-name создаст компонент component-name в папке directory.

Ниже приведена карта нескольких простых команд, которые вы можете использовать в своем приложении.

  1. ng g c comp-name или ng generate component comp-name для создания компонента с именем 'comp-name'
  2. ng g s serv-name или ng generate service serv-name для создания службы с именем 'serv-name'
  3. ng g m mod-name или ng generate module mod-name для создания модуля с именем 'mod-name'
  4. ng g m mod-name --routing или ng generate module mod-name --routing для создания модуля с именем 'mod-name' с угловой маршрутизацией

Надеюсь, это поможет!

Удачи!

avatar
Brian Akumah
18 апреля 2019 в 18:53
1

После того, как вы находитесь в каталоге вашего проекта. используйте cd path/to/directory затем используйте ng g c component_name --spec=false он все автоматизирует и не содержит ошибок

g c означает создание компонента

Vikram kumar Chhajer
7 сентября 2020 в 05:03
1

Я получаю следующую ошибку с Angular 9 «Неизвестная опция: '--spec'»

Pogrindis
19 марта 2021 в 21:27
0

не игнорируйте файлы спецификаций. Тесты существуют не просто так.

avatar
esitarz
21 февраля 2019 в 21:11
4

Мне не повезло с приведенными выше ответами (включая --flat), но мне помогло следующее:

cd path/to/specific/directory

Оттуда я запустил ng g c mynewcomponent

avatar
Brahmmeswara Rao Palepu
21 января 2019 в 07:35
1

Перейдите в папку проекта в командной строке или в Project Terminal.

Выполнить cmd: ng g c имя_компонента

enter image description here

avatar
Erich Benevides Diniz
17 января 2019 в 15:16
1

Попробуйте использовать

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

Или попробуйте вручную, если вам так удобнее.

avatar
SACHIN DUHAN
10 января 2019 в 20:04
6
ng g c folderName/SubFolder/.../componentName --spec=false 
avatar
Ahmed Adewale
19 декабря 2018 в 09:24
1

Простой

ng g component plainsight/some-name

Он создаст папку "plainsight" и создаст в ней компонент с каким-то именем.

avatar
WasiF
15 августа 2018 в 10:04
120

Существует несколько способов создания компонента в определенном каталоге.

Способ 1: «Открыть во встроенном терминале» — быстрый, простой и безошибочный метод

т.е. Вы хотите создать компонент в папке app/common, как показано на изображении ниже, затем выполните следующие действия

  1. Щелкните правой кнопкой мыши папку, в которой вы хотите создать компонент.
  2. Выберите вариант Open in Integrated Terminal или Open in Command Prompt.
  3. В новом терминале (вы увидите выбранный путь), затем введите ng g c my-component

Также вы можете проверить этот процесс через это изображение enter image description here

Способ 2: "Копировать относительный путь" и вставить на терминал

  1. Щелкните правой кнопкой мыши папку, в которой вы хотите создать компонент
  2. В контекстном меню выберите Copy Relative Path
  3. На termincal, типа cd, нажмите пробел , а затем Ctrl + v , чтобы вставить скопированный путь и нажать клавишу Enter
  4. Вы увидите, что каталог был изменен.

Также вы можете проверить этот процесс через это изображение enter image description here

Способ 3: Введите полный путь на терминале

т.е. Вы хотите создать component в какой-то папке, введите всю команду, включая путь и имя компонента.

ng g c relative-path/my-component

Также вы можете проверить этот процесс через это изображение enter image description here

Примечание (метод-3): angular не позволит вам создать компонент вне папки приложения, поэтому для компонента вашим базовым путем будет приложение, поэтому в моем случае мне пришлось начать с auth/a-component вместо src/app/auth/a-component

Ap0st0l
5 июня 2020 в 08:29
9

Ты гений или я просто тупица... Лучший способ!

Prageeth godage
6 декабря 2020 в 02:39
0

Это откроется в новом терминале

Gobind
10 июня 2021 в 10:19
1

Это лучшее решение. Спасибо!

Leandro Castro
24 июня 2021 в 15:32
1

Это лучшее, однозначно

avatar
VIKAS KOHLI
10 апреля 2018 в 06:06
31

ng g c component-name

Для указания пользовательского местоположения: ng g c specific-folder/component-name

здесь component-name будет создан внутри конкретной папки.

Similarl подход может быть использован для генерации других компонентов, таких как directive, pipe, service, class, guard, interface, enum, module и т.д.

avatar
Ace Valdez
18 февраля 2018 в 17:33
18

более короткий код для генерации компонента: ng g c component-name
чтобы указать его местоположение: ng g c specific-folder/component-name


Дополнительная информация
более короткий код для генерации директивы: ng g d directive-name
чтобы указать его местоположение: ng g d specific-folder/directive-name

avatar
user3611927
19 января 2018 в 21:25
223

ng g component plainsight/some-name создает новый каталог, когда мы его используем.

Конечный результат будет таким:

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

Чтобы избежать этого, используйте параметр flat ng g component plainsight/some-name --flat, и он создаст файлы без создания новой папки

plainsight/some-name.component.ts
mishap
28 сентября 2018 в 16:45
18

опция --flat - это то, что я искал!

Andrew Day
23 ноября 2018 в 15:30
1

@user3611927 user3611927 --flat - это ответ, так как будут использоваться существующие папки и создаваться только те папки, которые не существуют. Идеально!! Это должно быть поведением по умолчанию ИМХО