When working with Angular/Typescript, the error message "compilation of 'export const' is not possible

Embarking on creating my very own Angular library, I took the first step by adding a service without any issues.

The challenge arose when I decided to move a constant to a file named tokens.ts for the service to reference. Following this change, the build process failed and displayed the following error message:

------------------------------------------------------------------------------
Building entry point 'mylib'
------------------------------------------------------------------------------
√ Compiling with Angular sources in Ivy partial compilation mode.
× Generating FESM2020
'SOME_VALUE' is not exported by dist\mylib\esm2020\lib\tokens.mjs, imported by dist\mylib\esm2020\lib\services\mysuperservice.service.mjs
Process finished with exit code 1

The contents of tokens.ts:

export declare const SOME_VALUE: ...

The aforementioned service:

import {SOME_VALUE} from "../tokens";

@Injectable({
  providedIn: 'root',
})
export class MySuperService{
//...

My tsconfig.lib.json configuration:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": './../../out-tsc/lib';

  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Here's how my project tree looks like:

https://i.stack.imgur.com/Ky861.png

In the midst of deciphering this issue, it occurred to me that it might be related to my TypeScript compiler options, particularly since .mjs files are referenced in the error message. However, pinpointing the root cause has proven to be quite a challenge.

If you have any insights or suggestions, I would greatly appreciate your help!

Answer №1

Thanks to @jboot's insight, I realized that the issue stemmed from declaring a type rather than a concrete instance.

The corrected approach is:

export const SOME_VALUE= new InjectionToken<SomeType>('some description');

Grateful for the helpful tip!

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 could be causing the error in Angular 2 when using multiple conditions with ng-if?

My aim is to validate if the length of events is 0 and the length of the term is greater than 2 using the code below: <li class="more-result" *ngIf="events?.length == 0 && term.value.length > 2"> <span class="tab-content- ...

Best Practices for Displaying Videos in Ionic 2

Can videos be properly integrated into Ionic pages? I'm encountering an issue where the buttons become unusable in fullscreen mode when using the html 5 video element. <video id="video1" width="100%" preload="metadata" controls webkit-playsinline& ...

Angular - optimize performance of vm-ware datagrid by using clrDgRefresh with debounce for improved

Is there a way to delay an event triggered by the clarity datagrid until after the user has finished typing before fetching data from the backend? My angular 6 application uses the grid, and I bind the event to a function in my setup like this: <clr-da ...

Mastering the art of utilizing Angular Material's custom-palette colors for maximum impact. Unle

I have implemented a custom material-color palette where I defined the primary and accent palettes with specific shades as shown below: $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 ); $my-app-accent: mat-palette($md-lightaccent, 500,900 ...

It's possible that the "device.interfaces" variable has not been defined

I am currently working on creating a USB driver in TypeScript using the libusb library to adjust my keyboard lighting. However, I encountered an issue where I received a 'possibly undefined' error when trying to retrieve the interface number. The ...

Unwrapping nested objects in a JSON array with JavaScript: A step-by-step guide

After trying some code to flatten a JSON, I found that it flattened the entire object. However, my specific requirement is to only flatten the position property. Here is the JSON array I am working with: [{ amount:"1 teine med 110 mtr iletau" comment:"" ...

Make sure to implement validations prior to sending back the observable in Angular

Each time the button is clicked and if the modelform is invalid, a notification message should be returned instead of proceeding to create a user (createUser). The process should only proceed with this.accountService.create if there are no form validation ...

Receiving errors in React/TS/material-ui when attempting to use a variable as a value for a grid property. Messages include "No overload matches" and "Type 'number' is not assignable to type..."

tl;dr: When using a variable as the value of a grid xs property in JSX, material-ui throws a TS error. I'm working on implementing grids in material-ui with React/TypeScript. The goal is to make the width of a specific element dependent on the quant ...

Exploring the functionality of generic components in React Native when using TypeScript

As an illustration, consider export class FlatList<ItemT> extends React.Component<FlatListProps<ItemT>> which incorporates the generic type ItemT. How can I utilize it in a .tsx code? When not parametrized, it appears like this: <Flat ...

.Net Core receives the method name instead of the parameter value passed by TypeScript

Can someone explain why the code is passing "getFullReport" as the eventId instead of the actual value while making its way to the .Net Core 3.1 side? Prior to the call, I double-checked with a console.log to ensure that eventId holds the correct ID I am ...

Display the toggle button for expanding/collapsing text only when the length of the string exceeds 50 characters

Is there a way to only show a "read more/less" button in a table if the content exceeds 50 characters? The table contains a mix of content, some short announcements with about 10 characters and others with over 100. <div class="col"> <span ng-c ...

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

Certain Material-UI components appear to lack proper styling

I found a tutorial on how to incorporate material UI into my app at this link: https://mui.com/material-ui/getting-started However, I noticed that some components are not styled as expected and customizing the theme seems to have no effect... This is how ...

Auto increment package.json version in a monorepo configuration

I am working on an Angular 6 app configured as a monorepo, comprising of a project that needs to be published to NPM along with a demo app. To update the versions of both the application and the project, I would like to utilize the npm version command. Th ...

When making a variable call outside of a subscriber function, the returned value is 'undefined'

I find myself in a situation where I have to assign a value to a variable inside a subscriber function in Angular. The issue is that the variable returns 'undefined' when called outside of the Subscribe function. Here's what I'm encount ...

Encountering a getStaticProps error while using Typescript with Next.js

I encountered an issue with the following code snippet: export const getStaticProps: GetStaticProps<HomeProps> = async () => { const firstCategory = 0; const { data }: AxiosResponse<MenuItem[]> = await axios.post( ...

Angular Universal functioning fine on local host, yet encountering issues on Nginx Server

I recently developed a project with Angular Universal. After building the project, it generated files such as browser, server, server.js, and prerender.js. I am curious to learn how I can run this project on an nginx server. Currently, I create a build o ...

Updating *ngIf in Angular 6 after the Component has finished Loading

Component: import { Component, OnInit } from '@angular/core'; // Services import { AuthService } from './services/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleU ...

How can I prevent the enter key from working with Twitter Typeahead?

Is there a way to prevent the enter key from being pressed on an element within Twitter Typeahead's dropdown feature while using Angular with Typescript? I attempted to utilize preventDefault() when event.keycode === 13 on the ng-keydown event for th ...

Validate an object to check for null or empty fields, including arrays, using Javascript

Currently, I am facing an issue with iterating through a complex array that contains objects and embedded arrays. The goal is to detect any empty or null values within the array. However, my challenge lies in accurately determining if an array is empty. De ...