Generated JS does not contain any members of the Angular exported model typescript

When using this straightforward Typescript class as a model in an Angular 5 project

export class Category
{
    id: string;
    label: string;
}

the resulting code does not contain any members

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Category; });
var Category = /** @class */ (function () {
    function Category() {
    }
    return Category;
}());

I am attempting to deserialize JSON data into a list of Category objects using either the json-object-mapper or json-typescript-mapper node modules, but neither is successful due to the absence of generated members in the JS code for the model.

After adding a constructor

constructor() {
    this.label = '';
}

it seems to work - which is logical - but it raises the question why there are functional angular models without constructors. Could this be related to some kind of optimization triggered by Angular's Ahead-of-Time Compilation (AOT)?

Answer №1

When you declare a variable, you are essentially giving instructions to the typescript compiler on how to use that member with a specific type. If you do not assign anything to the member, no JavaScript will be generated. It's important to note that just because a field did not previously exist in the class, it doesn't mean there is something wrong - JavaScript allows for the usage of fields even if they were not initially defined.

If you set an initial value when declaring the field, JavaScript will generate code to initialize that field:

export class Category
{
    id: string = '';
    label: string = '';
}

This code snippet will result in the following emitted JavaScript:

var Category = /** @class */ (function () {
    function Category() {
        this.id = '';
        this.label = '';
    }
    return Category;
}());

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

`Adjusting video frame on canvas`

When I capture video from a user's camera and display it in a 1:1 square, I encounter an issue when trying to draw the picture to a canvas. The image is not drawn in the same location on the canvas. How can I resolve this problem? To see a live examp ...

Transferring form array data through AJAX

My PHP script requires two values: operation => string and data => array. The form below contains dynamically generated inputs: <form method="post" action="/operations.php"> Title: <input type="text" value="valuehere" name="data[tit ...

Identify the mouse's location in relation to its parent element, not the entire webpage

A script I've been working on detects the mouse position relative to the page, taking into account a movement threshold of 100px before triggering certain actions. // Keep track of last cursor positions var cursorDistance = 0; var lastCursorX = null; ...

Error encountered while installing node modules within an angular workspace

Currently, I am facing an issue with my workspace where the command npm install is giving me a series of errors that I cannot seem to resolve. I have tried running it as an admin, manually deleting the node_modules folder, asking for help from a senior col ...

Dual Networked Socket.IO Connection

I have set up a node.js server with an angular.js frontent and I am facing a problem with Socket.IO connections. The issue arises when double Socket.IO connections open, causing my page to hang. var self = this; self.app = express(); self.http = http.Ser ...

The authorization header for jwt is absent

Once the user is logged in, a jwt token is assigned to them. Then, my middleware attempts to validate the token by retrieving the authorization header, but it does not exist. When I try to display the request header by printing it out, it shows as undefine ...

Tips for allowing specific tags using Google's Caja HTML Sanitizer in a node.js environment

I'm currently utilizing the npm module Caja-HTML-Sanitizer with node.js. Although I am able to sanitize the HTML input using the sanitizer() function, I am unsure of how to implement a whitelist in order to restrict only certain tags (e.g. p br stron ...

Issue with a COM object in JavaScript featuring numerous interfaces

Currently, I am dealing with an issue that is driving me close to the edge In my HTA, I have a JavaScript code that needs to interact with various COM objects var com1= new ActiveXObject("progID"); While this setup works smoothly with most COM objects, ...

Exploring JSON data in real-time

My goal here is to utilize the variables retrieved from the route to determine which blog to access from the JSON file. The JSON file consists of an array of sections, each containing an array of blogs. Although the code works flawlessly when I manually s ...

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

Provide a class name to the div element containing the radio button that has been

<div> First : <input type="radio" name="typeof" id="typeof1-grey" value="grey" /> Second : <input type="radio" name="typeof" id="typeof2-pink" value="pink" /> Third : <input type="radio" name="typeof" id="typeof3-green" val ...

Top method for isolating AngularJs controller code

I have a question regarding organizing bulk code in an AngularJs controller. I currently have a controller named userDashboard.js with numerous methods for making API calls to retrieve data, such as: 1) Charts - Chart 1, Chart 2, Chart 3, etc. 2) Tables ...

What is the recommended method for importing MAT_LABEL_GLOBAL_OPTIONS?

After studying the example provided in Form field with label, I decided to modify the behavior of mat-form-field placeholder. There are three options available: auto, always, and never. This feature is very useful and can be tailored according to the type ...

Using lodash in JavaScript to flatten a nested object structure

I'm looking to flatten a hierarchical json structure. Here is an example of my json data: { "id": "111", "name": "v5", "define": { "system": "abc", "concept": [{ "code": "y7", "concept": [{ "code": "AGG", "di ...

The ng-repeat directive fails to acknowledge changes in the model

I'm having trouble iterating over the properties of a model that I am updating. Below is the code snippet from my controller: app.controller('VariantsController', ['$http', function($http){ var ctrl = this; this.cars = []; ...

Using VueJS to switch classes on multiple cards

There is a page with multiple cards, each containing its own set of status radio buttons: ok, missing, error. The goal is to be able to change the status of individual cards without affecting others. A method was created to update the class on the @change ...

Refrain from adding tabs to the history state

Currently, I am facing an issue while developing a PWA in Ionic/Angular specifically related to tabs when using the PWA on Android. The application has three tabs: Home, Shopping, and Favorites. Each tab has subpaths that can be navigated. The problem ari ...

`Is it possible to display the x and y axis upon clicking on Angular JS Charts?`

Currently, I am attempting to retrieve the values for the x and y axis when clicking on the chart area. Here is what I have so far: HTML: <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72131c15071e130 ...

The object contains an incorrect property that shouldn't be there

I am currently working on an application using NestJS with the Fastify adapter But I am encountering something strange with object construction. Going through all the related classes and methods: Controller endpoint handler @Get() @ApiOperation ...

Most efficient method to retrieve a specific element from an array without the need for iteration

Within one of the controllers in my Angular application, I have set a variable like this: SomeService.get({}, function(data){ // This assigns xyz as the data list retrieved from the // resource within the controller's scope $scope.xyz = ...