When using the "ng build --prod" command in Angular, the name of the class (MyClass.constructor.name) is not

Struggling with maintaining class names when compiling in production mode using Angular 7? I've tried various settings in the Terser plugin, but none seem to solve this issue. Is there a workaround for this problem? Perhaps an alternative to MyClass.constructor.name?

Any help is greatly appreciated.

Check out my custom Webpack configuration below:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                    keep_classnames: true,
                    mangle: false
                }
            })
        ]
    }
};
  • @angular-builders/custom-webpack": "^7.1.1"
  • @angular-devkit/build-angular": "^0.11.2"
  • @angular/cli": "^7.0.4",

Answer №1

When it comes to optimized Javascript code, Angular applications in production mode undergo a minification process that converts all classes, functions, and variables names to shorter versions (usually one letter) to reduce the size of the bundle that is loaded. This means that relying on obj.constructor.name and comparing it to a static value may not work as expected.

An alternative that is clean and "minification safe" to

obj.constructor.name === 'MyClass'
is using obj instanceof Myclass.

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

Exploring the depths of Angular2 RC6: Implementing nested modules and routing

Within my application, I have a module called SupportModule which consists of 3 sub-modules: AdminModule, ChatModule, and ContactModule. Each of these modules has its own defined routing structure. The overall structure resembles something like this: htt ...

Having trouble with React Hook Form controlled input and typing

My application utilizes the react-hook-forms library along with the office-ui-fabric-react framework. To integrate the framework inputs, I wrap the 3rd party component using the <Controller> element. The current setup is functional as shown below: ...

Ways to incorporate NPM packages into your browser projects using TypeScript

This is the current setup: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <script src="../node_modules/systemjs/dist/system.js"></script> <script src="../node_modules/lodash/in ...

Example of Using Bluebird in a Chain of Catch and Then Functions

I am struggling to understand how promises work in my code flow setup. I want to create a register function with multiple steps, but I'm unsure of what is achievable and what is not. Imagine I have a register function where I need to: register a u ...

Learn the process of incorporating a dynamic title for your VueJS application

To enable dynamic page titles, I've implemented the following routing mechanism: { path: '/home', meta: { title : 'Welcome Back, ' + profile.userName + ' – Dashboard | A Company' }, name: 'home', ...

Utilizing Angular Material to emphasize a row in a table upon clicking

Guide on Applying a "Highlight" Effect to a Row When Clicked - Angular 8 Below is the structure of my table: <ng-container *ngIf="videos$ | async as videos"> <mat-table [dataSource]="videos" *ngIf="videos.length"> <ng-container matColu ...

Can you explain the distinction between Array<string> and string[]?

Can you explain the contrast between Array<string> and string[]? var companies: Array<string> = ['Samsung', 'Sony', 'LG']; var businesses: string[] = ['Lenovo', 'Asus', 'Acer']; ...

Using Angular to bind an image URL retrieved from a blob in an API

I am having trouble retrieving a blob image from my API and setting it as an img src. This is the download function in my service: public download(fileName: string) { this.http.get('http://x.x.x.x:4000/api/' + fileName, { responseType: &apo ...

I attempted to include a movie in the selected-movie class, but I'm baffled by the issues in my code

I'm working on a service called cart-movie.service.ts which has a method called addMovies for adding movies to the selected-movie class. However, I'm having trouble figuring out how to implement this. app.component.html <div class="col-2" *n ...

Update current properties of objects

I'm feeling like I'm going crazy and could really use some assistance. My predicament involves a function that looks like this: private generateTimeObject(firstObject: someInterface, secondObject?: someInterface) { let firstTime; let secondTi ...

The target of Angular property binding is capable of modifying the component's property

Recently diving into Angular 4, I stumbled upon the Master/Detail component while following the official tutorial located here. In a specific section (found here), they demonstrate property binding between the heroes list component and the hero details com ...

Tips for troubleshooting third-party libraries in Angular applications

Is there a way to use Chrome Source Devtool to analyze code line by line when calling methods from third-party libraries like underscore in Angular, even though the source map doesn't seem to work and it directs you into a bundled vendor.js file? ...

Arranging the output of a Typescript project

I'm currently advocating for Typescript to be implemented in our web application. Can anyone provide insight on the best method for structuring Javascript output files? Should they be excluded from source control? And when it comes to testing, is it p ...

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

I am facing an issue with this script: type Input = string function util(input: Input) { return input } function main(input: Input | null) { const isNull = input === null if (isNull) { return 'empty string' } inpu ...

Tips for retrieving a sizable JSON object from a POST request in Angular 6/7

After transferring some code to enable data export as an excel file in Angular, I encountered a problem with large JSON files. While small JSON files work fine, larger ones cause the process to fail. Here is the snippet of code for the service call: expor ...

Rails 6 seems to be having trouble recognizing JavaScript

I recently developed a new application and installed Bootstrap, jQuery, and Popper using yarn add. I imported Bootstrap's .scss file into app/assets/stylesheets/application.scss, which is working fine for the styles. However, I encountered an issue w ...

An issue has been encountered with code: "ERROR error TS2551: The property 'posts' is not found"

https://i.sstatic.net/VRIsT.pngI've been attempting to run it, but it's unable to generate search results. Specifically, it's not showing search by title. Terminal is displaying this error: ERROR in src/app/app.component.ts(19,11): error ...

ng2 Dragula and the magic of Angular pipes

I have successfully implemented Dragula to make a table of values from a database sortable. Everything functions as intended, with the ability to drag and drop table rows. However, I encounter an issue when I apply a custom pipe to three of the cell values ...

How come the hook keeps triggering endlessly in a loop when I try to pass the updated props?

I've encountered an issue with a custom hook I created for making HTTP requests. The problem is that the request seems to be firing in an endless loop, and I'm unsure of what's causing this behavior. My intention is for the request to only t ...

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

Hey there. I'm diving into TypeScript and currently working on converting an Express backend to TS. Everything was smooth sailing until I encountered some unexpected issues. Specifically, the lines const hasVoted = poll.votedBy.some((voter): boolean = ...