The absence of Index.ts in the TypeScript compilation cannot be resolved by simply including it

Upon integrating @fireflysemantics/slice into my Angular project, I encountered the following error:

ERROR in ./node_modules/@fireflysemantics/slice/index.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /home/ole/Temp/fstest/node_modules/@fireflysemantics/slice/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

In an attempt to resolve this issue, I included index.ts within an include block as follows:

  "include": ["./node_modules/@fireflysemantics/slice/index.ts"],

Despite my efforts, the error persisted. I have detailed this problem in a reported bug on Angular's GitHub page.

angulartypescript

Answer №1

The developer of @fireflysemantics/slice made a mistake by including ts files in the library, which Angular does not understand as per standard practices.

Error: C:\Users\demo\Documents\angular\demong\node_modules@fireflysemantics\slice\index.ts is missing from the TypeScript compilation. Please ensure it is included in your tsconfig using the 'files' or 'include' property. This missing file appears to be from a third-party library. TS files in published libraries often indicate poor packaging of the library.

Until the necessary changes are made by the developer, you should delete the index.ts file from 

node_modules\@fireflysemantics\slice
.

Once the index.ts is removed, Angular will utilize the correct index.js from the same directory.

After deleting the index.ts file, try running ng serve again, it should now work properly.

Additionally, until the issue is resolved by the developer, you can add the following snippet to your package.json for starting your application with npm start. This will address the problem:

"start": "rm -f \"node_modules/@fireflysemantics/sliceng/index.ts\" && ng serve",

Answer №2

After addressing your query on the Angular CLI repository, here's a summarized version of my response:

The root cause of the issue lies in a faulty compilation process, leading to a mismatch with the Angular Package Format and triggering the error you're encountering.

To tackle this problem, I recommend reaching out to the library author for further assistance or reverting your local library installation to version v9.0.1 or an earlier release.

Wishing you success in resolving this issue!

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

Angular: Step-by-step guide to controlling input field visibility with a toggle switch

// The property autoGenerate is declared in my .ts file autoGenerate: boolean; constructor(){ this.autoGenerate = true; } <div class="col-sm-4"> <div class="checkbox switcher"> <label>Invoice Number * <input t ...

angulardata-binding

Issues with NativeScript WebView displaying HTML file

Having trouble loading a local HTML file into a webview in my NativeScript (typescript) application. Despite using the correct path, it's not loading and instead shows an error. <WebView src="~/assets/content.html" /> An error message stati ...

htmltypescriptnativescript

When you use Array.push, it creates a copy that duplicates all nested elements,

Situation Currently, I am developing a web application using Typescript/Angular2 RC1. In my project, I have two classes - Class1 and Class2. Class1 is an Angular2 service with a variable myVar = [obj1, obj2, obj3]. On the other hand, Class2 is an Angular2 ...

javascripttypescriptangular

Error: Could not locate application for Ionic Serve command

I have been developing a project in Ionic2 on another computer. However, when I try to run ionic serve on my PC, an error message appears: 192.168.1.100:8100 Application not found I have configured my app to use a static IP address... How can I resolve ...

serverangularionic2devops

Getting the value from an array that originated from a JSON file in an Angular 5 application

Here are my JSON definitions: export class Company { name: string; trips : Trip[] = []; } export class Trip{ id: number; name: string; } To view the trips in the console, I use: console.log(this.company); Within the co ...

arraysjsonangular

The installation process for Angular 4 on npm seems to be never-ending

Recently, I've been encountering difficulties while attempting to install the latest version of Angular 4. Despite upgrading my Node to 6.11.2 and npm to 3.10.10, the global installation of angular-cli is proving to be a time-consuming task with no su ...

node.jsangularnpmangular-cli

In Angular 2+, as you loop through an array of objects, make sure to create a new row (<tr>) for each property of the object

I'm currently grappling with a scenario where I need to utilize tables to achieve the following: Array of objects [ { name:'Jhon', email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

angularangular2-templateangular2-directives

Which is the optimal choice: subscribing from within a subscription or incorporating rxjs concat with tap?

After storing data in the backend, I proceed to retrieve all reserved data for that specific item. It is crucial that the data retrieval happens only after the reservation process to ensure its inclusion. Presented with two possible solutions, I am cont ...

javascriptangulartypescriptrxjsobservable

Can one mimic a TypeScript decorator?

Assuming I have a method decorator like this: class Service { @LogCall() doSomething() { return 1 + 1; } } Is there a way to simulate mocking the @LogCall decorator in unit tests, either by preventing it from being applied or by a ...

angularunit-testingtypescriptmockingdecorator

Angular demo showcasing a Multi-Column ListView component in NativeScript

I have a question that may seem simple to you, but I haven't been able to find a straightforward example anywhere. I came across this resource already, but it's not in Angular. As a beginner in Nativescript (I've been working with it for a ...

angularlistviewnativescriptangular2-nativescriptnativescript-angular

Eliminate using a confirmation popup

My attempts to delete an employee with a confirmation dialog are not successful. I have already implemented a splice method in my service code. The delete function was functioning correctly before adding the confirmation feature, but now that I have upgrad ...

angulartypescript

Issue encountered in TypeScript: Property 'counter' is not found in the specified type '{}'.ts

Hey there, I'm currently facing an issue while trying to convert a working JavaScript example to TypeScript (tsx). The error message I keep encountering is: Property 'counter' does not exist on type '{}'.ts at several locations wh ...

javascriptreactjstypescriptreact-typescript

The puzzling phenomenon: Child Route appearing in Parent Outlet in Angular

I am currently working on an Angular 15 application that has 2 levels of routing: Primary (router-outlet defined in AppComponent) and Person (router-outlet defined in PersonMainComponent). Everything seems to be working fine, except for when I click a link ...

angularangular-routing

NodeJS and Angular2 application experiencing loading issues

Currently, I am diving into the world of Angular2 and thanks to the quick start guide provided on their official documentation, I have successfully set everything up. However, if I plan to work with APIs on the server or host my project in the cloud, it ap ...

node.jsangular

Issue: The Karma plugin in Angular CLI >6.0 is now exported from "@angular-devkit/build-angular" instead

Issue: I'm encountering an error in Angular CLI version 6.0 or higher where the Karma plugin is now exported by "@angular-devkit/build-angular". // Below is the Karma configuration file, you can find more information at // module.exports = function ...

angularunit-testingjasminekarma-runner

Trouble with 'import type' declaration causing build issues in a Next.js project

Having trouble importing the Metadata type from the next module. The code snippet below is directly from the Next.js documentation. THE ISSUE client.js:1 ./app/layout.tsx:3:12 Syntax error: Unexpected token, expected "from" 1 | import React from 'r ...

reactjstypescriptnext.jsbabeljssyntax-error

a guide on accessing key value elements within an array using Ionic 3

Just diving into the world of Ionic, I am currently working on a task to showcase products on the cart page that have been added to the cart. Upon fetching data from a REST API, I can see the response below in the console. "items": { "29.2.2.0.YTowOnt ...

javascripthtmltypescriptionic-frameworkionic3

Retrieving the input[text] value in TypeScript before trimming any special characters

One of the tasks I am working on involves a form where users can input text that may contain special characters such as \n, \t, and so on. My objective is to replace these special characters and then update the value of the input field accordingl ...

javascriptjquerytypescript

Upgrading from Angular 2 to 4 causes compilation failure in project

Recently, I upgraded my Angular project from version 2 to version 4. The steps I followed for this upgrade are as follows: 1- Deleted the /node_modules/ folder 2- Executed the following command: npm install @angular/common@latest @angular/compiler@lat ...

angulartypescript

Manage thrown errors using http.post().subscribe()

There is a backend API for logging in with the possibility of returning a 401 Unauthorized error if the password provided is incorrect. I am wondering how to effectively manage and handle exceptions raised in Angular when interacting with this API. this.h ...

angulartypescriptrxjs