Criar componente para um módulo específico com Angular-CLI

Estou começando a usar o angular-cli e já li muito para encontrar uma resposta sobre o que quero fazer ... sem sucesso, então vim aqui.

Existe uma maneira de criar um componente para um novo módulo?

por exemplo: ng g module newModule

ng g component newComponent (como adicionar este componente ao newModule ??)

porque o comportamento padrão do angular-cli é colocar todos os novos componentes dentro app.module. Gostaria de escolher onde meu componente estará, para poder criar módulos separados e não ter todos os meus componentes dentro app.module. É possível fazer isso usando angular-cli ou eu tenho que fazer isso manualmente?

Para criar um componente como parte de um módulo, você deve

1. ng g module newModule para gerar um módulo,
2. cd newModulepara mudar o diretório para a newModulepasta
3. ng g component newComponent para criar um componente como filho do módulo.

ATUALIZAÇÃO: Angular 9

Agora, não importa em que pasta você está ao gerar o componente.

1. ng g module NewMoudle para gerar um módulo.
2. ng g component new-module/new-component para criar NewComponent.

Nota: Quando a CLI Angular vê new-module / new-component, ela entende e converte o caso para corresponder a new-module -> NewModule e new-component -> NewComponent. Pode ficar confuso no começo, portanto, a maneira mais fácil é combinar os nomes no 2 com os nomes das pastas para o módulo e o componente.

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

Não tenho certeza se a resposta de Alexander Ciesielski talvez estivesse correta no momento da redação, mas posso verificar que isso não funciona mais. Não importa qual diretório do projeto você executa a CLI Angular. Se você digitar

ng g component newComponent

ele irá gerar um componente e importá-lo para o arquivo app.module.ts

A única maneira de usar a CLI para importá-la automaticamente para outro módulo é especificando

ng g component moduleName/newComponent

onde moduleName é um módulo que você já definiu em seu projeto. Se o moduleName não existir, ele colocará o componente no diretório moduleName / newComponent, mas ainda o importará para app.module

Não encontrei uma resposta que mostrasse como usar o cli para gerar um componente dentro de uma pasta de módulo de nível superior e também fizesse com que o componente adicionasse automaticamente a coleção de declarações do módulo.

Para criar o módulo, execute o seguinte:

ng g module foo

Para criar o componente dentro da pasta foo module e adicioná-lo à coleção de declarações do foo.module.ts, execute o seguinte:

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

E o cli irá montar o módulo e o componente assim:

--EDIT a nova versão do CLI angular se comporta de maneira diferente. 1.5.5 não deseja um nome de arquivo de módulo, portanto, o comando com v1.5.5 deve ser

ng g component foo/fooList --module=foo

Você pode tentar o comando abaixo, que descreve o,

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

Então seu comando será como:

ng g c user/userComponent -m user.module

Para Angular v4 e superior, basta usar:

ng g c componentName -m ModuleName

Isto é o que funcionou para mim :

1 -->  ng g module new-module

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

Se você deseja gerar um componente sem seu diretório, use o --flat sinalizador

1. Primeiro, você gera um módulo executando.

ng g m modules/media

isso irá gerar um módulo chamado mediadentro da modulespasta.

2. Segundo, você gera um componente adicionado a este módulo

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

a primeira parte do comando ng g c modules/media/picPickirá gerar uma pasta de componente chamada pasta picPickinterna modules/mediaque conterá nosso novo mediamódulo.

a segunda parte tornará nosso novo picPickcomponente declarado no mediamódulo, importando-o no arquivo do módulo e anexando-o à declarationsmatriz deste módulo.

Vá para o nível do módulo / também podemos estar no nível raiz e digite os comandos abaixo

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

Exemplo:

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

Primeiro gere o módulo:

ng g m moduleName --routing

Isso criará uma pasta moduleName e navegue até a pasta module

cd moduleName

E depois disso gerar o componente:

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

Use --flat para não criar pasta filho dentro da pasta do módulo

Estou tendo problemas semelhantes com vários módulos no aplicativo. Um componente pode ser criado para qualquer módulo, portanto, antes de criar um componente, precisamos especificar o nome do módulo específico.

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

Use este comando simples:

ng g c users/userlist

users: O nome do seu módulo.

userlist: O nome do seu componente.

De acordo com os documentos da Angular, a maneira de criar um componente para um módulo específico é:

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

"nome do diretório" = onde a CLI gerou o módulo de recurso

Exemplo: -

ng generate component customer-dashboard/CustomerDashboard

Isso gera uma pasta para o novo componente na pasta do painel do cliente e atualiza o módulo de recurso com o CustomerDashboardComponent

Primeira corrida ng g module newModule . Então corrang g component newModule/newModule --flat

Criei módulo filho baseado em componente com pasta raiz específica

Esse comando cli abaixo que eu especifiquei, confira

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

Repair is Root Folder do nosso módulo filho

-m é --module

c para compount

g para gerar

Corri para esse problema hoje enquanto desenvolvia um aplicativo Angular 9. Eu recebi o "módulo não existe erro" sempre que adicionava o .module.tsou .moduleao nome do módulo. O CLI precisa apenas do nome do módulo sem extensão. Supondo que eu tivesse um nome de módulo:, brands.module.tso comando que usei foi

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

remova --dry-runquando confirmar que a estrutura do arquivo está correta.

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

exemplo:

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

Um padrão comum é criar um recurso com uma rota, um módulo carregado lento e um componente.

Rota: myapp.com/feature

app-routing.module.ts

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

Estrutura do arquivo:

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

Tudo isso pode ser feito no CLI com:

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

Ou mais curto

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

Ou, se você deixar de fora o nome, o cli solicitará isso. Muito útil quando você precisa criar vários recursos

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

Adicione um componente ao aplicativo Angular 4 usando a Angular CLI

Para adicionar um novo componente angular 4 para o aplicativo, comando de uso ng g component componentName. Após a execução deste comando, a Angular CLI adiciona uma pasta component-nameem src\app. Além disso, as referências do mesmo são adicionadas ao src\app\app.module.tsarquivo automaticamente.

Um componente deve ter uma @Componentfunção decoradora seguida por uma classque precisa ser exporteditada. A @Componentfunção decoradora aceita metadados.

Adicione um componente a uma pasta específica do aplicativo Angular 4 usando a Angular CLI

Para adicionar um novo componente a uma pasta específica, use o comando ng g component folderName/componentName

Se você tiver vários aplicativos declarados em .angular-cli.json (por exemplo, no caso de trabalhar no módulo de recursos)

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

Você pode :

ng g c my-comp -a app-name

-a significa --app (nome)

Eu uso esse comando específico para gerar componentes dentro de um módulo.

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

Este comando irá gerar o componente local para o módulo. ou Você pode alterar o diretório primeiro digitando.

cd <module-directory-name>

e crie o componente.

ng g c <component-name>

Nota: o código entre <> representa nomes específicos do usuário.

1.- Crie seu módulo de recursos como de costume.

ng generate module dirlevel1/module-name

2.- Você pode especificar o CAMINHO DE RAIZ do seu projeto no --module (apenas no --module, (/) os pontos raiz do seu ROOT DO PROJETO e NÃO É O ROOT DO SISTEMA !!! )

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

Exemplo real:

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 

Resultado:

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!

Testado com CLI Angular: 9.1.4

Faça um módulo, serviço e componente em particular módulo

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)