The identifier 'name' is not found in the specified data type

How can I resolve the error 'Property 'name' does not exist on type' in TypeScript?

Here is the code block :

**Environment.prod.ts**

export const environment = {
  production: true,
  name:"(Production)",

  apiUrl: 'https://test.org/getstatusboardvalue',
  client_id: '4951-b5a3-0b4a94976aea',
  client_secret: '7147f6b98f41',
  scope: 'cis',
  auth: '',
};

**app.component.ts**

export class AppComponent implements OnInit {


  envName = environment.name;
  public maintenanceMode: boolean = false;
  public scaleLevel = ScaleLevel.Normal;

  public get clientBoardTable(): BoardTable {
    return this._appService.clientBoardTable;
  }

**app.component.html**
<div [ngClass]="{'overlay': maintenanceMode}"></div>
<div [ngClass]="{'smaller': scaleLevel == 1, 'smallest': scaleLevel == 2}" class="main">
    <div>
        Environment<b style="color: red" >{{envName}}</b>
    </div>
  <div class="page-contents">


    <board-table [source]="clientBoardTable"></board-table>
  </div>
  <div class="page-footer">Data as of: {{clientBoardTable.lastUpdatedOn | date:'medium'}}</div> 

</div>
<notification-list></notification-list>

How can I achieve the desired output as shown below: Desired result : Environment = QA or Environment = PRODUCTION

Answer №1

Everything is running smoothly as planned. I cleared the cache, rebuilt it, and now it's performing perfectly as anticipated.

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

Transferring an Array from PHP to Javascript

I'm attempting to pass a PHP array so that I can use it in JavaScript. The PHP code I have written is shown below: <?php $link = mysqli_connect("localhost", "root", "password", "database"); /* check connection */ if (mysqli_connect_errn ...

Ways to receive a reply from EventEmitter

From the child component, I made a call to a certain method. Here is the code in the child component: @Output() parentEvent = new EventEmitter<any>(); click1() { //calling the specified method from the child this.parentEvent.emit(myObj1); ...

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

Disable automatic browser scroll reset on inline onclick event

Currently, I am utilizing prototype to create an ajax request through an inline onclick on a link. The function is designed to display an element on the page and everything functions properly. However, there is an issue where the browser scroll bar reset ...

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

JavaScript Event Listener not Working Properly

I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thoroug ...

What distinguishes the ///<reference path="..."/> from an import statement?

Initially, when I try to import React in my code, the TypeScript compiler displays an error saying 'can not find module react'. However, after adding /// before the import statement, the problem is resolved. Interestingly, I later discovered tha ...

Unit Testing with Jest: Testing the Invocation of a Function within a Nested (Asynchronous) Function

Attempting to create a unit test for a nested function, here is the structure: myFunction.js const anotherFunction = require('./anotherFunction.js') module.exports = (app, io) => { return (req, res) => { const { id, value } = req.q ...

BackboneJS struggles to redirect to .fail when an API request exceeds the timeout

I'm a newbie to backbone and I've come across some interesting code that adds Deferred to enable the use of promises. Take a look at the snippet below: getPatientInfo: function fetch(options) { var deferred = $.Deferred(); Backbone.Model.p ...

Expanding Grid Container in Material UI to Fill Parent Height and Width

Challenge I'm struggling to figure out how to make a Grid container element expand to the height and width of its parent element without directly setting the dimensions using inline styles or utilizing the makeStyles/useStyles hook for styling. I&ap ...

Error message from sails.js: `req.target` is not defined

Experiencing a problem where req.target sometimes returns undefined, causing issues with other functionalities dependent on req.target. Seeking assistance to resolve this issue. Appreciate any help! ...

Establish the starting time for the timer and use the setInterval() function according to the seconds stored within the object

How can I configure the values of timerOn, timerTime, and timerStart to make the watch start counting from 120 seconds? Currently, the clock starts counting from 3 minutes and 22 seconds, but it should start from 2 minutes. You can find all the code here: ...

Tips for testing nested HTTP calls in unit tests

I am currently in the process of unit testing a function that looks like this: async fetchGreatHouseByName(name: string) { const [house] = await this.httpGetHouseByName(name); const currentLord = house.currentLord ? house.currentLord : '957'; ...

Displaying image while processing substantial ajax data

I implemented code to toggle the display of a loading image on my web page while making ajax requests. $(document).ajaxStart(function(){ $("#please_wait").css("display","block"); }); $(document).ajaxComplete(function(){ $("#please_wait").css(" ...

Get the latest B2B department for the client within Spartacus

How can I display the current B2B Unit name in the header for the customer? I have been exploring ways to retrieve the B2B Unit for the current customer and found that there is a payload available for the /current? endpoint that loads on the initial page ...

What steps should I take to instruct the browser to utilize a cache manifest if service workers are not supported?

How can I instruct the browser to utilize a cache manifest if it does not support service workers? I am working on an Angular 4 application that must be able to run offline. While service workers are effective for this purpose, they are unfortunately not ...

What is the correct way to format responses written within response.write() in NodeJS?

Just starting out with NodeJS and express and following a tutorial on displaying two headings in the browser. Came across an issue where using res.send() twice wasn't working, so my instructor introduced me to the write method. Interestingly, when she ...

Ways to verify if an element includes a specific class in JavaScript

When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...

Exploring the depths of design in material-ui

I've just started diving into material-ui and decided to create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc The styling using jss is a bit unusual for me, but with your help on these two exercises, I'm sure I'll ...

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...