Can an excessive amount of classes cause my Angular application to run sluggishly?

Within my Angular 7 application, I have generated approximately 200 to 300 classes for model types (e.g. component.model.ts) solely for type checking purposes.

I have not instantiated any objects from these classes.

As I navigate through the application, I notice a gradual slowdown and encounter performance issues.

I suspect that these classes may be contributing to the performance decline - do you think my assumption is correct?

If I were to replace these classes with interfaces for type checking instead, would it potentially lead to an improvement in my application's performance?

Answer №1

When it comes to models, my preference is to utilize interfaces because they are unable to be initialized and therefore do not contribute to the final bundle size. Interfaces serve a specific purpose during development only, similar to zero-calorie treats - yes, I would definitely opt for using interfaces.

As for whether having numerous classes could potentially lead to performance issues, I am uncertain. It seems unlikely that creating 200 classes that ideally should have been interfaces but were never actually instantiated would cause any significant problems.

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

Conceal or remove disabled years in Angular Material datepicker

I previously disabled years prior to 2018, but now I would like to hide or delete them. The year selection range currently starts from 1998, but it should begin at 2018 instead. Is there a way to display only 3-4 years instead of the current 24-year rang ...

Exploring ways to use TypeScript to export a Mongoose model?

There's a module I need to export in order to avoid the error "OverwriteModelError: Cannot overwrite Task model once compiled". I've tried various solutions but none seem to work. The problem lies in the last line (export default models...) impo ...

What is the best approach for transferring non-string objects between routes in Angular?

I am currently developing a custom file viewer. To achieve this, I have created a specialized component known as FileBrowserComponent that is specifically designed to be displayed when the route /files is accessed. When navigating, I include a query param ...

Angular Universal in combination with AngularFire server experiences a hanging issue due to the first() pipe

I am currently developing an angular/firestore application that requires SSR capabilities. I have integrated angular universal into the project and everything seems to be functioning properly until I utilize the first() pipe on any of the firestore calls, ...

What is the best way to load a component every time the function is called?

Currently, I am utilizing Angular and endeavoring to create reusable actions such as bulk updates, deletes, and deactivations. I have incorporated all of these actions into another component and aim to use it as a generic method. This implies that I have ...

Preserve your NativeScript/Angular ImagePicker choice or retrieve the complete file path

After choosing an image with the Image Picker, I get a content// URL content://com.android.providers.media.documents/document/image%3A139 However, when using ImageSource.fromAsset(), I receive an empty object. My main objective is to save this image as a ...

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

For my Angular 10 application, I created a service to facilitate communication between components: export class CommunicationService { private messageSubject = new Subject<Message>(); sendMessage(code: MessageCode, data?: any) { this.messag ...

Is it possible to generate an array of objects, where each object includes an observable retrieved through forkJoin?

let food = { id: 1, isTasty: false } Imagine I have a custom function that takes the ID of a food item and returns an observable which resolves to a boolean indicating whether the food is tasty or not. I wish to loop through an array of food items an ...

What is preventing the mat-slide-toggle from being moved inside the form tags?

I've got a functioning slide toggle that works perfectly, except when I try to move it next to the form, it stops working. When placed within the form tag, the toggle fails to change on click and remains in a false state. I've checked out other ...

Is there Polyfill Compatibility for Custom Elements in Angular 9?

When it comes to polyfilling support for custom elements created with Angular, there are various recommendations available. This demo demonstrates that adding the following polyfill in polyfills.ts works: import '@webcomponents/webcomponentsjs/custo ...

Sorting and paginating the PrimeNG data table causes the webpage to automatically scroll to the top

Currently utilizing PrimeNG Datatable with pagination enabled. When attempting to sort a column or click on pagination buttons, the page automatically scrolls to the top. This behavior is due to the default href="#" in Primeng anchor tags. For example: & ...

Angular 2 AOT implementation with External Dependencies

Utilizing Highcharts and Kendo Charts within my angular 2 application, I encountered issues during AOT compilation such as Cannot Import Module or HomeModule' is not exported by or Cannot Determine Module .. It has been suggested that I should i ...

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

After installing the npm module, I encountered a problem while using node.js version 14.17.6. I am a beginner in Angular and struggling to find a solution due to not using the latest Angular CLI version. Any help would be greatly appreciated. Thank you in ...

Ways to extract values from a javascript hash map by exclusively incorporating an array

So here's the issue I'm encountering. Let's consider the following scenario: let surfaces: Map<any, any> = new Map([{"83.1" => Object}, {"84.1" => Object}]) let arr1 = ["83.1"] This is the desired o ...

Compiler is unable to comprehend the conditional return type

I've done some searching, but unfortunately haven't been able to find a definitive solution to my issue. Apologies if this has already been asked before, I would appreciate any guidance you can offer. The problem I'm facing involves a store ...

Angular2 with Electron is a stellar demonstration of a successful integration

I'm interested in exploring Electron with Angular2 and I'm on the lookout for a reliable example on GitHub that combines these technologies. Ideally, I would like to find a repository that I can easily download as a zip file, run npm install, npm ...

Tips for importing a file with a dynamic path in Angular 6

I'm facing an issue where I need to import a file from a path specified in a variable's value. For example, it looks like this: let test = require(configurationUrl); Here, configurationUrl represents a path such as '../../assets/app.conf.j ...

core.js:5873 - An issue occurred where the property 'filename' could not be read due to being undefined

My aim is to upload images to my Node.JS server and retrieve them from an Angular client using the provided code snippets: image.ts: export class Image { fieldname: string; originalname: string; encoding: string; mimetype: string; des ...

having difficulties sorting a react table

This is the complete component code snippet: import { ColumnDef, flexRender, SortingState, useReactTable, getCoreRowModel, } from "@tanstack/react-table"; import { useIntersectionObserver } from "@/hooks"; import { Box, Fl ...

Different parameters in an Angular filter pipe

Currently, I am facing a challenge in implementing multiple filters on a pipe for a search result page that retrieves data from an API. How can I integrate different parameters into this filter pipe successfully? Access the application here: https://stack ...