The Angular Library encountered an error stating that the export 'X' imported as 'X' could not be found in 'my-pkg/my-lib'. It is possible that the library's exports include MyLibComponent, MyLibModule, and MyLibService

I have been attempting to bundle a group of classes into an Angular Library. I diligently followed the instructions provided at: https://angular.io/guide/creating-libraries:

ng new my-pkg --no-create-application
cd my-pkg
ng generate library my-lib

Subsequently, I removed the automatically generated module, component, and service, and integrated my own classes.

I made sure to explicitly export the necessary components in public-api.ts, like this:

export { MyLibServiceFactory } from './lib/my-lib-service-factory';
export { MyLibService } from './lib/my-lib-service';
export { MyLibConfiguration } from './lib/my-lib-configuration';

The compilation process for the library completed without any errors or warnings. Upon trying to import it into my app.module.ts with:

import { MyLibServiceFactory, MyLibConfiguration } from "@my-pkg/my-lib";

However, during compilation, I encountered the following error messages:

./src/app/app.module.ts:51:241-260 - Error: export 'MyLibServiceFactory' (imported as 'MyLibServiceFactory') was not found in '@my-pkg/my-lib' (possible exports: MyLibComponent, MyLibModule, MyLibService)

./src/app/app.module.ts:52:15-33 - Error: export 'MyLibConfiguration ' (imported as 'MyLibConfiguration ') was not found in '@my-pkg/my-lib' (possible exports: MyLibComponent, MyLibModule, MyLibService)

I am certain that I must be overlooking something simple, but despite hours of searching, I have yet to find a solution.

My development environment includes Angular 15 and Typescript 4.9. The library itself utilizes core Angular methods such as HttpClient.

Answer №1

On May 12, 2023 at 9:24 Taylor Swift mentioned:

It seems like the issue you're facing could possibly be related to caching. Have you attempted to clear out the .angular folder within your project?

Upon removing all contents from the .angular directory and recompiling, the problems were resolved. I have encountered similar situations with the .angular folder in the past.

Furthermore, it's worth noting that the .angular folder can accumulate a significant amount of data as outdated libraries remain stored in the cache directories over time. I highly recommend periodically deleting the .angular folder to refresh the cache and free up disk space.

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

What's the significance of & in TypeScript and JavaScript?

While exploring someone else's code, I came across this interesting piece related to the props of a React component. Although I'm aware that & is typically used as an AND logical operator, it seems to have a different significance in this con ...

Using Typescript: accessing all properties from a specified type while excluding one

Currently working in React, I am interested in extending my type from another, with the exception of some props. This is how I want to approach it : import React from 'react'; import { withTheme } from 'styled-components'; import SvgBa ...

adding new data rows to an existing data list using Angular

I am currently working on displaying data from a backend system. The data is coming from a table that receives new rows within a specific time frame. To retrieve these new rows, I have set up a mechanism using an Angular timer. My query pertains to the tem ...

Utilizing user input in API calls: A step-by-step guide

There is an input field where you can enter a city name to get the weather data for that specific city. Currently, I am using Angular 9 and able to display weather data for London only. // Updated Weather Components import {Component, OnInit} from ' ...

Tips for easily navigating Angular google Maps

<agm-map [zoom]="mapConfig.zoom" [styles]="mapConfig.styles" [latitude]="currLate" [longitude]="currLongi" > <agm-direction *ngIf="path" [origin]="path.origin" [destination]="path.destination" ...

Issue with Angular 10 Web Worker: Unable to locate the main TypeScript configuration file 'tsconfig.base.json'

Every time I attempt to run: ng g web-worker canvas I consistently encounter the error message: Cannot find base TypeScript configuration file 'tsconfig.base.json'. After thorough examination of my files, it appears that I am indeed missing a ...

Angular i18n simplifies the process of internationalizing and local

Is there a way to display different labels based on the user without using conditionals? I want to maintain consistency in this large project. For example: When User 1 is logged in: <h1>Hello, I am User 1</h1> When User 2 is logged in: < ...

The element is inferred to have an 'any' type due to the inability to use a 'string' type expression to index the 'Palette' type

Encountering an issue: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'. No index signature with a parameter of type 'string' was found on type &ap ...

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui

Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array. I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using a hard ...

The synergy between ternary operators and Vue filters

Recently, I came across a peculiar issue while working with Vue. Take a look at the code snippet from vue.html: <label :text= "$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`"> </lab ...

Inversify is a proven method for effectively injecting dependencies into a multitude of domain classes

Struggling to navigate dependencies and injections in a TypeScript-built rest web service without relying heavily on inversify for my domain classes, in line with the dependency inversion principle. Here's an overview of the project structure: core/ ...

The 'toDataURL' property is not recognized on the 'HTMLElement' type

Hey there! I'm new to TypeScript and I've been experimenting with generating barcodes in a canvas using JSBarcode and then adding it to JSpdf as an image using the addImage function. However, I keep encountering the error mentioned above. barcod ...

How to retrieve the NgModel Object within a component file using TypeScript

I am currently utilizing [(ngModel)] for two-way binding. The structure in HTML is as follows - <input type="text" [(ngModel)]="emailInput" #toemail="ngModel" [email]="true" [style.color]="toemail.invalid && toemail.touched ? &a ...

Tips for Mastering Animation Anchoring with Angular 2

Did you know that AngularJS 1.4 has a unique animation feature called Animation Anchoring? This feature allows you to mark elements in both the source and destination pages with the attribute ng-animate-ref, creating a computed animation between the two b ...

Utilizing ES6, accessing the first element of an array of objects

How can I access the values of the first or a specific object in an array based on an index using ES6? arrayOne =[ { child: [ {e1: 'ABCD', e2: 'BCDF'}, {e1: '1234', e2: '5689'}, {e1: 'QAZ ...

Issue with adding HTTP headers in Ionic 3?

I am facing an issue where I need to include a header in all my HTTP requests, but after implementing the code none of my API calls seem to be working. In the code below, the first function is responsible for making the HTTP request using get, while the ...

What is the trick to make the "@" alias function in a Typescript ESM project?

My current challenge involves running a script using ESM: ts-node --esm -r tsconfig-paths/register -T src/server/api/jobs/index.ts Despite my efforts, the script seems unable to handle imports like import '@/server/init.ts': CustomError: Cannot ...

Most efficient method for accessing and changing the value stored within a BehaviorSubject

I've come across advice stating that using the getValue() method on a BehaviorSubject should be avoided, so I'm curious about the best way to read and update one. Here is the source of this information. In my specific scenario, I have a Behavior ...

The NbDatePicker does not display certain Spanish names

One issue I'm facing is with the Nb-DatePicker component in my project. I tried using {provide: LOCALE_ID, useValue: "es-MX"} in my app.component to display it in Spanish. However, when February, April, May, August, or December are selected, ...

Do Angular pipe promises have the potential to disrupt an application's functionality?

Within my small library, I have implemented a translation pipe that functions perfectly when using Observables. The relevant code snippet can be found here: this.localizationChanges.subscribe(() => { this.fluentService .translationObservable ...