Utilizing ES6 to import file paths absolutely

I have two Angular projects and I want to import the same "ts" file from both of them.

To achieve this, I plan to create a shared folder that both projects can import the file from.

Is there a way to do this?

I tried importing the file using an absolute address, like this:

import { Model } from 'D:/Projects/shared/service';

but it didn't work.

I have tried following some solutions, but it seems they are not what I am looking for. Refer a typescript file outside of project directory Files outside of project directory in angular2 seed project

Is there another way to accomplish this?

Thank you very much!

angulartypescript

Answer №1

This limitation is intentional in TypeScript for a reason. To access files, you will need to modify the rootDirs in your tsconfig.json, as TypeScript does not compile files that are located outside the rootDir of your project.

Alternatively, you can build your Shared library and include the output in your tsconfig.json under paths. If your plan is to release Shared separately, this would be the recommended approach.

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

Having trouble with "npm install" stuck at "normalizing tree: http request GET https://registry.npmjs.o"?

After spending several hours attempting to install angular cli, I am encountering issues with the npm package not working properly. I have tried disabling Firewall and even changing the path variable as suggested in some posts, but nothing seems to solve t ...

node.jsangularnpm

Creating personalized data types in Typescript for interface fields

In the code snippet provided, there is a global type definition as follows: declare global { type ResponseData = { opcode: number; message: string; data?: <WILL-CHANGE-ON-EACH-CASE>; }; } The goal is to assign a custo ...

typescript

ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

Currently, I am in the process of developing a cross-browser extension. One obstacle I have encountered is that Firefox does not yet support service workers, which are essential for Chrome. As a result, I conducted some tests in Chrome only to discover tha ...

javascripttypescriptgoogle-chromeparceljsweb-extension

When making a subscription to the httpClient's get method, an error related to XMLHttpRequest occurs

After setting up a new application using Angular 5 (the latest version), I encountered the following error: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests mad ...

angularangular-httpclient

Utilizing Vue class-style components for creating a recursive component

I'm currently working with a class-style component using the vue-property-decorator plugin. I want to create a recursive component that can use itself within its own structure. Here's a snippet of my code: <template> <ul> <li& ...

typescriptvue.js

NestJS's "Exclude" decorator in class-transformer does not exclude the property as expected

I attempted to exclude a specific property within an entity in NestJS, but it appears that the exclusion is not working as expected. When I make a request, the property is still being included. Code: // src/tasks/task.entity.ts import { Exclude } from &ap ...

typescripthttpnestjsclass-transformer

Issue with Angular Elements: Zone.js has identified that ZoneAwarePromise has been detected

I've been experimenting with Angular Elements by creating two custom elements: a simple button and a basic input field. You can find them at these links: and Each element includes its own polyfills, main, runtime scripts, and styles bundled together ...

angularweb-componentangular-elementszone.jsmicro-frontend

Utilize the .mat-column-name attributes to apply custom styles to a nested component within Angular Material

Within the Child component, an Angular material table is created with columns passed as input: <table mat-table> <ng-container *ngFor="let col of columns" [matColumnDef]="col"> </table> @Input() columns: string[] T ...

cssangularsassangular-material

Transferring data between components: Comparing Passing References and Using Subjects

Question: Is passing variables by reference between Angular components a better option than using BehaviorSubjects? I'm currently developing a diary application in Angular 8 with two components (Navbar and Dashboard) and a service (EntryService). Th ...

javascriptangular

Is there a way to showcase Images or Stars in a Material Angular Form?

I have a form where the rating is displayed using star images, but it is stored as a number in string format on the backend. While experimenting, I am trying to figure out the best way to achieve this. Currently, this is what I have: https://i.sstatic.net ...

angularangular-material

What is the best way to deselect the first radio button while selecting the second one, and vice versa, when there are two separate radio groups?

I am looking to achieve a functionality where if the first radio button is selected, I should receive the value true and the second radio button should be unselected with the value false. Similarly, if the second radio button is selected, I should receive ...

javascripthtmlangular

Nesting tabs in Ionic version 4 allows for a more

Currently in the process of transitioning my app from v3 to v4, and facing an issue with nested tabs. Struggling to make it work properly - while the first level functions correctly and loads the page for the nested tab (without loading its sub tabs), enc ...

angularionic-frameworkionic4angular-router

What is the reason behind TypeScript failing to provide type safety in a generic higher order component which introduces extra properties into React components?

I'm currently working on developing a versatile higher order component, but have encountered an issue with type safety not being enforced. Interestingly, when attempting the same implementation without using generics, the type safety is verified as ex ...

reactjstypescriptgenericshigher-order-components

Angular: Deciding Between Utilizing Boolean @Input and Attribute @Directive - What's the Best Approach?

My goal with Angular is to create a "directive" that can add functionality to my component, specifically adding a myPortlet with a close button when using the directive myHasCloseButton. <myPortlet myHasCloseButton>...</myPortlet> In explori ...

javascriptangulartypescriptangular-directiveangular-components

Angular 2 - mistakenly spelled component name in selector tag leading to error notifications

As a newcomer to Angular2, I am uncertain about the most suitable term to use when referring to a selector/component tag. An instance of what I'm calling a selector/component tag is the app-menu tag showcased in the HTML sample below. In case any miss ...

angular

I'm having trouble looping through a JSON file in Angular 2

I recently began learning Angular 2 and encountered an issue. I am having difficulty iterating over a JSON document in Angular 2. The data is being fetched from the backend and I have tried various methods, including using the elipses (?) operator, but n ...

jsonangularngfor

Alter the language setting for the input tag in a React application to replace the default browser-dependent language

In my React TS application, I'm facing an issue with i18n where the base language of the date input depends on the browser settings rather than the language selected within the app. It doesn't seem to be affected by the lang property either. Fo ...

htmlreactjstypescriptinput

What exactly does the use of type assertion as any in Typescript entail?

I'm attempting to dissect a portion of code and figure out its functionality. While I've encountered type assertion before, this particular example is proving to be quite baffling for me. (this.whatever as any).something([]); Here's the la ...

reactjstypescriptcastingreact-reduxassertion

Creating distinct "ViewContainerRef" containers for separate tabs in mat-tab within Angular

I have created a runtime component module that generates dynamic components by binding HTML data and functions fetched from an API call. These components are then loaded into a container within tabs, which are also dynamically created based on the data. Th ...

angularangular-dynamic-componentsruntimemodification

Equivalent Types that Do Not Compile

After reading the article on Building Complex Types in TypeScript Part 2, I encountered issues with the Equal Type code provided: Implementing Type Equality type Equal<A, B> = (<T>() => T extends A ? true : false) extends (<T> ...

typescript