An error has been detected: An unexpected directive was found. Kindly include a @NgModule annotation

I am encountering an issue while trying to import a class into a module in my Ionic/Angular app. Upon attempting to release, the following error message appears:

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.

The SeedModalPage is a class. Is there a way to add the @NgModule annotation to it? I attempted to do so, but it resulted in 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();
  }
}

Answer №1

It seems like you might have confused the @NgModule decorator with the @Component decorator. Perhaps you've even mixed them up:

@NgModule is used to define your modules. @Component is used to define your components (and pages).

The basic structure of @NgModule:

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 { }

For your SeedModalPage component, you should only have:

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,....

Therefore, you should keep this component strictly as a "component," and declare it in the "declarations" section of your "SharedModule":

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

Answer №2

One cannot serve as both a component and a module concurrently. To address this, it is recommended to set up a module and incorporate the component within it for proper declaration and export. Check out this resource for more information: https://angular.io/guide/architecture-modules

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ES6 and Typescript, when a button is clicked, apply a class to all TD elements within the button except for the first one. No need for jQuery

A sample table structure is shown below: <table> <tr> <td>1</td> <td>joe</td> <td>brown</td> <td><button onclick="addClasses()">Add Class to add TD's in t ...

Unused Angular conditional provider found in final production bundle

Looking for a way to dynamically replace a service with a mock service based on an environment variable? I've been using the ?-operator in the provider section of my module like this: @NgModule({ imports: [ ... ], providers: [ ... en ...

Issues with Webpack bootstrap-loader: Unable to locate './bootstrap-styles' and Unable to locate './bootstrap-scripts'

I am attempting to integrate bootstrap-loader into my angular 2 project. However, during Webpack compilation, I am encountering errors: ERROR in ./~/bootstrap-webpack/index.js Module not found: Error: Can't resolve './bootstrap-styles' in & ...

Stopping HTTP client calls in OnDestroy hook of an Angular Service

Is it possible to automatically unsubscribe from an http call in an Angular service using the ngOnDestroy hook? Just to note, I am already familiar with using the rxjs 'take' operator or manually unsubscribing from the service within the compone ...

The Spring Boot REST application is unexpectedly returning HTML instead of JSON, causing confusion for the Angular application which is unable to recognize the

I am struggling with my Spring Boot application that was generated using . I am having difficulty getting it to return JSON instead of HTML. Here is a snippet of the code: [@CrossOrigin(origins="http://localhost:4200",maxAge=3600) @RestController @Request ...

I am encountering an issue where my application is not recognizing the angular material/dialog module. What steps can I take to resolve this issue and ensure that it functions properly?

For my Angular application, I am trying to incorporate two Material UI components - MatDialog and MatDialogConfig. However, it seems like there might be an issue with the placement of these modules as all other modules are functioning correctly except fo ...

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...

Unable to define the type for the style root in Typescript

I am encountering an error that is asking me to code the following types in the root tag: No overload matches this call. Overload 1 of 2, '(style: Styles<Theme, {}, "root">, options?: Pick<WithStylesOptions<Theme>, "fli ...

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

Adding a method to an object with TypeScript: A step-by-step guide

In my current scenario, I am faced with a challenge where I need to test a function with a specific use of this. However, typescript poses constraints by either disallowing me from adding the method to the object, or if I define it as any, then my interfac ...

Direction of Agm: Display the panel within a separate component

I have a unique setup where I have divided my page into two components, with one taking up 70% of the space and the other occupying 30%. The first component contains a map while the second one is meant to display information on how to reach a destination ( ...

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

When utilizing Ionic with Angular, it is difficult to access the hardware back button on mobile devices that have buttons located within the display/screen

When trying to access the hardware back button in my app, I encountered an issue where I couldn't produce an alert message to the user before the app closed. After posting a question on Stack Overflow (link of the question) and receiving help from the ...

Building a dynamic form in Angular with nested JSON data for enhanced reactivity

Although similar questions have been asked before, I am struggling with a large nested JSON value like the following: "Q-1": { "question": { "text": "What are your hopes and goals for this yea ...

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Utilizing Angular and TypeScript/JavaScript for testing purposes. Each row has been formatted with a newline at the end of the code. formattedStr += car.Name + ' | ' + car.Color + ' | ' + car.Brand + '\r\n' The da ...

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

I have a task that runs asynchronously and takes a long time to complete. When the task starts, I display a mat-spinner with a timeout set at 60000 milliseconds. However, we now have a notification service that provides updates on the job status. I would l ...

What is the best way to bundle my Language Server along with my client?

Currently, I am in the process of developing a language server for VSCode which consists of both a client and a server that communicate over RPC. Fortunately, the official documentation includes a fully functional example, where the language server is div ...

How come my request from Postman to the Adonisjs API is successful, while I encounter a CORS error when trying to call the same API from the fetch() method in

I'm encountering a CORS error while attempting to log in from my Vue 3 / Ionic application in the browser, and I can't seem to pinpoint the cause. Curiously, my login request works flawlessly when using Postman. Here is an example of how my fetc ...

How to use TypeScript to filter an array based on the values of another array

Suppose I have two arrays. The first one looks like this: names: [{ value: 'recordedData', desc: 'Data' } { value: 'recordedNumbers', desc: 'numbers' } { value: 'recordedNames', desc: 'name ...

Issue with Angular 8 - Material Table displaying incorrect data after deletion操作

I'm working on a material table that showcases different options through selects. My main object is the ngModel, which holds all the available options. These options are fetched from a database. Let's say I have a root item called menu, which m ...