I'm trying to import a class into a module in Ionic/angular APP. But when try release appears this error:

ERROR in : Unexpected directive 'SeedModalPage in /home/robson/Lunes/repositories/bolunes-app/src/app/seed-modal/seed-modal.page.ts' imported by the module 'SharedModule in /home/robson/Lunes/repositories/bolunes-app/src/app/seed-modal/shared.module.ts'. Please add a @NgModule annotation.

[ERROR] An error occurred while running subprocess ng.

SeedModalPage is a class. There any way to add @NgModule in it? I tryed do this, but the result is the following error:

ERROR in : directive 'SeedModalPage' is exported recursively by the module 'SeedModalPage in /home/robson/Lunes/repositories/bolunes-app/src/app/seed-modal/seed-modal.page.ts'

seed-modal-page.ts

import { Component, NgModule, OnInit } from "@angular/core";
import { NavController, ModalController } from "@ionic/angular";
import { WalletServiceService } from "../services/wallet-service.service";
import { ToastController } from "@ionic/angular";
@Component({
  selector: "app-seed-modal",
  templateUrl: "./seed-modal.page.html",
  styleUrls: ["./seed-modal.page.scss"],
})
@NgModule({
  exports: [SeedModalPage],
})
export class SeedModalPage implements OnInit {
  seedWord: string;
  password: string;
  constructor(
    private nav: NavController,
    private modalCtrl: ModalController,
    private wallet: WalletServiceService,
    public toastController: ToastController
  ) {}

  ngOnInit() {}

  handleShowSeed() {
    if (this.password === null) {
      this.presentToast("Informe sua senha corretamente!");
      return;
    }
    this.wallet
      .getSeedEncrypt()
      .then((resp) => {
        const seed = this.wallet.descryptSeed(resp, this.password);
        if (seed) {
          this.seedWord = seed;
        } else {
          this.presentToast("erro : Senha está incorreta!");
        }
      })
      .catch((errors) => {
        this.presentToast(errors);
      });
  }

  closeModal() {
    this.modalCtrl.dismiss();
  }
  async presentToast(text) {
    const toast = await this.toastController.create({
      message: text,
      duration: 2000,
    });
    toast.present();
  }
}

CodePudding user response：

I guees that you should have mistaken the @NgModule decoration and @Component. Or even worst, you have mixed up both:

@NgModule is the decoration to define your modules. @Component is the *decoration to define your components (and pages).

@NgModule basic structure:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppComponent } from './app.component';
 
import { AppRoutingModule } from './app-routing.module';
 
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And your SeedModalPage component, only should have this:

imports....
@Component({
  selector: "app-seed-modal",
  templateUrl: "./seed-modal.page.html",
  styleUrls: ["./seed-modal.page.scss"],
})
export class SeedModalPage implements OnInit {
  seedWord: string;
  password: string;
  constructor(
    private nav: NavController,....

So you should leave this component onlye as a "component", and declare it in the "declarations" section of your "SharedModule":

@NgModule({
  declarations: [
     ...
     SeedModalPage,
     ...],
  exports: [
     ...,
     SeedModalPage, // you only have to add to 'exports' if are going to used it outside your SharedModule
     ....],
})
export class SharedModule {}

CodePudding user response：

It can't be a component and a module at the same time. Create a module and import the component there for declaration and export as seen here https://angular.io/guide/architecture-modules