Como gerar componentes em uma pasta específica com angular-cli?

220

Estou usando angualr4 com angular-cli e sou capaz de criar um novo componente com o seguinte comando.

E:\HiddenWords>ng generate component plainsight

Mas preciso gerar um componente filho dentro da planície. Existe uma maneira de fazer com angular-cli?

Abhijith S
fonte
15
ng gerar componente seu / caminho / para / o / app / pasta / PlainSight
maxime1992
4
como @Maxime mencionado, ou cd no diretório
Z. Bagley

Respostas:

124

O ng g component plainsight/some-namecria um novo diretório quando o usamos.

A saída final será:

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

Para evitar isso, use a opção flat ng g component plainsight/some-name --flat e ela gerará os arquivos sem criar uma nova pasta

plainsight/some-name.component.ts
user3611927
fonte
11
a opção --flat é o que eu estava procurando!
acidente
1
@ user3611927 --flat é a resposta, pois usará pastas existentes e criará apenas pastas que não existem. Perfeito!! Este deve ser o IMHO comportamental padrão
Andrew Day
38

Método rápido, simples e sem erros

Você quer criar um componente em uma app/componentpasta e siga estas etapas

  1. Clique com o botão direito do mouse na pasta na qual você deseja criar o componente
  2. Selecionar Open in Command Promptopção
  3. No novo terminal (você verá o caminho selecionado) e digite ng g c my-new-component

Além disso, você pode verificar este processo através desta imagem

insira a descrição da imagem aqui

WasiF
fonte
1
Você é um gênio ou eu estou apenas estúpido ... O melhor jeito de todos!
Ap0st0l
19

ng g c component-name

Para especificar um local personalizado: ng g c specific-folder/component-name

aqui component-nameserá criado dentro de uma pasta específica.

Similarl abordagem pode ser utilizada para gerar outros componentes como directive, pipe, service, class, guard, interface, enum, module, etc.

VIKAS KOHLI
fonte
12

código mais curto para gerar o componente: ng g c component-name
para especificar sua localização:ng g c specific-folder/component-name


Informações adicionais,
código mais curto para gerar diretiva: ng g d directive-name
para especificar sua localização:ng g d specific-folder/directive-name

Ace Valdez
fonte
4
ng g c folderName/SubFolder/.../componentName --spec=false 
SACHIN DUHAN
fonte
4

As opções acima não estavam funcionando para mim porque, ao contrário de criar um diretório ou arquivo no terminal, quando a CLI gera um componente, ela adiciona o caminho src / app por padrão ao caminho que você digita.

Se eu gerar o componente da minha pasta principal do aplicativo dessa maneira (WRONG WAY)

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

o componente que foi gerado foi este:

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

então eu só tinha que digitar

ng g c child/grandchild 

Espero que isso ajude alguém

Sofia
fonte
3

Eu não estava tendo sorte com as respostas acima (incluindo --flat), mas o que funcionou para mim foi:

cd path/to/specific/directory

De lá, eu corri o ng g c mynewcomponent

esitarz
fonte
1

Simples

ng g component plainsight/some-name

Ele criará a pasta "plainsight" e gerará algum componente de nome dentro dela.

Ahmed Adewale
fonte
1

Tente usar

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

Ou tente manualmente, se você se sentir mais confortável.

Erich Benevides Diniz
fonte
1

Quando você estiver no diretório do seu projeto. use cd path/to/directoryentão use ng g c component_name --spec=falseele automatiza tudo e é livre de erros

os g cmeios gerar componente

Brian Akumah
fonte
1

Vá para a pasta do projeto no prompt de comando ou no Terminal do Projeto.

Execute cmd: ng gc componentname

insira a descrição da imagem aqui

Brahmmeswara Rao Palepu
fonte
1

A CLI angular fornece todos os comandos que você precisa no desenvolvimento de aplicativos. Para seus requisitos específicos, você pode usar facilmente ng g( ng generate) para concluir o trabalho.

ng g c directory/component-nameirá gerar component-namecomponente na directorypasta.

A seguir, é apresentado um mapa de alguns comandos simples que você pode usar em seu aplicativo.

  1. ng g c comp-nameou ng generate component comp-namepara criar um componente com o nome 'comp-name'
  2. ng g s serv-nameou ng generate service serv-namepara criar um serviço com o nome 'serv-name'
  3. ng g m mod-nameou ng generate module mod-namepara criar um módulo com o nome 'mod-name'
  4. ng g m mod-name --routingou ng generate module mod-name --routingpara criar um módulo com o nome 'mod-name' com roteamento angular

Espero que isto ajude!

Boa sorte!

Kavindu Narathota
fonte
1

Se você usa o VSCode, considere usar o Console Angular

Ele fornece uma interface para a CLI Angular. Você verá uma opção para especificar o caminho.

A CLI angular é imensamente poderosa e extensível. De fato, existem tantos recursos que é útil que os desenvolvedores tenham todas as diferentes opções de configuração para cada comando disponível.

Com o Angular Console, você receberá recomendações e poderá exibir até os recursos mais facilmente esquecidos ou raramente usados!

O Angular Console é, acima de tudo, uma maneira mais produtiva de trabalhar com o que a CLI Angular fornece.

C_Ogoo
fonte
0

Primeiramente, para criar um componente, você precisa usar: -

  • ng gc componentname

    Usando o comando acima, o novo componente será criado em uma pasta com
    (componentname) que você especificou acima.

Mas se você precisar criar um componente dentro de outro componente ou em uma pasta específica: -

  • ng gc componentname / newComponentName
datta ambareesh
fonte
0

Necessidade de usar --dryRun ao usar o diretório personalizado

Você pode passar seu caminho de diretório personalizado junto com o ngcomando

ng g c myfolder\mycomponent

Mas há chances de você soletrar o caminho e criar uma nova pasta ou alterar as diretivas de destino. Por esse motivo, dryRuné muito útil. Ele exibe uma saída de como as alterações serão afetadas.
insira a descrição da imagem aqui

Após verificar o resultado, você pode executar o mesmo comando sem -dfazer as alterações.

--dryRun = true | false

Quando verdadeiro, executa e relata a atividade sem gravar os resultados.

Padrão: false

Aliases: -d

Documento oficial: - https://angular.io/cli/generate

Ismail
fonte