Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a folder named "web-components" within the app directory. Everything is functioning well - I am able to access the pure WebComponents from Angular components and ng build automatically updates the Angular app whenever there are changes in the WebComponent's JavaScript files.

To enhance the development process, I am now looking to convert the non-Angular WebComponents into Typescript. This would mean that the WebComponent's Typescript code needs to be automatically translated to JavaScript within the Angular project. Unfortunately, I have been unsuccessful in finding a way to achieve this within an Angular project. Therefore, I am open to any suggestions on how to configure the Angular project so that this translation can be done seamlessly.

javascriptangulartypescriptweb-component

Answer №1

Have you heard of Stencil JS, a library that allows you to create web components compatible with Angular, React, and Vue? Learn more about how components built with Stencil integrate with Angular.

I'm currently working on building a component library using Stencil at the company I work for, and so far it's been successful. One of the highlights of this approach is the ability to build components in isolation. If you're comfortable with creating generic web components in a separate repository and utilizing npm and webpack for bundling, then Stencil JS might be worth exploring!

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

Discover the hexadecimal color code generated from an rgba color

Do you know of a service that can determine the final hexadecimal value of an rgba color? For instance, if my body background-color is set to #FF0000 and my header is positioned over it with a background-color of rgba(0,0,0,.7), how can I find out what the ...

javascripthtmlcsshexrgba

Angular2 Directive that Duplicates a Group of <tr> Elements

How can I build a component that generates HTML based on this data and HTML code? The <head> and <tbody> sections are projected, and I understand how to project multiple elements. However, I am unsure of how to repeat the projected <tr> i ...

typescriptangular

Add elements to an array following an AJAX request

On my .cshtml page, I have the following script: $(function () { var tempArray = []; var tbValue = $('#tb1').val(); $.ajax({ url: "/ControllerName/getdata", dataType: 'json', ...

javascriptjqueryarraysajax

How to access different state sections within a reducer using ngrx

If one state value changes, I want to remove another state value. How can I access other parts of the store from a reducer in NgRx? Here is my current store schema: a: {...} b: {...} I am trying to access the 'b' feature store from the ' ...

angularreduxngrx

Objects in the array are failing to sort in the expected sequence

I am facing an issue with sorting an array of objects by a date property using the lodash function orderBy. I have tried to sort it in both ascending and descending order. var searchObj = [{id: 1, postDate: '2/24/2016 5:08 PM'}, ...

javascriptarrayssortingtypescriptlodash

The data received from the frontend is being replicated in the backend, causing duplication issues in a React

Whenever I click the button labeled onClick, it triggers the transmission of data (both time and ID) to the backend. The issue at hand is that the backend seems to be receiving the data twice instead of just once. On inspecting req.body, it becomes eviden ...

javascriptnode.jsreactjsrest

Conceal hyperlink repeatedly using jQuery

I am struggling with implementing a feature where I have two links, one displayed and the other hidden. Upon clicking the first link, it should disappear and the second link should be displayed. Clicking the second link should then hide itself and show the ...

javascriptjquerycss

Node.js tutorial: Building routes with regex and implementing redirects

Can anyone provide guidance on how to utilize route and redirect URLs with parameters in Node.js using Express? If the URL is xyz/?s=test, it should redirect to indexRouter. If the URL is xyz/, it should also redirect to indexRouter. I'm facing issu ...

javascriptnode.jsregexexpress

Utilize a variable within the res.writeHeads() method in Node.js

Greetings all. I have encountered an issue that I need help with: Currently, I am using this block of code: res.writeHead(200, { "Content-Length": template["stylecss"].length, "Connection": "Close", "X-XSS-Protection": "1; mode=block", "S ...

javascriptnode.jsvariablesobjecthyperlink

Struggling to show API images on NextJS application

I am currently exploring NextJS for the first time and attempting to showcase 3 random dog breed images on my app's webpage using the Dog.ceo API. Although I can view the three random dogs in the console through the console.log(data) line, I am facing ...

javascriptreactjsapinext.js

Is it possible to maintain the data types of each individual piece of data when it's divided into an array in

Can the data type of each field be preserved in Javascript after splitting it using the split method? Input: var row = "128, 'FirstName, LastName', null, true, false, null, 'CityName'"; When using the split method, the data type of e ...

javascriptcsv

Changing a complex object within a nested array of a BehaviorSubject

I'm currently working on an Angular app. Within my service, DocumentService, I have a BehaviorSubject that holds an array of Documents. documents: BehaviorSubject<Document[]> Let me provide you with some insight into the various classes I' ...

javascriptangulartypescriptrxjs

Prevent certain dates from being selected in a designated input field

I am facing an issue with disabling certain array dates for a specific input field in a datepicker calendar. Even though I have included the script to exclude those dates, they are not getting disabled for that particular input field. html <input cla ...

javascriptjquery

Having trouble with the react event handler for the renderedValue component in Material UI?

I am facing an issue while trying to utilize the onDelete event handler within the chip component using Material UI in the code snippet below. Upon clicking on the chip, it triggers the Select behavior which opens a dropdown menu. Is there a way to modif ...

javascriptreactjstypescriptmaterial-ui

Having an issue with TypeScript and React where the onChange event on the <select> element is only setting the previous value instead of the current value when using the useState hook

I'm currently developing a scheduling web tool. One of the key features I'm working on involves calculating the total hours between two selected times, startTime and endTime. These times are chosen via a form and stored using the useState hook: ...

javascriptreactjstypescriptonchange

Having trouble sending an array with res.send() in NodeJS

My User model contains a field that stores an array of course IDs like this: "courseId" : [ "5ac1fe64cfdda22c9c27f264", "5ac207d5794f2910a04cc9fa", "5ac207d5794f2910a04cc9fa" ] Here is how my routes are set up: router.get('/:userid/vendo ...

javascriptnode.jsmongodbexpress

What is the process by which Angular2+ ngFor directive cycles through the ref iterable?

My curiosity led me to dive into the inner workings of the Angular *ngFor directive. I was particularly interested in understanding how Angular interprets the iterable object passed to the directive - whether it re-evaluates it at each loop iteration simil ...

angularloopsngforangular2-changedetection

Exploring the Unchanging Object3D Characteristics of ThreeJS Version 68

According to the transition notes from r67 to r68, it is stated that: Object3D's position, rotation, quaternion and scale properties are now immutable. How does this impact practical implementation? I am seeking further clarification on this matte ...

javascriptthree.js

What is the best way to steer a vehicle in the desired direction by utilizing the arrow keys on the keyboard?

Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...

javascripthtmlcss

Increasing the value of a TypeScript variable using ngFor in an HTML template can enhance its usefulness

Can you dynamically increase a variable declared in your TypeScript file for each element generated by an ngFor loop in your HTML file? <tbody> <tr *ngFor="let item of invoiceItems"> <td>{{item.ItemName}}</td> <td>{ ...

htmlangulartypescriptngfor