Exploring Appsetting Configuration in AppModule of Angular 8

I'm looking to update my configuration in the appsettings file by replacing a hardcoded string with a reference to the appsetting. Currently, I have this hardcoded value in appmodule.ts:

AgmCoreModule.forRoot({
  apiKey: 'testtesttest',
  libraries: ['places']
}),

and this is my corresponding section in appsetting.json:

  "Geocode": {
    "apiKey": {
      "key": "testtesttest"
    }
  }

How can I modify it to dynamically read from the appsettings like this?

AgmCoreModule.forRoot({
  apiKey: appsetting.Geocode.apiKey.key,
  libraries: ['places']
}),
jsonangulartypescriptmoduleconfiguration

Answer №1

To implement this feature in your project, add the following configurations to your tsconfig.json file (refer to the documentation for more details):

"resolveJsonModule": true,
"esModuleInterop": true,

After updating the settings, you can use the following code:

import appsetting from './appsetting.json'
AgmCoreModule.forRoot({
  apiKey: appsetting.Geocode.apiKey.key,
  libraries: ['places']
}),

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

After a loop, a TypeScript promise will be returned

I am facing a challenge in returning after all calls to an external service are completed. My current code processes through the for loop too quickly and returns prematurely. Using 'promise.all' is not an option here since I require values obtain ...

javascriptnode.jsangulartypescriptpromise

An infinite number of data requests are initiated asynchronously within a loop

When using Angular with TypeScript, I have the following component class: @Injectable() @Component({ selector: 'app-mycomponent', templateUrl: './mycomponent.component.html' }) export class MyComponent implements OnInit{ p ...

angulartypescript

extract data from a JavaScript object

Currently facing an issue extracting a String name from the JSON object's name. It is necessary to parse this type of JSON response obtained from the server. var response = { hopaopGmailsjIpW: { GmailsjIpW_totalEmails_count: 133, GmailsjIpW ...

javascriptjson

Can you please provide the Typescript type of a route map object in hookrouter?

Is there a way to replace the 'any' type in hookrouter? type RouteMap = Record<string, (props?: any) => JSX.Element>; Full Code import { useRoutes, usePath, } from 'hookrouter' //// HOW DO I REPLACE any??? type RouteMap = ...

reactjstypescripthookrouter

Converting a Kafka message to a Java object

I am currently working on converting a Kafka message received as a List of strings into a JSON object. Below is the snippet of code I am using: //Kafka consuming msg List<String> message = KafkaMessageConsumer.consumeMessage(props.getProperty(" ...

javajsonkafka-consumer-apipojo

Encountering an error in Chrome where the property 'command' is undefined

Currently utilizing typescript and encountered an error in the chrome console: Error found in event handler for (unknown): TypeError: Unable to access property 'command' as it is undefined at chrome-extension://somethingsomethingsometh ...

google-chromeangulartypescript

What is the proper way to retrieve a constant variable within a return statement?

Here is the code I have written: const keyToDisplayMessage = 'REGULAR_HOME'; const cf = format( { accountName: this.accountName, }, this.pageData.sucessMessages.keyToDisplayMessage, this.$route.name ); return cf; The ...

javascripttypescriptvue.js

Encountering Error: Unable to create new component as PriorityQueue is not recognized as a constructor

While trying to create a new component using Angular CLI with the command ng g c navbar, I encountered an unusual error message: core_1.PriorityQueue is not a constructor TypeError: core_1.PriorityQueue is not a constructor at new TaskScheduler (/h ...

angularnpmangular-cli

Having trouble parsing JSON that is stored as a string in Java

I'm having trouble reading text in JSON format from a website. I keep getting the error: Java.lang.ClassCastException: org.json.simple.JSONObject cannot be cast to org.json.simple.JSONArray This is really frustrating for me. Can someone provide ...

javajson

Passing data to a child component using Context in React is not working

I have a parent component where I am storing data in an array of objects and then passing it to another component through Context. Here is how my parent component looks: export type HistoryData = { input: string; date: string; ...

reactjstypescriptreact-context

Angular fails to include the values of request headers in its requests

Using Django REST framework for the backend, I am attempting to authenticate requests in Angular by including a token in the request headers. However, Angular does not seem to be sending any header values. Despite trying various methods to add headers to ...

javascriptangulartypescriptdjango-rest-framework

What is the best way to transfer information from a service to my controller?

Currently, I am experimenting with the Ionic framework and learning AngularJS simultaneously. I have been working on implementing $q and asynchronous calls but facing some challenges. My goal is to parse a JSON file using GetJsonSpecials, pass it to GetDat ...

jsonangularjscontrollerionic-frameworkfactory

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material

Generating TypeScript Type Definitions for dynamic usage

In my client server application, I use REST calls for communication. To avoid using the wrong types by mistake, I have defined all RestCalls in a common file (excerpt): type def<TConnection extends Connections> = // Authentication ...

typescriptcode-generationtype-mapping

"Enhancing User Experience with Angular 2: Customizing Component Selection and Sty

I am currently working on an Angular application that fetches a configuration file in .json format. My goal is to dynamically choose components and apply inline styles to them. Below is an example of the structure of the configuration data obtained from a ...

angulartypescriptangular2-components

What is the process for setting a Type to a prop in React?

I have a main component: // DashboardComponent.tsx const DashboardComponent = () => { const {loading, error, data} = useQuery(resolvers.ReturnAllMovies); if (loading) return <p>loading</p>; if (error) return <p>Error! ${error.m ...

reactjstypescript

incorrect choice of ngClass

Having sifted through numerous queries, I have come to this realization... The angular [ngClass] is behaving oddly when it comes to values like 10, 24, and 100. I can't seem to figure out the reason behind this behavior. Perhaps someone here might be ...

angulartypescriptng-classangular-ng-class

How to Extract Data from a JSON Object in Java with GSON Library

Looking for guidance on where I'm going astray... I've implemented sendgrid for email tracking, and it's generating JSON data as shown below: [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2 ...

javajsonstringgson

Tips for reading or parsing JSON files stored in external storage on an Android application

I have successfully implemented JSON parsing from a server (url), but I am facing difficulty in parsing JSON from the sdcard (/Download/example.json). Can someone provide assistance in resolving this issue or suggest changes to the code? I utilized AsyncT ...

androidjsonandroid-layoutgetjsonandroid-4.2-jelly-bean

Error in Typescript occurring with a custom typography element

I recently developed a simple typography component for my React project and it's causing a Typescript error that's puzzling me a bit. Typography Component Code import clsx from 'clsx'; const sizeVariants = { h1: 'h1', ...

reactjstypescriptreact-typescript