Facing error TS2397: Unable to locate module '*'' when utilizing a personalized library in Angular 6/7

Currently in the process of updating my Angular project from version 2.something to the latest release. Initially, I had a custom angular.config file set up so that I could build two separate apps utilizing the same component 'library'. However, with the introduction of real Angular libraries in the epic Angular 6 release, I find myself stuck once again trying to refactor my project to adapt to this new version.

I have managed to build a component library (referred to as 'core') into a DIST folder successfully. Even TypeScript recognizes this library without any issues. But when attempting to build my web-app, Angular CLI starts throwing errors stating it cannot locate the module 'core'.

The public_api.d.ts code snippet located in the dist/core folder looks like this:

export { WdCoreModule } from './lib/wd-core.module';
export { wdApi } from './lib/core/wd.service';
export { ProcessTokenComponent } from './lib/core/process-token.component';
// More exports listed

In order to address this issue, I added the path to the library in my tsconfig.json file:

"paths": {
      "core": [
        "dist/core"
      ],
      "core/*": [
        "dist/core/*"
      ]
}

Next step is to import Modules and components from the 'core' library into the app named 'cms':

import { WdCoreModule } from 'core';

No errors at this point! I proceed to build my project using: ng serve cms This results in the following error:

projects/cms/src/app/app.module.ts(52,30): error TS2307: Cannot find module 'core'.

Despite extensive searching for a solution, I remain stuck. Any coding heroes willing to lend a hand?

Edit: Additional information regarding a potential solution

Referenced the following post for guidance on packaging and installing the build library:

Executing the following two commands proved helpful:

//package.json
"npm_pack": "cd dist/core && npm pack",
//then
npm install dist/core/core-0.0.1.tgz --save

Answer №1

It is recommended to include the link to your build library (.tgz file) in your packages.json. The path specified in the ts.config file is intended for development purposes only.

Answer №2

After encountering the same issue, I managed to discover a workaround that eliminated the need for packaging the library while in development.

To resolve this, I made sure to include the paths in the tsconfig.app.json file located within the app directory:

{
  "compilerOptions": {
    ...
    "paths": {
      "ika-admin-lib": [
        "../dist/name-lib"
      ],
      "ika-admin-lib/*": [
        "../dist/name-lib/*"
      ]
    }
}

(for more details, check out )

Answer №3

While working on my project, I encountered an error related to the paths specified in tsconfig.json. The issue was resolved by moving the paths to the tsconfig file located at the app level - /projects/myproject/tsconfig.app.json

      "mylib": [
        "../../dist/mylib"
      ],
      "mylib/*": [
        "../../dist/mylib/*"
      ]

Although I couldn't find any official documentation supporting this change, I decided to try it out based on my observation of the app level tsconfig.app.json. Surprisingly, this adjustment worked for me, even though I don't understand why it didn't work when the paths were defined in the parent tsconfig.json.

Here is a snippet of the Angular CLI and version details for reference-

Angular CLI: 7.2.4

Angular: 7.2.16

@angular-devkit/build-angular      0.12.4
@angular-devkit/build-ng-packagr   0.12.4
@angular-devkit/build-optimizer    0.12.4
@angular-devkit/build-webpack      0.12.4

ng-packagr  4.7.1

typescript  3.2.4

A few points to consider-

  1. The relative path configurations differ depending on whether they are specified at the parent or app level in tsconfig files.
    "paths": {
      "mylib": [
        "dist/mylib"
      ],
      "mylib/*": [
        "dist/mylib/*"
      ]
    }
  1. If only the app level tsconfig.app.json contains the paths, there may be issues with IDE (Visual Studio Code) errors and intellisense functionality. To overcome this, I retained the path definitions in the parent tsconfig.json as well.

Initially, I intended to comment on another user's answer but lacked the privilege due to being new here. So, I decided to share this detailed response instead.

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

During the process of executing a HTTP GET request, an output of "OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()" was obtained

I am currently engaged in an internal project involving Angular 5. Our team is working on making an HTTP GET call to a URL located within the PCF environment. However, during this process, I encountered the following console message: OPTIONS 0 () Progre ...

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Currently working with angular 2, I am seeking a solution to modify the behavior of ngModel upon Enter key press. In angular 1.X, we utilized ng-model-options="{updateOn: 'change blur'}". How can this be achieved in angular 2? For reference, her ...

Exploring Typescript: Enhancing the functionality of `export = Joi.Root`

I've noticed that the types for @hapi/joi appear to be outdated - some configuration parameters mentioned in the official documentation are missing from the types. To address this, I am attempting to enhance the existing types. node_modules/@types/ha ...

What is the primary function of the platform-server module within Angular 2?

While exploring the AOT (ahead of time compilation) documentation at https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile, I noticed a dependency on platform-server. What exactly is the function of this platform, when it seems like only ...

Issue: The module 'MatChipList' (imported as 'i13$1') could not be located in '@angular/material/chips'

I am facing issues with upgrading my Angular project from version 5.x to 15.x due to the presence of alfresco-core dependencies. The errors I am encountering are causing obstacles in the process. Any assistance in resolving these problems would be greatly ...

Retrieve a specific category within a method and then output the entire entity post adjustments

I need to sanitize the email in my user object before pushing it to my sqlite database. This is necessary during both user creation and updates. Here's what I have so far: export const addUser = (user: CreateUser) => { db.prepare(sqlInsertUser).r ...

After upgrading to node version 20 and other dependencies, encountering ERR_REQUIRE_ESM issue

Attempting to update node from version 16 to 20 has led me to also consider upgrading some other libraries simultaneously. Upon trying to start my backend after completing the updates, the following error occurred: % yarn run dev [nodemon] 3.0.1 [nodemon] ...

Instance property value driven class property type guard

Is it possible to create a class example that can determine the config type based on the value of animalType instance: enum Animal { BIRD = 'bird', DOG = 'dog', } type Base = { id: number } // Object example type Smth = Base & ...

Determine the output type of a function in Typescript using an input value specified by an enum

I am currently saving settings to local storage and want to be able to input responses when retrieving (and possibly inserting) values from/to the storage. After researching, it seems that using function overloading is the best approach. Here is what I ha ...

Transition your Sequelize migrations to TypeORM

I'm currently in the process of transitioning a Node.js application from vanilla JS to Nest.js. In our previous setup, we used Sequelize as our ORM, but now we've decided to switch to TypeORM for its improved type safety. While exploring the Type ...

Experiencing a challenge while attempting to integrate AWS Textract with Angular using the aws-sdk/client-textract npm package. Despite my efforts, I keep encountering a Credentialerror

I have set up aws-sdk/client-textract in my app.component.ts file and specified the region for my Textract service. However, I am unsure of where to provide my access_key and secret_key, as well as what parameters need to be passed for Textract. If anyone ...

Error: The function call does not match any of the overloads. 'VueRouter' is not recognized

I'm new to TypeScript and currently trying to implement vue-router in my project. Encountering the following errors: Error TS2769: No overload matches this call in source\app\main.ts(3,3). Overload 1 of 3, '(options?: ThisTypedCompon ...

Incorporate Angular Material into a personalized library

In my quest to create a reusable library for various projects, I decided to embark on building my own from scratch. The process began with the formation of a new application solely dedicated to housing this library: ng new lib-collection cd lib-collection ...

Is there a way for me to modify a value in Mongoose?

I have been attempting to locate clients by their ID and update their name, but so far I haven't been successful. Despite trying numerous solutions from various sources online. Specifically, when using the findOneAndUpdate() function, I am able to id ...

TypeScript Builder Design Pattern mirroring Java's approach

In TypeScript 4.6.2, I am working on incorporating the Builder Pattern similar to Java. While I have come across suggestions that this may not be the ideal approach, I have certain limitations when it comes to module exports. export class HttpRequest { ...

What is the proper technique for utilizing private fields in TypeScript?

Every time I attempt to execute the code below that involves a private field, I encounter an "Invalid character" issue at the location of #. class MyClass { #x = 10; } Here is the content of my tsconfig.json file: { "compilerOptions": { ...

Incompatibility issue between metadata versions for Angular 4 and @ng-bootstrap libraries

I've been working with the Angular bootstrap module and encountered an issue. After installing the module using the command npm install --save @ng-bootstrap/ng-bootstrap and importing it into the main app module, I attempted to re-run the application ...

Tips on transferring data to a parent component without dismissing the Angular Material dialog when a button is clicked

Is there a way to transfer data from a popup (angular material dialog) to its parent component when a button is clicked, all without closing the popup window? I'm stumped on how to accomplish this task. If anyone knows a solution, please lend me a ha ...

Modular Angular Component

I'm currently developing a language learning application using Angular 15. With numerous pages and components featuring diverse content, I am exploring the option of allowing users to customize the font type, size, and other display settings for each ...

Is TypeScript 2.8 Making Type-Safe Reducers Easier?

After reading an insightful article on improving Redux type safety with TypeScript, I decided to simplify my reducer using ReturnType<A[keyof A]> based on the typeof myActionFunction. However, when creating my action types explicitly like this: exp ...