Creating an NPM package using TypeScript for a JSPM application

I find myself facing a similar question to the one posed here:

My NPM Package, typed-lexer, includes a d.ts file and its corresponding entries in the package.json file. When I consume this package in a regular node.js app using npm install and tsc --init, everything works smoothly - both my IDE (Visual Studio Code) and the compiler can locate the type definition file for typed-lexer.

However, things take a turn for the worse when I install my package via jspm. Since the d.ts file is an external declaration file (lacking a declare module), I am unable to simply reference it with <reference ... />. Installing the package through both jspm and npm improves the IDE support but falls short when it comes to the browser where TypeScript files are compiled.

Given that the previous question remains unanswered and considering the recent release of typescript 1.8, I am seeking solutions for this issue. My current setup involves jspm 0.17.0-beta.12 and typescript 1.9.0.

typescriptnpmjspmtyping

Answer №1

After dedicating a significant amount of time scouring the internet, I stumbled upon the solution to this issue through extensive research: https://github.com/Microsoft/TypeScript/issues/6012

The most recent comment by refresh09 reads as follows:

Instead of waiting for the integration of "paths" support in the Typescript 2.0 tsconfig, a workaround can be achieved using typings.

typings install --save @angular/core=file:../jspm_packages/npm/@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20434f524560120e100e100d52430e11">[email protected]</a>/index.d.ts

Alternatively, you can directly modify typings.json

{ "name": "", "dependencies": { "@angular/core": "file:../jspm_packages/npm/@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7d716c7b5e2c302e302e336c7d302f">[email protected]</a>/index.d.ts" } }

In my particular scenario,

typings install --save typed-lexer=file:jspm_packages/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66121f1603024b0a031e0314265748564854">[email protected]</a>/dist/typed-lexer.d.ts

This resolved the issue for me. Looking forward to an official fix soon.

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

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng

Executing NPM commands through Jenkins

I'm facing a challenge while attempting to execute "npm" from Jenkins as a shell script. I installed the NodeJS plugin for Jenkins and configured it with the latest version, which should be 5.x. When I run "node --version" on my job configuration scre ...

node.jsjenkinsnpmjenkins-plugins

The activation of [routerLinkActive] triggers an error related to the data.split function

In my lazy loaded module, I have implemented simple routing as shown below: <div id="nav"> <div class="nav-content"> <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav"> <span ...

angulartypescript

Deciphering the correlation between npm's package.json and version control using git

As I prepare to release my first npm package, I find myself uncertain about how versioning operates. In a scenario where my package.json includes a version number and a link to its git repository for hosting and publication, what occurs when I update the v ...

gitnpm

Angular Error: Attempting to access property 'then' of undefined object causes TypeError

I am struggling with implementing JHipster Auth-guard. I am facing an issue where canActivate is not triggered for a user without permission for a specific route. I have carefully examined my code, but the console shows that .then() is undefined at the sp ...

angulartypescriptjhipster

Creating a TypeScript map with conditional items

I encountered an error while trying to add an item conditionally to a Map using .filter, receiving the message Type 'null' is not assignable to type 'readonly [string, Book]'.(2769). This issue seems to arise only when adding items cond ...

typescriptfilter

Can you elaborate on the users object found in the npm registry JSON response?

When looking at the json response of any npm package, such as jQuery for example, http://registry.npmjs.org/jquery, you may come across a dictionary called users. This dictionary contains usernames as keys and boolean values as the corresponding values. ...

javascriptnpmjsonschemanpm-registry

Ensuring that all npm packages fall within the specified version range

Received an alert on my IntelliJ Idea stating: the install version "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e181b0b2e5c405a405c">[email protected]</a>" doesn't match the version range "vue@^2.5.16 Re ...

npmversionpackage.json

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

c#angularjstypescript

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked

In my Typescript project, I usually run it using "ts-node". $ ts-node .\src\index.ts it works =) However, I wanted to compile it to Javascript, so I tried the following: $ tsc $ node .\src\index.js Unfortunately, I encountered the f ...

typescript

You cannot assign the type 'void' to the type 'ObservableInput<Action>'

I'm encountering a type error when I attempt to dispatch an observable of actions within my effect. The error message I'm receiving is as follows: @Effect() rideSummary$: Observable<Action> = this.actions$.pipe( ofType<GetRi ...

angulartypescriptobservablengrxngrx-store

Tips on fixing error ERR_INVALID_URL during Angular-cli installation

On my Windows 10 system, I successfully installed: Node.js version 16.13.0 NPM version 8.1.0 However, when attempting to run 'npm install -g @angular/cli', I encountered the following error message: npm ERR! code ERR_INVALID_URL npm ERR! ...

node.jsnpmangular-cli

Tips for utilizing <Omit> and generic types effectively in TypeScript?

I'm currently working on refining a service layer in an API with TypeScript by utilizing a base Data Transfer Object. To prevent the need for repetitive typing, I have decided to make use of the <Omit> utility. However, this has led to some per ...

typescripttypescript-generics

Leveraging Express Mergeparams in TypeScript

I've run into an issue while working on my small project in Typescript. The problem arises when I attempt to nest my router, as Typescript doesn't seem to acknowledge the parent's parameter. Within the "child" file, I have the following cod ...

typescriptexpress

Angular ngx-translate: Responding to language change event

Is it possible to detect the change in the "current language" using the ngx-translate library? Which JavaScript event should I use to accomplish this task? To clarify, please refer to this straightforward example: https://stackblitz.com/edit/github-yvbmgu ...

angulartypescriptangular-componentsngx-translateangular13

Is it possible to define a class prior to exporting it in typescript/angular? | TSLint warning: unused expression, assignment or function call expected

Coming from the realm of React, I am well-versed in the fundamental concepts of launching an application with an index.js, avoiding direct involvement with HTML, and utilizing import and export statements to share views among different JavaScript files. In ...

angulartypescripttslint

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

javascriptnode.jsnpmbrowser-syncharp

Executing a npm command on Windows that begins with a dot symbol

My package.json file includes the following script: "scripts": { "test": "./node_modules/selenium-cucumber-js/index.js" } Executing npm test on Linux or Mac runs this script without any issues. However, when attempting to run it on Windows, an erro ...

windowsnpmdevops

The 'Set-Cookie' response header failed to be recognized for a subsequent HTTP request

When a user successfully logs in, their information is stored in a cookie using the "Set-Cookie" response header. However, I am facing an issue where the cookie seems to get lost when making subsequent requests from the client. As a result, the server trea ...

typescripthttpcookiessetcookie

Are there any methods to utilize Zod for validating that a number contains a maximum of two decimal places?

How can I ensure that a numeric property in my object has only up to 2 decimal digits? For example: 1 // acceptable 1.1 // acceptable 1.11 // acceptable 1.111 // not acceptable Is there a method to achieve this? I checked Zod's documentation and sea ...

javascripttypescriptzod