How to share a module between a parent and child module in Angular

Question

I'm new to Angular. I want to use a component (FuncionariosAlteraSenhaComponent) with routing and with a dialog. However I can't import a component in different modules.

I've created a shared.module to import the FuncionariosAlteraSenhaComponent, to be used in others modules. These two modules are AppLogged.module and Funcionarios.module. AppLogged.module is a parent of the Funcionarios.module.

Shared.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuncionariosAlteraSenhaComponent } from '../features/funcionarios/funcionarios-altera-senha/funcionarios-altera-senha.component';


@NgModule({
  entryComponents:[
    FuncionariosAlteraSenhaComponent],

  declarations: [
    FuncionariosAlteraSenhaComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[
    FuncionariosAlteraSenhaComponent
  ]
})

export class SharedModule { }

AppLogged.module

@NgModule({

  entryComponents: [AppLogedComponent, PesquisaColaboradorComponent, EfetuarPagamentoComponent,
  PesquisaClienteComponent, PesquisaPedidoComponent, CotacaoVendaComponent, CadastroVeiculoComponent,
  PesquisaVeiculoComponent, CompraComponent, CadastroClienteComponent, SolicitarTransferenciaComponent,
  SaidaTransferenciaComponent, ConfirmarRecebimentoComponent, PesquisaEstoqueComponent,TextoLivreComponent,
  DetalheRecebimentoComponent, PesquisaPedCompraTransfComponent,  EfetuarPagamentosComponent],

  imports: [
    CommonModule,
    MatRadioModule,
    RouterModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatTabsModule,
    MatPaginatorModule,
    MatTableModule,
    MatSortModule,
    MatButtonModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatExpansionModule,
    MatOptionModule,
    MatSelectModule,
    LayoutModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatAutocompleteModule,
    AppLogedRoutingModule,
    MatDialogModule,
    MatMenuModule,
    NgxCurrencyModule,
    NgxMaskModule.forRoot(),
  ],


  declarations: [AppLogedComponent, MenuSideComponent, HeaderComponent, PesquisaColaboradorComponent,
  EfetuarPagamentoComponent, PesquisaClienteComponent, PesquisaPedidoComponent, CotacaoVendaComponent,
  CadastroVeiculoComponent, PesquisaVeiculoComponent,CompraComponent,CadastroClienteComponent,
  SolicitarTransferenciaComponent, SaidaTransferenciaComponent, ConfirmarRecebimentoComponent,
  PesquisaEstoqueComponent,TextoLivreComponent, DetalheRecebimentoComponent, PesquisaPedCompraTransfComponent,  EfetuarPagamentosComponent],

  exports: [AppLogedComponent],
})

export class AppLogedModule { }

Funcionarios.module

@NgModule({
  entryComponents: [FuncionariosComponent, ],
  declarations: [FuncionariosComponent, ],
  bootstrap: [FuncionariosComponent, ],
  exports: [ FuncionariosComponent,  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    NgxMaskModule,
    FormsModule,
    RouterModule,
    MatFormFieldModule,
    MatInputModule,
    MatPaginatorModule,
    MatTableModule,
    MatSortModule,
    MatButtonModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatExpansionModule,
    MatOptionModule,
    MatSelectModule,
    MatDialogModule,
    MatRadioModule,
    MatCardModule,
    FuncionariosRoutingModule,
    MatAutocompleteModule,
    SharedModule ],
})
export class FuncionariosModule { }

Did you try importing SharedModule in AppLogged.module similar to Funcionarios.module? You must import SharedModule in all modules those want to use FuncionariosAlteraSenhaComponent. — user2216584
– user2216584, Commented Jun 11, 2019 at 0:29
Yes, I tried. Although I'm getting an error when importing shared.module within Funcionarios.module ``` Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" </div> ``` If I remove the importing the error doesn't occur — Wagner Vieira
– Wagner Vieira, Commented Jun 11, 2019 at 12:16
I added FormsModule and ReactiveFormsModule, Within imports and exports of Shared.module and resolved the issue (Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" </div> ) — Wagner Vieira
– Wagner Vieira, Commented Jun 11, 2019 at 13:06

SiddAjmera · Accepted Answer · 2019-06-11 00:42:32Z

You need to add SharedModule to the imports array of both the FuncionariosModule and the AppLogedModule in order to have access to the FuncionariosAlteraSenhaComponent. As of now, you're only adding it to the imports array of the FuncionariosModule.

Also, your Angular Modules are very tightly coupled with the Angular Material Modules. Ideally you should create a separate module for that. Something like an AppMaterialModule, that would add all the Angular Material modules that you are using to the imports and the exports array.

You will then be able to have access to these Material Modules by simply adding the AppMaterialModule module to the imports array of your Module. It will help make your code more manageable.

PS: Also, are you sure you want to add all those components to the entryComponents array in your AppLogedModule?

Collectives™ on Stack Overflow

How to share a module between a parent and child module in Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related