The module @app1/shared could not be found in the specified location. It seems that self-contained modules are not being

I have made some modifications to the sub-project known as example-app-v12-monorepo that reflect my current situation:

  1. Created a barrel file named public_api.ts for shared classes located at 

    examples/example-app-v12-monorepo/projects/app1/src/app/shared/public_api.ts
    .

  2. Updated the tsconfig.json file in 

    examples/example-app-v12-monorepo/tsconfig.json
    to include my changes:

"paths": {
  "@app1/shared": ["projects/app1/src/app/shared/public_api"]
}
  1. Added module mapping in 
    examples/example-app-v12-monorepo/projects/app1/jest.config.js
    :
moduleNameMapper: {
 '@app1/shared': 'projects/app1/src/app/shared'
}
  1. Switched from relative paths to absolute paths. For example:

'../shared/highlight.directive' -> '@app1/shared'

Issue: When attempting to run tests using yarn test, an error is encountered:

Configuration error:
    
Could not find module @app1/shared mapped as:
projects/app1/src/app/shared.
    
Please review your configuration for these entries:
{
  "moduleNameMapper": {
     "/@app1\/shared/": "projects/app1/src/app/shared"
  },
  "resolver": /Users/psmul/Desktop/jest-preset-angular/examples/example-app-v12-monorepo/node_modules/jest-preset-angular/build/resolvers/ng-jest-resolver.js
}

Is there a way to configure/resolve this list of path mappings?

##edit based on further investigation

By adding <rootDir> to the absolute path, I was able to get closer to the desired outcome: 

@app1/shared': '<rootDir>/projects/app1/src/app/shared/public_api
Resulting in: 
jest-preset-angular/examples/example-app-v12-monorepo/projects/app1/projects/app1/src/app/shared/public_api

The issue now: In my (large) application, many paths are predefined from the project root, but Jest requires setup at the sub-project level (monorepo). I need to find a way to adjust passed paths to avoid duplicating path segments. Example: tsconfig path: 

example/path/project1/app/src/app/public_api.ts
Jest setup level: 
project1/app/src/app/public_api.ts

desired outcome: 

example/path/project1/app/project1/app/src/app/public_api.ts

Is there a method to accomplish this transformation?

angulartypescriptunit-testingjestjsjest-preset-angular

Answer №1

It is crucial to include the public_api in the mapper, or you have the option to modify public_api within the index

module.exports = {
  rootDir: './',
  moduleNameMapper: {
    '@app1/shared': '<rootDir>/projects/app1/src/app/shared/public_api',
  },
  ...
};

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

Resolving conflict between a user-defined class name and a built-in class name

I am creating a TypeScript Map class that utilizes the built-in Map class along with generics. The problem arises when both classes have the same name. Is there a way to import the built-in Map using explicit namespace, similar to how it's done in Jav ...

typescriptimportnamespaces

Tips for showcasing information from an array in an object using Angular 2 or newer versions

My Information consists of 2 offices while another contains just one office "id": "1", "username": "sample", "groups": "Admin", "office": [ { "officeid": "2", "officename": "sky" }, { "officeid": "3", "off ...

arraysangularmultidimensional-arrayngforangular-ng-if

TypeScript class-module declaration file

I am encountering an issue with a node module that is not recognized by typings and is not available in definelytyped. The basic usage of this module is shown below: import * as SomeClass from 'some-module'; var someObject = new SomeClass("som ...

javascriptnode.jstypescript

Is there a different term I can use instead of 'any' when specifying an object type in Typescript?

class ResistorColor { private colors: string[] public colorValues: {grey: number, white: number} = { grey: 8, white: 9 } } We can replace 'any' with a specific type to ensure proper typing in Typescript. How do we assign correct ...

javascripttypescript

Getting Typescript Compiler to Recognize Global Types: Tips and Strategies

In the top level of my project, I have defined some global interfaces as shown below: globaltypes.ts declare global { my_interface { name:string } } However, when attempting to compile with ts-node, the compiler fails and displays the er ...

typescript

Building AngularJS directives using CSS classes

My current approach is as follows: class AService { $http: any; $state: any; static $inject = ['$http', '$state']; constructor($http, $state) { this.$http = $http; this.$state = $state; }; Dealing w ...

angularjstypescript

When the Angular+gsap3 animation fails to trigger on click

app.component.html <div #animate class="main"> <div id="go" (click)="click()" class="box1"></div> <div class="box"></div> <div class="box"></di ...

angularanimationgsap

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

**I'm experiencing issues retrieving a single :id from a list as the data returned is not what I expected... ** GET /article/5b0be8829f734a4e580a43c5 401 3.845 ms - 99 ===> response from my get request my api ===> var express = require ...

javascriptangularmongodbmongoosemean

My current setup includes Node.js version 8.11.2 and Angular CLI version 7.1.2. However, upon running Angular CLI 8.0+, it displays an error stating "You are running version v8.11.2 of Node.js, which is not supported

From the beginning of my project, I encountered a version error which led me to uninstall and delete all Node and CLI files before reinstalling them. However, now when I try to run npm start, I am faced with the following message: The current Node.js vers ...

angularnpmcommand-line-interface

Executing two webservice calls in Angular 9 using both dispatch and subscribe methods

I am facing an issue where my create account API is being called twice. I noticed that when I remove the constructor part, the API is only called once, but I need to ensure that my account creation is successful. The double call to the web service occurs ...

angularrxjsangular9subscribedispatch

User authentication provided by Django 2 REST framework for a frontend built with Angular 2

As a Django and JavaScript newcomer, I hope you can excuse my lack of knowledge on this topic. I'm curious about the most efficient method for authenticating users. Any suggestions? All the resources I've come across mention using this, but it& ...

javascriptdjangoangulardjango-rest-framework

Angular version 8 - receiving template errors in production build while still in development mode

I am currently using angular v8 and I would like to be notified of any basic template errors that occur during production or when running ng serve. For instance: Template <p (click)="log()">ERROR: {{ errorMessage }}</p> Controller log(a){} ...

angularangular-cliangular8tsconfigng-build

Namespace remains ambiguous following compilation

I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors. The problem arises in my main entry file (main.ts) with these ini ...

javascripttypescriptbrowserifytsify

Is it possible to eliminate the need for variable declarations specifically for arrow functions?

I have a preference for using this form: const myFunc = (): void => {} over this one: function myFunc(): void {} However, TSLint insists on seeing: interface MyFunc { (): void } const myFunc: MyFunc = (): void => {} I find the extra interface f ...

typescripttslint

Vue.js live timestamp update

I have a function that returns the current timestamp with date and time, but it remains static upon page load without updating (meaning: the seconds and minutes do not change in real-time). Desired Outcome: I want the time to be continuously moving and no ...

javascripttypescriptvue.jsvuejs2

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

I am facing a frustrating performance issue. Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculate ...

javascriptangulartypescript

Guide on crafting a Dockerfile for executing Cypress tests alongside a Node.js server

I am facing a challenge with my Cypress tests and the integration of services that interact with a remote database. Moreover, I have a crucial Node.js server that needs to send emails in case of errors. The project structure is depicted below: https://i.s ...

node.jsdockerunit-testingtestingcypress

Using Angular 5 to retrieve data and dynamically fill form fields

I need assistance with populating form fields using information from a GET request. When a user inputs an object ID from the API, I want all corresponding fields (such as name, age, phone, etc) to be automatically filled with that object's data. For ...

javascripthtmlangularformsbootstrap-4

Display an API generated popup list using Vue's rendering capabilities

I'm attempting to generate a pop-up within a displayed list using custom content retrieved from an API request. Currently, my code looks like this: <template> <div class="biblio__all"> <a v-for="i in items" ...

typescriptvue.jsaxiospopup

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

My goal is to allow users to upload both their CV and image at the same time as a feature. However, every time I attempt to send both files simultaneously to the backend, I encounter a Bad Request error 400. I have made various attempts to troubleshoot th ...

javascriptreactjstypescriptnestjsbackend