Suitable typing for imported components lacking a common interface implementation

Looking for a way to avoid duplicating the array entries:

import { ComponentA } from './components/A.component';
import { ComponentB } from './components/B.component';

const COMPONENTS: any[] = [
  ComponentA,
  ComponentB
];

@NgModule({
  declarations: COMPONENTS,
  exports: COMPONENTS
})
export class ExampleModule {
}

What would be a more specific type for const COMPONENTS: any[] besides any[]? Using object[] seems to work, but there may be a better solution that I have yet to find.

Answer №1

In this case, there seems to be no specific instructions provided. Since Components are often represented by an empty class, there isn't a distinct interface that exists for them (the same goes for pipes and directives).

Examining the angular source code reveals that the NgModule interface defines declarations and exports as having the type

Array<Type<any>|any[]>;

Check out the source here

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

Determine the category of a container based on the enclosed function

The goal is to determine the type of a wrapper based on the wrapped function, meaning to infer the return type from the parameter type. I encountered difficulties trying to achieve this using infer: function wrap<T extends ((...args: any[]) => any) ...

Looking to categorize and sum the values within an array of objects using JavaScript?

I'm looking to optimize this response data within my Angular application. res=[ { "url": "/page1", "views": 2 }, { "url": "/page2", "views": 1 }, { "url": "/page1", "views": 10 }, { "url": "/page2", "views": 4 }, { "url": "/page3", "views": 1 }, ...

Meteor - The dependency specified in [email protected] or [email protected] is unmet

I am facing an issue with my meteor project using angular2. When I try to install the package rxjs5.0.0-beta.11 using 'meteor npm install', it gives me the following message: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Angular - Implementing a custom RouteReuseStrategy to clear stored routes based on a specified condition

Utilizing RouteReuseStrategy to save routes with specific conditions, I am in need of accessing a form from another form without losing the filled inputs in the first form for functional purposes. Two questions arise: 1) Currently, I have been setting a ...

Exploring the world of form interactions in Angular: A guide to creating dynamic element communication

I have created a form using Angular, and I want to display a specific value in my input field when an element is selected from the dropdown. Additionally, since the values in the dropdown are fetched from a server, I want to show a corresponding label for ...

Highchart in ionic 2 not displaying

https://i.sstatic.net/q2CPR.png I inserted code for a highchart on my webpage, but it's not appearing I followed instructions from this video tutorial https://www.youtube.com/watch?v=FSg8n5_uaWs Can anyone help me troubleshoot this issue? This is ...

Utilizing files that do not have the extension '.ts' or '.tsx' within the 'ts_library' as dependencies

My current challenge involves importing a JSON file from TypeScript while utilizing the resolveJsonModule flag in my tsconfig. The problem lies in how I can provide this JSON file to ts_library since it seems unable to locate the file. This issue extends t ...

Sharing precise API information between React components in React Components

I am currently learning react and facing an issue with sending data to other component files. I am trying to verify a user login from a backend API within an if statement, and if successful, I want to send the user ID to another component file. However, ...

There seems to be a problem with the [at-loader] node_modules@typesjasmine

My webpack build suddenly started failing with no package updates. I believe a minor version change is causing this issue, but I'm unsure how to resolve it. Can someone provide guidance on what steps to take? ERROR in [at-loader] node_modules\@t ...

Challenges Faced with Implementing Active Reports in Angular 9

After following all the necessary steps outlined in this website to integrate Active Reports with Angular 9 (), I encountered an error when trying to compile my app: ERROR in The target entry-point "@grapecity/activereports-angular" has missing dependen ...

Encountered a problem while attempting to create a new project using angular/cli

I'm brand new to npm and Angular 2, and I'm attempting to set up a fresh Angular 2 project using angular/cli. My current setup includes: Node v8.9.3 npm v5.6.0 Windows 10 To start, I executed npm install -g @angular/cli successfully. Next, I n ...

Custom positioning of Mui Snackbar in V5

I've been attempting to position a Snackbar in the top right corner with some customization for the top property, but I'm struggling to get it to display correctly. Here's what I've tried: import React from "react"; import { ...

angular 2 choose text feature

Is there a way in Angular 2 to retrieve the selected text from an option element? Especially considering I have multiple select elements dynamically generated. Do I need to store them in an array? And how do I go about retrieving the text for all of them, ...

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, i ...

Resetting the modal scroll time when the content of the modal is refreshed

I have implemented the modal in my application using ng-bootstrap. Within the modal, there are multiple pages that can be navigated using the Next and Back buttons. An issue I am facing is that when a page is long and requires scrolling, it loads in the ...

Transferring properties to components within ng-content (attributes that are not accessible in the component where the code is located)

I am in the process of creating a carousel. The goal is for the developer to simply write all the markup in one place (let's say in app.component.html) with just an options property, and then have the carousel take control. The issue lies in the fac ...

Using Angular to create a dynamic form with looping inputs that reactively responds to user

I need to implement reactive form validation for a form that has dynamic inputs created through looping data: This is what my form builder setup would be like : constructor(private formBuilder: FormBuilder) { this.userForm = this.formBuilder.group({ ...

Tips for making several HTTP requests simultaneously using a combination of `Observable.interval` and `forkJoin` in

I set out to design an innovative HTTP polling system, following these specific guidelines: Invoke multiple http requests simultaneously (using forkJoin) Execute these requests at regular intervals (Polling) Deliver data to subscribers only if it is new ...

How can I extend a third-party JavaScript library in TypeScript using a declaration file?

Currently, I am working on creating a .d.ts file for an external library called nodejs-driver. While I have been able to map functions and objects successfully, I am struggling with incorporating the "inherit from objects defined in the JS library" conce ...

Suggestions for Deleting Previous Polylines When Adding a New Path

Currently, I am working on a project in Angular that involves using Leaflet map to display data with JSON coordinates for flight paths. The issue I am facing is that when the data updates, the polyline path on the map gets duplicated. I have tried variou ...