Reference a global var set in .cshtml from typescript

Question

I am setting a few variables in my .cshtml file to use them 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>  

Then, in my module I want to reference them, similar to this:

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


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

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

But I get a "Cannot resolve symbol _AREAURL" error. How can I make this work?

Answer 1

I think you need to add some ambient definitions in your TypeScript:

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