Está dando erro no angular

guilhermebhte · Outubro 25, 2022, 1:28am

empresa.module

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { SharedModule } from "app/shared/shared.module";
import { EmpresaPlanoVendaBoletoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-boleto/empresa-plano-venda-boleto.component";
import { EmpresaPlanoVendaCartaoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-cartao-credito/empresa-plano-venda-cartao-credito.component";
import { EmpresaPlanoVendaMostrarFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-mostrar/empresa-plano-venda-mostrar.component";
import { EmpresaPlanoVendaPagamentoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-pagamento/empresa-plano-venda-pagamento.component";
import { EmpresaPlanoVendaPrincipalFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-principal/empresa-plano-venda-principal.component";
import { EmpresaPlanoVendaValorFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-valor/empresa-plano-venda-valor.component";
import { EmpresaPlanoVendaFormAlterarComponent } from "../empresa-plano-venda/form-alterar/empresa-plano-venda-form-alterar.component";
import { EmpresaPlanoVendaPesquisaComponent } from "../empresa-plano-venda/pesquisa/empresa-plano-venda-pesquisa.component";
import { UsuarioPesquisaComponent } from "../usuario/pesquisa/usuario-pesquisa.component";
import { EmpresaRoutes } from "./empresa.routing";
import { EmpresaFormComponent } from "./form/empresa-form.component";
import { EmpresaPesquisaComponent } from "./pesquisa/empresa-pesquisa.component";

@NgModule({
  declarations: [
    EmpresaPesquisaComponent,
    EmpresaFormComponent,
    EmpresaPlanoVendaPesquisaComponent,
    EmpresaPlanoVendaFormAlterarComponent,
    EmpresaPlanoVendaMostrarFormComponent,
    EmpresaPlanoVendaValorFormComponent,
    EmpresaPlanoVendaPagamentoFormComponent,
    EmpresaPlanoVendaBoletoFormComponent,
    EmpresaPlanoVendaCartaoFormComponent,
    EmpresaPlanoVendaPrincipalFormComponent,
  ],
  imports: [
    SharedModule,
    RouterModule.forChild(EmpresaRoutes),
    UsuarioPesquisaComponent
  ],
})
export class EmpresaModule {}

usuario.module

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { SharedModule } from "app/shared/shared.module";
import { UsuarioFormComponent } from "./form/usuario-form.component";
import { UsuarioPesquisaComponent } from "./pesquisa/usuario-pesquisa.component";
import { UsuarioRoutes } from "./usuario.routing";
@NgModule({
declarations: [UsuarioPesquisaComponent, UsuarioFormComponent],
imports: [SharedModule, RouterModule.forChild(UsuarioRoutes)],
exports: [UsuarioPesquisaComponent],
})
export class UsuarioModule {}

Está dando este erro:

Error: src/app/modules/admin/usuario/pesquisa/usuario-pesquisa.component.ts:37:14 - error NG6002: Appears in the NgModule.imports of EmpresaModule, but could not be resolved to an NgModule class.    

Is it missing an @NgModule annotation?

37 export class UsuarioPesquisaComponent extends DefaultListarComponent {

O que pode ser este erro ?

Pesquisei mas não descobri como ajustar

Lucas_Camara · Outubro 25, 2022, 11:25am

Será que o componente UsuarioPesquisaComponent deveria está como import aqui msm?

guilhermebhte · Outubro 25, 2022, 12:40pm

Obrigado @Lucas_Camara

Realmente não precisa.

guilhermebhte · Outubro 25, 2022, 2:01pm

Na verdade no empresa-form.component.html, que está dentro do empresa.module eu utilizo este componente, conforme mostro abaixo. Como importar este componente para dentro do empresa.module, sem dar este erro ?

<mat-tab label="Usuários">
    <ng-template matTabContent>
        <usuario-pesquisa></usuario-pesquisa>
    </ng-template>
</mat-tab>

guilhermebhte · Outubro 25, 2022, 2:02pm

usuario-pesquisa.component.ts

import {
  ChangeDetectionStrategy,
  Component,
  ViewEncapsulation,
} from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { fuseAnimations } from "@fuse/animations";
import { StateStorageService } from "app/core/auth/state-storage.service";
import { DefaultListarComponent } from "app/core/classes/default.listar.component";
import { environment } from "environments/environment";

@Component({
  selector: "usuario-pesquisa",
  templateUrl: "./usuario-pesquisa.component.html",
  styles: [
    `
      .usuario-pesquisa-grid {
        grid-template-columns: 48px auto 40px;

        @screen sm {
          grid-template-columns: 48px auto 112px 72px;
        }

        @screen md {
          grid-template-columns: 48px 112px auto 112px 72px;
        }

        @screen lg {
          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
        }
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: fuseAnimations,
})
export class UsuarioPesquisaComponent extends DefaultListarComponent {
  colunas: string[] = [
    "nome",
    "cpf",
    "login",
    "celular",
    "email",
    "tipoUsuario",
  ];

  rota = "usuario/";
  urlBase = "usuario";
  nomePagina = "Usuário";
  environmentBackend = environment.PES;

  constructor(
    protected router: Router,
    protected stateStorageService: StateStorageService,
    private routaAtual: ActivatedRoute
  ) {
    super(router, stateStorageService);
  }

  async ngOnInit(): Promise<void> {
    await super.ngOnInit();
    if (this.routaAtual.snapshot.url.length > 0) {
      this.idEmpresa = this.routaAtual.snapshot.url[0].path;
    } else {
      this.idEmpresa = this.stateStorageService.getUsuarioLogado().idEmpresa;
    }
    this.pesquisar();
  }
}

usuario-pesquisa.component.html

<div style="width: 100%; height: 100%; padding-bottom: 50px">
  <div class="grid" style="padding-top: 10px">
    <div
      class="xl:col-span-2 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden"
    >
      <div class="overflow-x-auto mx-6">
        <table
          class="usuario-pesquisa-grid"
          #table
          mat-table
          [dataSource]="dataSource"
          [trackBy]="trackByFn"
          #recentTransactionsTable
          matSort
          matSortActive="nome"
          matSortDisableClear
          matSortDirection="desc"
          fusePerfectScrollbar
        >
          <ng-container matColumnDef="nome">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Nome</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.nome }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="cpf">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>CPF</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.cpf }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="login">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Login</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.login }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="celular">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Celular</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.celular }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="email">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>E-mail</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.email }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="tipoUsuario">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>
              Tipo de usuário
            </th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.tipoUsuarioDescricao }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="empresa">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Empresa</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
              >
                {{ entidade.empresa }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="filial">
            <th mat-header-cell *matHeaderCellDef>Filiais</th>
            <td mat-cell *matCellDef="let entidade">
              <span
                class="pr-6 font-medium text-sm text-secondary whitespace-nowrap"
                *ngFor="let filial of entidade.filiais; trackBy: trackByFn"
              >
                {{ filial.nome }}<br />
              </span>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="colunas"></tr>
          <tr
            matTooltip="Visualizar {{ row?.nome }}"
            class="order-row h-16"
            class="order"
            mat-row
            *matRowDef="let row; columns: colunas"
            (click)="visualizar(row.idString)"
          ></tr>
        </table>
      </div>
    </div>
  </div>
</div>
<mat-paginator
  class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
  [ngClass]="{ 'pointer-events-none': isLoading }"
  #paginator
  [length]="resultsLength"
  [pageIndex]="0"
  [pageSize]="numeroPaginaInicial"
  [pageSizeOptions]="[5, 15, 25, 50, 75, 100, 500]"
  (page)="paginacao($event)"
  [showFirstLastButtons]="true"
>
</mat-paginator>

Lucas_Camara · Outubro 25, 2022, 2:05pm

Vejo duas formas:

Vc pode tentar declarar (declarations) o componente diretamente ao módulo onde ele será usado
Vc pode tentar exportar (exports) o componente num módulo e importar esse módulo no outro módulo onde o componente será usado.

guilhermebhte · Outubro 25, 2022, 4:16pm

Hoje está assim:
usuario.module.ts
Está em declarations e exports

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { SharedModule } from "app/shared/shared.module";
import { UsuarioFormComponent } from "./form/usuario-form.component";
import { UsuarioPesquisaComponent } from "./pesquisa/usuario-pesquisa.component";
import { UsuarioRoutes } from "./usuario.routing";
@NgModule({
declarations: [UsuarioPesquisaComponent, UsuarioFormComponent],
imports: [SharedModule, RouterModule.forChild(UsuarioRoutes)],
exports: [UsuarioPesquisaComponent],
})
export class UsuarioModule {}

´
No module que desejo utilizar:
Fiz assim, declarando ele no import

empresa.module.ts

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { SharedModule } from "app/shared/shared.module";
import { EmpresaPlanoVendaBoletoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-boleto/empresa-plano-venda-boleto.component";
import { EmpresaPlanoVendaCartaoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-cartao-credito/empresa-plano-venda-cartao-credito.component";
import { EmpresaPlanoVendaMostrarFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-mostrar/empresa-plano-venda-mostrar.component";
import { EmpresaPlanoVendaPagamentoFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-pagamento/empresa-plano-venda-pagamento.component";
import { EmpresaPlanoVendaPrincipalFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-principal/empresa-plano-venda-principal.component";
import { EmpresaPlanoVendaValorFormComponent } from "../empresa-plano-venda/components/empresa-plano-venda-valor/empresa-plano-venda-valor.component";
import { EmpresaPlanoVendaFormAlterarComponent } from "../empresa-plano-venda/form-alterar/empresa-plano-venda-form-alterar.component";
import { EmpresaPlanoVendaPesquisaComponent } from "../empresa-plano-venda/pesquisa/empresa-plano-venda-pesquisa.component";
import { UsuarioPesquisaComponent } from "../usuario/pesquisa/usuario-pesquisa.component";
import { EmpresaRoutes } from "./empresa.routing";
import { EmpresaFormComponent } from "./form/empresa-form.component";
import { EmpresaPesquisaComponent } from "./pesquisa/empresa-pesquisa.component";

@NgModule({
  declarations: [
    EmpresaPesquisaComponent,
    EmpresaFormComponent,
    EmpresaPlanoVendaPesquisaComponent,
    EmpresaPlanoVendaFormAlterarComponent,
    EmpresaPlanoVendaMostrarFormComponent,
    EmpresaPlanoVendaValorFormComponent,
    EmpresaPlanoVendaPagamentoFormComponent,
    EmpresaPlanoVendaBoletoFormComponent,
    EmpresaPlanoVendaCartaoFormComponent,
    EmpresaPlanoVendaPrincipalFormComponent,
  ],
  imports: [
    UsuarioPesquisaComponent,
    SharedModule,
    RouterModule.forChild(EmpresaRoutes),
  ],
})
export class EmpresaModule {}

Mas ao digitar npm start, dá erro.

Build at: 2022-10-25T16:17:37.826Z - Hash: fbd4ad583793557a - Time: 2925ms

Error: src/app/modules/admin/usuario/pesquisa/usuario-pesquisa.component.ts:38:14 - error NG6002: Appears in the NgModule.imports of EmpresaModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

38 export class UsuarioPesquisaComponent extends DefaultListarComponent {
~~~~~~~~~~~~~~~~~~~~~~~~
× Failed to compile.

Estou fazendo certo ?

@Lucas_Camara

guilhermebhte · Outubro 25, 2022, 4:18pm

Colocando o UsuarioPesquisaComponent como declarations no empresa.module.ts.

import { NgModule } from “@angular/core”;
import { RouterModule } from “@angular/router”;
import { SharedModule } from “app/shared/shared.module”;
import { EmpresaPlanoVendaBoletoFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-boleto/empresa-plano-venda-boleto.component”;
import { EmpresaPlanoVendaCartaoFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-cartao-credito/empresa-plano-venda-cartao-credito.component”;
import { EmpresaPlanoVendaMostrarFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-mostrar/empresa-plano-venda-mostrar.component”;
import { EmpresaPlanoVendaPagamentoFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-pagamento/empresa-plano-venda-pagamento.component”;
import { EmpresaPlanoVendaPrincipalFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-principal/empresa-plano-venda-principal.component”;
import { EmpresaPlanoVendaValorFormComponent } from “…/empresa-plano-venda/components/empresa-plano-venda-valor/empresa-plano-venda-valor.component”;
import { EmpresaPlanoVendaFormAlterarComponent } from “…/empresa-plano-venda/form-alterar/empresa-plano-venda-form-alterar.component”;
import { EmpresaPlanoVendaPesquisaComponent } from “…/empresa-plano-venda/pesquisa/empresa-plano-venda-pesquisa.component”;
import { UsuarioPesquisaComponent } from “…/usuario/pesquisa/usuario-pesquisa.component”;
import { EmpresaRoutes } from “./empresa.routing”;
import { EmpresaFormComponent } from “./form/empresa-form.component”;
import { EmpresaPesquisaComponent } from “./pesquisa/empresa-pesquisa.component”;

@NgModule({
declarations: [
EmpresaPesquisaComponent,
EmpresaFormComponent,
EmpresaPlanoVendaPesquisaComponent,
EmpresaPlanoVendaFormAlterarComponent,
EmpresaPlanoVendaMostrarFormComponent,
EmpresaPlanoVendaValorFormComponent,
EmpresaPlanoVendaPagamentoFormComponent,
EmpresaPlanoVendaBoletoFormComponent,
EmpresaPlanoVendaCartaoFormComponent,
EmpresaPlanoVendaPrincipalFormComponent,
UsuarioPesquisaComponent
],
imports: [SharedModule, RouterModule.forChild(EmpresaRoutes)],
})
export class EmpresaModule {}

Mas ao digitar npm start, dá erro.

Error: src/app/modules/admin/usuario/pesquisa/usuario-pesquisa.component.ts:38:14 - error NG6007: The Component 'UsuarioPesquisaComponent' is declared by more than one NgModule.

38 export class UsuarioPesquisaComponent extends DefaultListarComponent {
                ~~~~~~~~~~~~~~~~~~~~~~~~
  src/app/modules/admin/empresa/empresa.module.ts:29:5
    29     UsuarioPesquisaComponent
           ~~~~~~~~~~~~~~~~~~~~~~~~
    'UsuarioPesquisaComponent' is listed in the declarations of the NgModule 'EmpresaModule'.
  src/app/modules/admin/usuario/usuario.module.ts:9:18
    9   declarations: [UsuarioPesquisaComponent, UsuarioFormComponent],
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'UsuarioPesquisaComponent' is listed in the declarations of the NgModule 'UsuarioModule'.

Lucas_Camara · Outubro 25, 2022, 5:04pm

Hmm, taí uma coisa que não sabia. Parece que não é possível um mesmo módulo declarado em mais de um módulo.

Então, tenta exportar o componente no UsuarioModule, e depois importa o UsuarioModule em EmpresaModule.

Está dando erro no angular

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI