What is the process of TypeScript module resolution within the Play framework?

In my Play project, I am interested in incorporating Angular 2 with TypeScript. Utilizing the sbt-typescript plugin and the angular2 WebJAR, I have encountered a situation where Play places the extracted WebJAR in 

target/web/public/main/lib/angular2
. Ideally, I would like to be able to include something similar to the following in my app/assets/js/components/test.ts file:

import {Component} from 'angular2/core';

Unfortunately, tsc is not able to resolve this, and I am unable to find any setting to specify where it should look.

Is there an existing solution for this issue? Perhaps creating a separate child project exclusively for TypeScript material could streamline the process?

playframeworktypescriptsbtangular

Answer №1

Currently, it is indeed possible to handle Javascript/Typescript modules from your webjars dependencies. To demonstrate this capability, I have developed a Play application that showcases the process.
Check out the demo at https://github.com/joost-de-vries/play-angular2-typescript

This solution employs a unique sbt-typescript plugin that adjusts the module resolution. This effectively resolves the issue mentioned by bpervan.

Answer №2

I've been facing the same issue for quite some time now, but unfortunately, it seems that there is currently no solution available.

You can refer to: https://github.com/ArpNetworking/sbt-typescript/issues/33

According to the latest information, the current version of TypeScript transpiler does not support custom paths for module resolution. It looks like this feature won't be available until version 2.0. You can find more details on the official TypeScript Roadmap in their github repository (I wish I could share the link here, but unfortunately SO doesn't allow it)

For now, it seems that the only workaround to use Angular2 with TypeScript in a Play project is to let npm handle the dependencies for tsc. You can still utilize WebJars in Scala templates (SuperManitu provided a link to his template in 1, make sure to check it out (sorry, unable to share the link))

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

The pagination in React using React Query will only trigger a re-render when the window is in

Currently, I am utilizing React-Query with React and have encountered an issue with pagination. The component only renders when the window gains focus. This behavior is demonstrated in the video link below, The video showcases how the component re-renders ...

javascriptreactjstypescriptpaginationreact-query

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

javascripttypescriptmaterial-ui

What are some ways to incorporate inline TypeScript Annotations into standard JavaScript code?

If you're using VSCode, there's a new feature that allows you to implement type checking for traditional JavaScript files. There are instances where I wish to specify the type of a variable or parameters in a method or function to enhance auto-co ...

javascripttypescriptannotationsvisual-studio-code

During the installation of npm in my angular project directory, an error occurred

Encountered an error while installing packages (npm)...npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! network Received an invalid response when trying to fetch https://registry.npmjs.org/@babel%2fplugin-proposal-nullish-coalesc ...

node.jsangularnpm

ESLint detected a promise being returned in a function argument where a void return type was expected

I'm encountering a recurring error whenever I run my ESLint script on multiple routers in my server. The specific error message is as follows: error Promise returned in function argument where a void return was expected @typescript-eslint/no-misuse ...

javascriptnode.jstypescripttypescript-eslint

Leveraging IntersectionObserver to identify the video in view on the screen

Our Objective I aim to implement a swipe functionality for videos where the URL changes dynamically based on the ID of the currently displayed video. Challenges Faced Although I managed to achieve this with code, there is an issue where the screen flashe ...

javascriptreactjstypescriptintersection-observer

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

javascriptjsonnode.jsoracletypescript

Tips for Safely Utilizing localStorage in Angular

When dealing with easily changeable localStorage data, how can access controls and security be improved in an Angular App? Imagine if our localStorage contains: data - {name:user, account_status:inactive,...} It is concerning that a user could effortl ...

node.jsangularexpresslocal-storageangular-local-storage

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

reactjstypescriptreact-nativereact-routerreact-router-native

Error: The function child.send is not defined as a valid function

Encountering an issue while attempting to build my Angular application. npm run build All tasks run smoothly on local machine and the project is successfully built. However, when trying to execute the command on the server via console (ssh), I am faced w ...

angular

Is there a way for Ionic to remember the last page for a few seconds before session expiry?

I have set the token for my application to expire after 30 minutes, and I have configured the 401/403 error handling as follows: // Handling 401 or 403 error async unauthorisedError() { const alert = await this.alertController.create({ header: 'Ses ...

angulartypescriptionic-frameworktokenionic4

Setting text in a datetime picker with ngx-mat-datetime-picker in an Angular application is a straightforward process

I've been utilizing the ngx-mat-datetime-picker library from angular-material-components to enable datetime selection. It's functioning effectively, but I'm searching for a way to insert text preceding the hour and minute inputs, such as &ap ...

angulartypescriptangular-materialangular-daterangepicker

Typescript's implementation of AngularJs provider

After creating an Angularjs provider in typescript, I found myself wondering if there might be a more efficient way to achieve the same outcome. My current provider serves as an abstraction for a console logger, with the interface primarily designed to s ...

angularjstypescript

Exploring the power of Angular and Module Federation in SSR applications

Currently, I am utilizing angular version 13.1.0 and have successfully set up SSR by using the ng add @nguniversal/common command. In addition to that, I integrated module federation through ng add @angular-architects/<a href="/cdn-cgi/l/email-protectio ...

angularserver-side-renderingangular-universalwebpack-module-federation

The error message "Type 'Dispatch<SetStateAction<undefined>>' cannot be assigned to type 'Dispatch<SetStateAction<MyType | undefined>>'" appears in the code

I'm encountering challenges while creating a wrapper for useState() due to an unfamiliar error: Type 'Dispatch<SetStateAction>' cannot be assigned to type 'Dispatch<SetStateAction<VerifiedPurchase | undefined>>' ...

reactjstypescriptreact-hookscordova-plugin-purchase

Utilizing AWS Websockets with lambda triggers to bypass incoming messages and instead resend the most recent message received

I am facing an issue when invoking a lambda that sends data to clients through the websocket API. Instead of sending the actual message or payload, it only sends the last received message. For example: Lambda 1 triggers Lambda 2 with the payload "test1" ...

node.jstypescriptaws-lambdawebsocketaws-api-gateway

Utilizing numerical values in useParams - A beginner's guide

Trying to access specific data from my json file using an ID, like "http://localhost:3001/pokemons/3", leads to a 404 error. All the data is visible at http://localhost:3001/pokemons. It seems that useParams doesn't want me to use id as a number - q ...

reactjstypescriptreact-router-dom

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

tsc and ts-node are disregarding the noImplicitAny setting

In my NodeJS project, I have @types/node, ts-node, and typescript installed as dev dependencies. In the tsconfig.json file, "noImplicitAny": true is set. There are three scripts in the package.json file: "start": "npm run build &am ...

javascriptnode.jstypescript

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

I have a ReactNative app and I'm attempting to create a test using Jest. The test requires classes from a native component (react-native-nfc-manager), and one of the needed classes is defined as follows export interface TagEvent { ndefMessage: N ...

javascripttypescriptreact-native