I recently created an Angular 2 application using Visual Studio 2015. After that, I successfully published my Angular 2 web app to Azure Web App and everything seems to be working fine. However, I am facing a challenge in accessing the application setting values from Azure Web App into my TypeScript file for the Angular 2 web app.
Could someone kindly guide me on how to retrieve the azure web app application settings values within any TypeScript file?
-Pradeep
The issue mentioned above was successfully resolved by accessing the Azure web app application setting values in a TypeScript file.
To achieve this, I added the following code to Index.cshtml in order to access the app setting values from the web.config file:
<script>
window.config = {
apiBaseUrl: '@System.Configuration.ConfigurationManager.AppSettings["ApiBaseUrl"]',
};
</script>
Subsequently, I included the below code in Services.ts:
import {Injectable, Inject, Optional, OpaqueToken} from '@angular/core';
export const API_BASE_URL = new OpaqueToken('API_BASE_URL');
@Injectable()
export class ApplicationClient {
private baseUrl: string = undefined;
constructor(@Optional() @Inject(API_BASE_URL) baseUrl?: string) {
this.baseUrl = baseUrl ? baseUrl : "";
}
}
Next, I implemented the code below in app.module.ts:
import { ApplicationClient, API_BASE_URL } from './shared/Services';
providers: [{ provide: API_BASE_URL, useValue: window['config']['apiBaseUrl'] }]
Finally, wherever the setting value needs to be accessed, just import the path for Services.ts file in your TypeScript file like so:
import { API_BASE_URL } from '../shared/Services';
@Injectable()
export class writingService {
private _AppUrl = API_BASE_URL+'api/myApplication/';
}
-Pradeep
I am currently experimenting with AWS Lightsail and struggling to grasp how to set it up properly. I have successfully created a Bitnami MEAN instance. On my local machine, I have Angular 6 running via CLI and a NODE API backend on two different ports: 42 ...
I have a function that loads user details and returns an observable. This function is called from multiple places, but I want to prevent redundant calls by waiting until the result is loaded after the first call. Can anyone suggest how this can be accompli ...
class ResistorColor { private colors: string[] public colorValues: {grey: number, white: number} = { grey: 8, white: 9 } } We can replace 'any' with a specific type to ensure proper typing in Typescript. How do we assign correct ...
My question pertains to a specific section in the book pro-Angular-6, where I encountered the following syntax: constructor(private model:Model,activatedRoute:ActivatedRoute) {} I am unsure about the following aspects: How can we use a class without i ...
I need to store data in an object and then add it to another object let globalSamples = {} as any; let sample = { } as ISamplesDetail []; sample = []; for (let i = 0 ; i<this.prelevementLingette.samplesDetail.length; i++) { sample [i].id= thi ...
An issue arose with the test case below: it('should access MAX_COUNT', async () => { const maxCount = await myContract.functions.MAX_COUNT(); expect(maxCount).to.equal(64); }); The test failed with this error message: ...
Currently working in TypeScript, I am hoping to utilize commands such as ciq for modifying the inner content of a template literal. However, it appears that the q component of the command only recognizes single and double quotation marks as acceptable ch ...
I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for usi ...
I'm encountering an issue with a Slider component in a NextJs landing page template. Every time I try to map through an array within the Slider component, I receive an error. I've attempted to find solutions online and came across this related th ...
import { Store,STORES } from '../models/store'; export class StoreLocatorComponent implements OnInit { public Stores: any = []; constructor() { } ngOnInit(): void { this.Stores = STORES ; this.Stores.forEach(element => { ...
Is there a way to replace and convert all words in an array using an object's method that returns an observable? I found a helpful solution on this post which uses bind to pass the correct value. After all subscriptions are complete, I want to execut ...
I need to transform all the labels in my application into label constants. Some parts of the HTML contain dynamic content, such as This label has '1' dynamic values, where the '1' can vary based on the component or a different applicat ...
I am currently using Angular 2.0 framework and working on developing an input component. In addition to that, I am also utilizing Google MDL which requires a specific HTML structure with labels for inputs. However, when trying to implement this, I encounte ...
Currently attempting to incorporate chai into my typescript project. The javascript example for Chai is as follows: var should = require('chai').should(); I have downloaded the type definition using the command: tsd install chai After refere ...
Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am inte ...
Here is the content of my index.ts file: import {IS3Client, S3Client} from './client/S3Client'; const s3: IS3Client = new S3Client(); export async function someFunc(event: any, context: any, callback: any) { const x: string = await s3.getFil ...
I have created a platform where users can stay updated with notifications and messages without the need to constantly refresh the page. Instead of using third-party services like Pusher, I decided to utilize polling to achieve this functionality. Essentia ...
Embarking on my TypeScript journey with React and Material UI, I am hitting a roadblock with my initial component. // material import { Box } from '@material-ui/core'; // ---------------------------------------------------------------------- ...
Ever since integrating the FullCalendar library into my Vue project, I've been encountering an error every time I try to use my custom component in a Vue template. My setup includes Vue 3, Vite, VSCode, eslint, and prettier. This issue seems to be m ...
{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...