Deciphering the purpose of source code symlinks in an Angular 2 webpack application

I have two Angular2 projects that utilize webpack as a module bundler and typescript.

In an effort to share code between the two projects, I decided to split some of the source code and create a symlink to this 'external' source code from each project.

However, upon doing this, the "symlinked code" is unable to resolve the imports properly.

Here is a simple "hello world" project showcasing my concerns:

https://github.com/datracka/angular2-symlink-issue

Initially, the project runs smoothly. However, if you remove the original src folder and create a symlink to another source code located at /another/path/src, you will encounter a compiler error:

ERROR in .-shared/src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.dirname (path.js:1326:5)
    at ensureTypeScriptInstance (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:156:103)
    at Object.loader (/Users/vicensfayos/Projects/angular2-abc/node_modules/ts-loader/index.js:403:14)

Therefore, my question is: what am I missing when it comes to using symlinks to distribute the source code outside of the project folder itself?

I suspect that proper configuration for resolving objects in webpack () to override the node.js loading algorithm for node modules (https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders) may be the key, but I have had no success thus far.

Any guidance in this matter would be greatly appreciated.

javascripttypescriptangularwebpack

Answer №1

I have discovered the solution.

My initial hunch was correct - it pertained to how nodejs resolves dependencies. https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders

The linked code is attempting to locate dependencies by traversing upwards without success until it locates the node_module. However, nothing is found there since node_module resides in the main project directory.

Hence, the resolution involves creating another symbolic link from the linked code to the node_modules folder within the main project in order to resolve the dependencies.

Answer №2

I recently implemented a similar setup, but I made a choice to include a path in my main app's tsconfig.json file:

"paths": {
   "*": ["*", "node_modules/*"]
}

By doing this, all the necessary modules for the shared symlinked folders' source code are located in the node_modules folder of the main app. This directive instructs the compiler to search for dependencies first in the main app's node_modules folder before looking elsewhere.

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

Utilize AJAX to insert information into a MySQL database when a checkbox is selected

Before I got stuck here, I took a look at how a similar question was implemented here I attempted to implement the code in order to insert data into a MySQL database when a checkbox is clicked. While it may have been easier to do this on form submission, ...

javascriptphpmysqlajaxonclick

The pipe seems to have malfunctioned

Here is how my pipe file appears: pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'unique', pure: false }) export class UniquePipe implements PipeTransform { transform(value: any, args?: any): any { ...

angularangular-pipe

Merge identical year items into a single entity

I have an array of objects containing car data: [ { year: 2019, company: 'Toyota', quantity: '450' }, { year: 2019, company: 'Ford', quantity: '600' }, { year: 2020, company: ...

javascriptnode.jsarraysjsonecmascript-6

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

javascriptphpjqueryhtmlajax

After ngAfterViewInit, the @ViewChild element has not been defined

@ViewChild('videoPlayer') myVidElement: ElementRef; There is an HTML5 video element in the markup with the ViewChild specified as above However, I am facing an issue where the element is not accessible and is logged as undefined in both ngOnIni ...

angular

During the present module, retrieve the runtime list of all modules that are directly imported (Javascript/Typescript)

Imagine you have a set of modules imported in the current module: import {A1, A2, A3} from "./ModuleA"; import {B1, B2, B3} from "./ModuleB"; import {C1, C2, C3} from "./ModuleC"; function retrieveListOfImportedModules() { // ...

javascriptnode.jsjsontypescript

Launching a React project using the terminal - my step-by-step process

I'm attempting to initiate a new react-app utilizing the command npx create-react-app <app name> as shown below: npx create-react-app new-app However, after downloading, it seems to be stuck. It's not progressing at all. I've even rei ...

javascriptnode.jsreactjsnpmterminal

The lack of definition for e.PreventDefault causes an error

In my code, I have a registerAjax(e) function: function registerAjax(e) { e.preventDefault(); let userData = { username: $("#username").val(), password: $("#password").val(), }; $.ajax({ method: "POST", url: kinveyBaseUrl + "user/" + kinve ...

javascriptjqueryajax

The error message "Uncaught TypeError: Unable to retrieve the 'lat' property of an undefined object when serializing leaflet data using $.param()" is displayed

Being a complete novice in JavaScript, I am experimenting with posting user location and map bounds using Leaflet and an AJAX call. While my event handler stateUpdater.onLocationFound successfully logs the user coordinates and map bounds, I encounter an is ...

javascriptjqueryajaxleaflet

Bringing a module into Vue framework and transferring information

I'm currently working on a Nuxt project that includes a component. The component can be found in components/Boxes.vue: <template> <b-container> <b-row> <b-col v-for="box in boxes" v-bind:key="box"> < ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Dynamic calculator using JavaScript within jQuery mobile framework

I am a beginner in javascript and I am currently working on creating a mobile app using Jquery Mobile. My goal is to have the user input one value on each page, and then on the final page, display the calculated result after clicking the submit button. I ...

javascriptjqueryjquery-mobile

What steps can I take to resolve the operating system error I am encountering while attempting to send a request using restify-clients to a restify server with the Commander cli

Greetings in advance. Typically, I solve issues without asking for help, but I am currently facing what seems to be an operating system error that has left me stumped. If you require additional details, feel free to reach out. I am dealing with three pri ...

javascriptnode.jsservercommand-line-interfacerestify

The specified object '[object Object]' is not compatible with NgFor, which only supports binding to iterable data types like Arrays

I have some code that is attempting to access objects within objects in a template. <table class="table table-striped"> <tr *ngFor="let response of response"> <td><b>ID</b><br>{{ response.us ...

jsonangulartypescript

Can including an ng-template within an *ngFor loop have any impact on performance whatsoever?

Consider the ItemComponent below, which is created multiple times: <li *ngFor="let item of items"> <app-item [data]="item"></app-item> </li> Each instance contains buttons that, when clicked, display complex modal dialogs. Wi ...

angularng-bootstrapangular-template

A generic type in TypeScript that allows for partial types to be specified

My goal is to create a type that combines explicit properties with a generic type, where the explicit properties have priority in case of matching keys. I've tried implementing this but encountered an error on a specific line - can anyone clarify why ...

typescripttypescript-generics

I am encountering an issue where the jQuery load() function is not successfully loading my Django view within

After setting up my HTML, I wanted to include my Django view in the "radio2" div. To achieve this, I utilized the JQuery function Load(). However, I encountered an issue where it kept returning a 404 error with the get request "http://127.0.0.1:8000/post/a ...

javascriptjquerydjango

Issue persisting Firebase data

I am currently exploring Firebase and attempting to save the user object (specifically the user's email) into the database using the .then() method after executing firebase.auth().createUserWithEmailAndPassword(email, password) However, I encountered ...

javascriptangularjsfirebasefirebase-realtime-database

What could be causing my default prop to not be transmitted to the child component in vuejs2?

Having trouble passing a default value to my Leaflet map child component before fetching the desired data from an API endpoint. I tried using country coordinates like latitude and longitude, but it's not working as expected. This is how I attempted t ...

javascriptvuejs2leaflet

Infinite error loop during start-up in AngularJS application due to digest cycle overflow

Just starting out with Angular and working on a new project using node, jade, and angular. I'm having trouble implementing a catch-all server route. Every time the index page loads, it gets stuck in a loop and crashes the app. I've tried several ...

javascriptangularjsnode.jsexpressmean-stack

Utilizing the filter function iteratively within an Angular factory component

I am facing an issue where I have a factory with 2 controllers. The first controller returns an entire array, while the second controller is supposed to return only one item based on a specific filtering expression. I need to extract the last two parameter ...

javascriptarraysangularjs