Home > front end >  Declare a global when building an Angular library
Declare a global when building an Angular library

Time:05-19

I posted the following on the AngularCesium github as an issue (because I figured they had some experience with this problem as they need "Cesium" in their scope too).

Since their Github is less active than I would have hoped for, I wanted to post it here too as this might speak to a broader design pattern I am unaware of with Angular library code.


I have been using this library [AngularCesium] for a good while now within an angular application with no problems. I recently have started pulling code out of that application to create a library so multiple applications in my company can use the same components and services. I am now having build issues, described below.

Disclaimer: this might not be an issue with the angular-cesium library, but I expect you're the correct people to raise this question to. Please direct me who you think I should address with this question if you don't think it fits here.

Intended outcome: When I run ng build <my_project> I expect it to build properly and give me a consumable package I can publish to our internal package registry.

Actual outcome: Instead, I get the following errors (all the same) for every instance I use the Cesium global.

projects/<my-company>/tm-cesium/src/services/trace-annotation.service.ts:185:21 - error TS2304: Cannot find name 'Cesium'.

185                     Cesium.JulianDate.compare(
                        ~~~~~~

I have a demo application within the same workspace (the Angular workspace is what contains the projects/ directory) which I can successfully ng serve and run. All references to Cesium work. That demo app contains a typing.d.ts file as described in your documentation, but I cannot determine how to declare a global that gets recognized the same way when compiling an angular library.

Similarly, I cannot include the following in the build configurations as these properties are not allowed in the build options for libraries, as they are in the build options for applications.

   "assets": [ // ...
     { "glob": "**/*", "input": "./node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
    ],
   "styles": [ // ...
     "./node_modules/cesium/Build/Cesium/Widgets/widgets.css"
   ],
   "scripts": [ // ...
     "./node_modules/cesium/Build/Cesium/Cesium.js"
   ],

Really, the key to this seems like a question of how to go about doing the same thing we did with the typing.d.ts file for applications, but for my library. Everything else seems to work fine, if I could just get the compiler to respect that Cesium will exist at runtime.

How to reproduce the issue: I cannot supply any source code but I can supply snippets of configuration files upon request.

The versions of the dependencies involved are here:

        "angular-cesium": "0.0.71",
        "cesium": "^1.70.1",

Version

CodePudding user response:

Face-palming a little bit now, I created an index.d.ts file and included in my tsconfig.lib.json the following line:

"typeRoots": ["./src/lib/typings"],

and it seems to be working. Looks like this is the solution I was looking for.

CodePudding user response:

One option you have would be to put a similar typing.d.ts file in the src of your library and then include it where you need using a triple slash directive

/// <reference path="../../typing.d.ts" />

  • Related