Как сгенерировать компоненты в определенной папке с angular-cli?

223

Я использую angualr4 с angular-cli и могу создать новый компонент с помощью следующей команды.

E:\HiddenWords>ng generate component plainsight

Но мне нужно создать дочерний компонент внутри плацдарма. Есть ли способ сделать с angular-cli?

Абхиджит С
источник
15
Создайте компонент your / path / from / the / app / folder / plainsight
maxime1992
4
как упомянуто @Maxime, или перейдите в каталог
Z. Bagley

Ответы:

125

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
user3611927
источник
12
вариант --flat - это то, что я искал!
неудача
1
@ user3611927 --flat является ответом, так как будет использовать существующие папки и создавать только те папки, которые не существуют. Отлично!! Это должно быть поведение по умолчанию ИМХО
Эндрю Дэй
41

Быстрый, простой и безошибочный метод

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

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

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

введите описание изображения здесь

Wasif
источник
1
Вы гений, или я просто глупый фокин ... Лучший способ когда-либо!
Ap0st0l
19

ng g c component-name

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

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

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

ВИКАС КОЛИ
источник
12

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


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

Эйс Вальдес
источник
4
ng g c folderName/SubFolder/.../componentName --spec=false 
САЧИН ДУХАН
источник
4

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

Если я сгенерирую компонент из моей основной папки приложения, как это (WRONG WAY)

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

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

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

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

ng g c child/grandchild 

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

София
источник
3

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

cd path/to/specific/directory

Оттуда я побежал ng g c mynewcomponent

esitarz
источник
1

просто

ng g component plainsight/some-name

Это создаст папку "Plainsight" и сгенерирует компонент с неким именем.

Ахмед Адевале
источник
1

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

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

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

Эрих Беневидес Диниз
источник
1

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

что g cсредство генерации компонента

Брайан Акумах
источник
1

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

Запустите cmd: ng gc имя_компонента

введите описание изображения здесь

Брахмесвара Рао Палепу
источник
1

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' с угловой маршрутизацией

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

Удачи!

Кавинду Наратхота
источник
1

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

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

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

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

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

C_Ogoo
источник
0

Во-первых, для создания компонента вам необходимо использовать: -

  • ng gc имя компонента

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

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

  • ng gc имя_компонента / newComponentName
Датта Амбариш
источник
0

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

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

ng g c myfolder\mycomponent

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

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

--dryRun = истина | ложь

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

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

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

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

Ismail
источник