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

Prevent form validation in ReactiveForm when a hidden field is present

I am encountering an issue with the validation of a button in my form. The button is disabled until the form is valid, which works perfectly when all fields are visible. However, if a field is hidden due to a condition (ngIf), the validation still occurs. ...

angularangular-reactive-forms

Retrieve ag grid from TypeScript file

I am currently utilizing ag-grid-angular in my Angular application to showcase data. I have a button that is located outside the ag grid, and when it is clicked, I need to retrieve all row data from the grid. I am aware that there is an API available for a ...

angulartypescriptag-grid-angular

I can't decide which one to choose, "ngx-bootstrap" or "@ng-bootstrap/ng-bootstrap."

Currently, I am in the process of deciding whether to use Bootstrap 4 with angular 4 for my upcoming project. However, I find myself torn between choosing npm install --save @ng-bootstrap/ng-bootstrap or npm install ngx-bootstrap --save. Could someone pl ...

twitter-bootstrapangulartypescriptbootstrap-4

Exploring Deeply Nested Routing in Angular

I've been exploring the use of multiple router outlets and encountered an issue. When using the navigateBy function of the router, I am unable to view my child route and encounter an error. However, when I access it via the routerLink in HTML, I get ...

javascripthtmlangularangular-ui-router

Is there any benefit to me verifying for Zone?

I have a custom function that allows me to execute another function within an Angular zone, regardless of whether it was called from outside of Angular. Check out my implementation: export class MyZones { public static maybe(zone: NgZone, callee: () ...

angular

Is it possible to send a JSON object to a RESTful API in Angular 2+ without relying on cookies?

Struggling to send a json type object to the rest service in an (angular2+ springMvc + java) web project. It's proving to be quite challenging, and on top of that, I'm unable to utilize cookies too. ...

angularrestspring-boot

Converting image bytes to base64 in React Native: A step-by-step guide

When requesting the product image from the backend, I want to show it to the user. The issue is: the API response contains a PNG image if the product has an image, but returns a (204 NO Content) if the product does not have an image. So, I need to display ...

javascriptreactjstypescriptreact-nativeexpo

What is the best way to dynamically generate and update the content of a select input in an Angular form using reactive programming techniques?

I have successfully developed an Angular reactive form that includes a select field populated dynamically with values retrieved from an API call. In addition, I have managed to patch the form fields with the necessary data. My current challenge is to dyn ...

angulartypescriptangular-reactive-formsform-control

The parameter 'prev: todoType[] => todoType[]' cannot be assigned to the type 'todoType[]'.ts(2345)

An issue has arisen with this.props.update as mentioned in the title import { useState } from "react"; import axios from "axios"; import { todoType } from "../../types/todo"; type sendResponse = { task: string; }; type getRe ...

reactjstypescript

Utilizing the toastr service through Angular injections

I am looking to manage common HTTP errors by using the Angular Materials MDSnackbar service. However, I am struggling to figure out how to implement it properly. When I add MdSnackBar to the constructor like private mdsnackbar: MdSnackBar, it gives me an e ...

angularangular-servicestoastrangular-toastr

Using an Object as a parameter in a Typescript function

I am currently working on an Angular component that includes a function. Within this function, I need to pass an Object as a parameter and invoke the function with these parameters. It has been some time since I last worked with Angular, where "any" was ty ...

angulartypescript

Test your unit by providing feedback to the personalized modal pop-up

Currently, I am working on a unit test within Angular where I need to evaluate the functionality of the save button. My goal is to have the 'save' option automatically selected when the user clicks on the button, and then proceed to execute the s ...

typescriptangular8

The Angular 2 application functions perfectly when running locally, but encounters issues when running on an ec2 instance

When trying to upload an Angular 2 application to an AWS EC2 t2.small instance, it is not working as expected, even though it runs successfully in a local server. Node version: v7.0.0 NPM version: 3.10.8 There has been an EXCEPTION: Uncaught (in prom ...

javascriptangularamazon-web-services

Changing the type of an object's property in TypeScript on the fly

I am working on a TypeScript function that is designed to dynamically modify the property of an object. Here is the function: const updateProperty = (value: any, key: keyof Type1, obj: Type1) => { obj[key] = value; } Below is the definition of "Typ ...

typescript

Error: Http post not found in Ionic framework version 3 and Angular versions 4 and 5

When using Postman, I successfully made a POST request to the following URL: https://myapp.herokuapp.com/login with the body containing email and password credentials. However, when attempting the same action in my provider, by sending a similar POST requ ...

angularpostionic-frameworkhttpclient

The type (string | undefined) cannot be assigned to type string[] even when using the .filter function to remove undefined elements

Consider the following code: let someVar: Array<string>; somevar = ["a", "b", undefined, "c"].filter((it) => !!it); The code above is resulting in an error: Type '(string | undefined)[]' is not assignable t ...

typescript

Exploring the differences between Angular's @Input and @Output directives and utilizing Injectable Services

When considering the differences between @Input/@Output in parent and child components versus using services that are instantiated only once with dependency injection (@Injectable()), I find myself questioning whether there are any distinctions beyond the ...

angulartypescriptdesign-patternsdependency-injection

Utilizing Angular 4 with Ahead-Of-Time compilation in combination with Electron, as well as

I am new to Angular/Typescript and currently developing a cross-platform Desktop application with Electron and Angular 4. My current challenge involves using a Service in different components, but I need this service to be loaded from a separate file based ...

angulartypescriptelectron

Creating a modal dialog using a function in a TypeScript file

Hey there, fellow developers! I have a question that might seem simple. So, in my HTML code I've got a Modal Dialog that pops up using ng2 Bootstrap. It's working fine, but... I want to replace this line of code "<button class="btn btn-prim ...

angularjstwitter-bootstraptypescriptmodal-dialog

Steps for initiating a download for an Angular Progressive Web App

In the process of building an Angular PWA, I am interested in finding a method to display a popup notification for users who are browsing my app, prompting them to add it to their home screen. Is there a way to achieve this? ...

angularprogressive-web-apps