How can I access a TypeScript variable from a global var set in a .cshtml file?

I have defined several variables in my .cshtml file to be used in my angular services:

<script>
        var _APIURL = '@(Url.Content("~/Admin/api/"))';
        var _AREAURL = '@(Url.Content("~/Admin/"))';
        var _APPURL = '@(Url.Content("~/"))';
        var _AREAPATH = "@(Url.Content("~/") + "Areas/" + HttpContext.Current.Request.RequestContext.RouteData.DataTokens["area"])";
</script>  

Now, within my module, I need to access these variables like so:

((): void => {
    var app = angular.module('system', ['ngRoute', 'ui.bootstrap', 'gettext', 'ngCookies', 'ipCookie']);


    app.constant("_AREAPATH", _AREAPATH); // value retrieved from the view
    app.constant("_AREAURL", _AREAURL); // value retrieved from the view
    app.constant("_APPURL", _APPURL); // value retrieved from the view

    app.config(["$routeProvider", "_AREAPATH", ($routeProvider, areaPath) => {
        $routeProvider
            .when('/', { templateUrl: areaPath + "/Templates/System/System.html" })
            .otherwise({
                template: "This doesn't exist!"
            });
    }]);
})()

However, I am facing a "Cannot resolve symbol _AREAURL" error. How can I address this issue?

Answer №1

To enhance your TypeScript code, consider including some ambient definitions:

declare var _APIURL: string;
declare var _AREAURL: string;
declare var _APPURL: string;
declare var _AREAPATH: string;

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

Restangular failing to send data parameters in POST request

I'm currently exploring the functionalities of Restangular. However, I am facing an issue with a POST request that doesn't seem to be working correctly. Restangular.all("user").all("login").post({username: '<a href="/cdn-cgi/l/email-prot ...

I need help figuring out the right way to define the scope for ng-model within a directive

I found a straightforward directive to automate sliders: app.directive('slider', function() { return { restrict: 'AE', link: function(scope, element, attrs) { element.slider({ value: scop ...

TS: Utilizing a generic parameter in an overloaded function call

This piece of code encapsulates the essence of what I'm trying to achieve more effectively than words: function A(a: string): string; function A(a: number): number; function A(a: any) { return a; } function B<T extends number | string>(arg: T): ...

Issue with Angular failing to identify jQuery after transferring the dependency from package.json to bower.json

Initially, my project included angular, angular-bootstrap, and jquery in the package.json file, with everything being compiled using browserify. // package "dependencies": { "angular": "~1.4.6", "angular-bootstrap": "~0.12.2", "jquery": "~2.1. ...

When working with Typescript, it's important to handle errors properly. One common error you might encounter is: Error:(54, 33) TS2686: 'fabric' refers to a UMD global, but the current file is a module

Encountering an Issue: import {Canvas} from "fabric"; Error:(54, 33) TS2686:'fabric' refers to a UMD global, but the current file is a module. Consider adding an import instead. In my Angular project with TypeScript, I am using fabric which ...

What steps are involved in generating a Typescript module definition for a directory containing a babel-plugin-content-transformer?

Currently utilizing the babel-plugin-content-transformer to import a directory containing YAML documents in a React Native/Expo project. The configuration for my babel plugin looks like this: ['content-transformer', { transformers: [{ ...

ng-repeat isn't displaying the data

I have always been comfortable using the ng-repeat in Angular, but this time I seem to be facing a problem. I am trying to populate my DOM with data from a JSON file, but for some reason, the fields are not displaying as expected. Is there something wrong ...

Utilizing AngularJs to connect server-generated HTML content to an iframe

My Angular app functions as an HTML editor that transmits the template to a server for rendering with dynamic data. The rendered content is then sent back to the client, where it needs to be placed inside an iframe for preview purposes. It appears that ng- ...

Unable to transfer variable from a function to the test in Protractor

Currently, I am working on a test to verify the amount of gold in my possession. The test is being conducted using TypeScript and Protractor. Within this testing scenario, I have a method named GetAmountOfChips: public static GetAmountOfChips(): PromiseL ...

What steps are required to utilize NgbSortableHeader for sorting a bootstrap table through programming?

I have a bootstrap HTML table (operated by ng-bootstrap for Angular and utilized NgbdSortableHeader to arrange table columns by clicking on the column). When I click on an element, it sorts the column in ascending, descending, or ''(none) order. ...

What is the best way to obtain an attribute name that is reminiscent of Function.name?

My objective is to securely type an attribute. For example, I have an object: const identity = { address: "Jackie" }; At some point, I will rename the address key to something else, like street_address. This is how it is currently implemented ...

Sort the array based on the enum name rather than its value

Below is an example of an enumeration: export enum Foo { AA = 0, ZZ = 1, AB = 2, ER = 5 } In my case, I want to sort my Bars based on the name of the enum (AA, AB, ER, ZZ), rather than the numerical value (0, 1, 2, 5) that they represent. ...

The Type-Fest library in TypeScript is malfunctioning when used with a constant

Currently, I am utilizing a PartialDeep feature from the library type-fest. Here is an example of how I am using it with a const: const test = { value: 1, secondLevel: { value: 1, thirdLvl: { value: 1, fifthLvl: { value: 1 ...

Creating a loop with resolves to navigate through states in AngularJS with ui-router requires the use of a closure

Within our AngularJS app, I am dynamically creating states using ui-router. Consider an array of states like the following: const dynamicStates = [ {name: 'alpha', template: '123'}, {name: 'bravo', template: '23 ...

Replacing URLs in Typescript using Ionic 3 and Angular

Currently facing some difficulties getting this simple task to work... Here is the URL format I am dealing with: https://website.com/image{width}x{height}.jpg My objective is to replace the {width} and {height} placeholders. I attempted using this func ...

Having trouble getting Angular ngIf to work in combination with Razor syntax?

I'm currently working with Angular Js and Razor. @{ var pageMode = (string) ViewBag.PageMode; } <div ng-if="@pageMode == 'answer'"> <h2>Greetings</h2> </div> Even though the value in ViewBag.PageMode is "ans ...

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

What is the best way to access the vue3datepicker object in order to manually close the date picker popup user interface?

Enhancement After yoduh's feedback, I made adjustments to the code below. However, vue3datepicker is still undefined. Code has been updated according to yodubs suggestion. I consulted the official vue3datepicker documentation to customize my own Act ...

Utilizing the namespace importation method correctly

How can I efficiently utilize classes from a namespace that may be the same or different from the current file's namespace? I currently have the following two files. TypeA.ts: export namespace Game { @ccclass export class TypeA extends cc.Component ...

What could be causing my line chart to omit some of my data points?

I'm having trouble with my line chart, as it's not covering all the points I intended. The maximum value on the y-axis seems to be 783, but I want it to cover all the points. Take a look at the image below to see what I mean: https://i.sstatic. ...