The module 'AppModule' has encountered an unexpected declaration of 'AnyComponent'

Hi there, I'm currently working with Angular2 and am facing an issue when trying to use two classes in the same Typescript file.

During compile time, no errors are shown. However, when attempting to run the page, the console.log displays the following error:

Error: BaseException@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27
    CompileMetadataResolver</CompileMetadataResolver.prototype.getNgModuleMetadata/<@http://www.my.app/panel-module/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35
    ...

Below is the content of my component's typescript file.

// MyComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: '/path/to/view',
})

export class MyObject {
  id: number;
}

export class MyComponent {
   obj: MyObject;

   // additional code here
}

Answer №1

To avoid any issues with having multiple classes in the same file, be sure to rearrange the order of your classes accordingly. In this scenario, the @Component decorator is inadvertently applied to the wrong class MyObject, when it should actually be used for MyComponent!

Remember that the @Component decorator must directly precede the Component definition!

import { Component, OnInit } from '@angular/core';

export class MyObject1 {
  id: number;
}

@Component({
  selector: 'my-app',
  templateUrl: '/path/to/view',
})
export class MyComponent {
   obj: MyObject;

   // unnecessary code
}

export class MyObject2 {
  id: number;
}

Answer №2

Here is the solution that worked for me:

I placed MyObject in its own file and imported it.

// MyObject.ts

export class MyObject {
  id: number;
}

// MyComponent.ts

import { Component, OnInit } from '@angular/core';
import { MyObject } from 'path/to/MyObject';

@Component({
  selector: 'my-app',
  templateUrl: '/path/to/view',
})

export class MyComponent {
   obj: MyObject;

   // unnecessary code
}

Answer №3

Just a heads up, in my situation I had to tweak some JavaScript logic where it couldn't be.

<my-tag [HTML]="sourcesHtml ? sourcesHtml[i] : ''">

After changing it to

<my-tag [HTML]="sourcesHtml[i]">

The error disappeared

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

The deno bundle operation failed due to the absence of the 'getIterator' property on the type 'ReadableStream<R>'

When attempting to run deno with bundle, an error is encountered: error: TS2339 [ERROR]: Property 'getIterator' does not exist on type 'ReadableStream<R>'. return res.readable.getIterator(); ~~~~~~~~~~~ ...

Upgrading to Angular 2: Utilizing ElementRef in ES5

Currently, I am facing a challenge in creating an Attribute directive for Angular 2 that would allow me to set multiple default HTML attributes using a single custom attribute. My intention is to apply this directive specifically to the input element. Howe ...

Securing Your Subscription Key in Azure API Management

Technology mix The API is deployed within a WebApp environment. API Management is set up and the WebApp is configured as a Web service URL. The user interface is developed using Angular application, which accesses API Management endpoints to exhibit data ...

Who is responsible for ensuring that the data has been successfully stored in the state?

As I work on utilizing SSR with TransferState, a question arises about the assurance of data storage in the transferState. This concern stems from the asynchronous nature of http.get, which may result in content delivery to the client before the desired ...

Tips for showcasing information from a nested array and modifying data in an Angular application

I am in the process of developing a cutting-edge Angular application to monitor my fitness workouts at the gym. Enclosed within this array are the diverse exercise names, repetitions, sets, weights, and more that constitute each workout: workoutExercises ...

Calculating the annual total in angular 4 - a step-by-step guide

I have successfully calculated the sum of costs between each other, but now I am facing a challenge in summing up the total budget for the entire year. I have attempted to achieve this, but unfortunately, I am encountering an issue as it is showing me &apo ...

Encountered an error: When trying to install styled-components using npm, there was an issue reading properties of null, specifically 'edgesOut'

C:\Users\user\Desktop\react_sce\test1> npm i styled-components Oops! An error occurred while trying to install styled-components. It seems like there's a problem reading properties of null (specifically 'edgesOut& ...

How can a callback function be connected to a specific route within an Angular routing module?

Currently, I am in the process of developing a robust Angular application that utilizes feature modules with child routes. Each child section comes with its own specific layout, which establishes the state for the child pages, especially for the Minimum Vi ...

Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with (selectionChange)="onChangeLogr($event)" and an object with (onSelectionChange)="onChangeLogr_($event)"? How would I go about doing this? ...

Encountering difficulties with Bootstrap toggle functionality in Angular 2.0 following the establishment of a MEAN stack

While setting up a MEAN stack app following a tutorial, everything was going smoothly until I decided to test some Bootstrap components from their site. After installing Bootstrap in the index.html file for Angular, I noticed that Bootstrap was being loade ...

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

I have created an Ionic application that includes an iframe from a Wordpress website. Here is the code snippet from my home.page.ts file: import { Component } from '@angular/core'; import { DomSanitizer } from "@angular/platform-browser"; @Com ...

Transferring data from two child components back to the parent component

Within my web application, I have a parent component (A) and two children components (B, C). The parent component is responsible for maintaining the basic layout of the page, which remains consistent across all layouts. However, I need to dynamically swap ...

A multidimensional array featuring a variety of data types in TypeScript

I have a custom object named "ThreadObj" that I need to use in creating a structure called THREADLISTS, which will hold multiple arrays of Threadlist. Here is what I have so far: Threadlist: ThreadObj[] = []; THREADLISTS: [ThreadObj[]][ThreadObj] = []; / ...

Implementing `block eval() in Content Security Policy header for an Angular 8 project

Is it possible to disable the eval function in CSP-Header for an Angular project, even if it's not being used directly? Are there any potential negative consequences or errors that could occur when deploying the project? Appreciate your insight. ...

Ways to indicate a mat-checkbox as selected in Angular 7

I recently integrated a mat-checkbox into my project. To set the mat-checkbox as checked, I attempted to use [checked]="true" <div *ngFor="let dwidgets of module.widgets"> <mat-checkbox [formControl]="moduleswidgets.controls['widgets' ...

Tips for storing information without using ngModel in template-driven methodology

Currently facing a dilemma where data needs to be saved to the database from Angular UI. The display format of tabular data changes dynamically based on dropdown selections, without having predefined model properties for binding. The question arises: How ...

How to retrieve information from JSON files utilizing arrays

I have a JSON object that contains connection points data in an array. Here is an example of the structure: assetType : "this" connectionPoints:Array(1) type:{name: "Structure", In my TypeScript file, I am handling this data like so (entity represents ...

Obtaining data from a Nested Json file in Angular 5

Encountering difficulties retrieving data from nested JSON. Error: 1. <h3>{{sampledata}}</h3> displaying [object Object] 2. <p>{{sampleDataModel.Title}}</p> ERROR TypeError: Cannot read property 'Title' of undefined ...

The use of credentials is not allowed when the ‘Access-Control-Allow-Origin’ CORS header is set to ‘*’

My Java web application makes CORS requests where the browser performs an OPTIONS preflight before the actual request. The format of each request is as follows: Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/2 ...

Declaring a function in TypeScript triggers an error notification

I encountered a typescript error while running my code stating that "require" is not a function. To resolve this, I declared the function beforehand; however, a new typescript error now occurs saying "Modifiers cannot appear here." Can anyone assist me w ...