Typescript error TS18003 encountered in Npm server environment

Having trouble setting up the environment for Angular 2 with TypeScript. Npm lite runs successfully, but after installing TypeScript and adding a script for the start, I encounter an error.

Error TS18003: No inputs were found in config file 'D:/practical/ang1/tsconfig.json'. The specified 'include' paths were '["**/"]' and 'exclude' paths were '["../wwwroot/app","node_modules/".]

Here is the snippet from package.json:

  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },

And here is the content of tsconfig.json:

{
  "compilerOptions": {
    "lib": [ "es5", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Any suggestions on how to fix this error?

Note:The first time "npm start" worked fine, but after deleting and resetting everything up, it caused the above issue.

angulartypescriptnpm-start

Answer №1

Upon further investigation, I decided to include the following line in the tsconfig.json within the compilerOptions section.

"typeRoots" : ["../node_modules/@types/"]

Answer №2

faisaljanjua contributes a valuable piece to the puzzle.

"typeRoots" : ["../node_modules/@types/"]

However, I also found it necessary

    "types": [
      "node"
    ],

(Keep in mind that adding node to types can potentially introduce npm packages as well, so take precautions.) and 

      "baseUrl": "./*",
      "paths": {
          "@/*":["./*"]
      },

where ./ represents the current directory where your tsconfig file is located.

By including node in types, I had to mention node_modules here as they are managed by npm, which is fundamentally a node tool.

  "exclude": [
    ".git",
    "bin",
    "build",
    "node_modules"
  ]

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

Executing JavaScript file using TypeScript code in Node.js

Is it possible to execute a JS file from TypeScript code in Node.js? One way to achieve this is by exposing the global scope and assigning values to it. For example: Global Scope (TypeScript): globalThis.names = ['Joe', 'Bob', 'J ...

javascriptnode.jstypescript

Building a Dynamic Video Element in Next Js Using TypeScript

Is there a way to generate the video element in Next JS using TypeScript on-the-fly? When I attempt to create the video element with React.createElement('video'), it only returns a type of HTMLElement. However, I need it to be of type HTMLVideoEl ...

reactjstypescriptnext.js

Unable to locate a control named '0-1' within the nested FormArray in Angular

I am currently delving into Angular and exploring formArray functionality. I have two simple lists of roles and rights that I want to use to create a checkbox matrix with a total count of selected rights displayed at the bottom of each column. Check out a ...

angularformarrayformgroups

Start a HTML 5 video and pause any others playing

On my webpage, I have a series of HTML5 videos listed, but I want to ensure that when one video is played, the others automatically stop or pause. The framework I am using is Angular 2 with TypeScript. <video controls (click)="toggleVideo()" #videoPla ...

htmlangulartypescriptangular2-template

"Trouble with Bootstrap Collapse function - Utilizing ng-bootstrap, eliminating the need for JQuery

In my Angular 8 project, I have Bootstrap 4.3.1 and ng-bootstrap 5.1.1 integrated. As per the ng-bootstrap documentation, including ng-bootstrap in your project eliminates the need to manually add jQuery, as it is encapsulated by ng-bootstrap and not requ ...

angularbootstrap-4ng-bootstrap

The function inside the subscribe block is failing to execute because the navigate function is not functioning properly

Issue with router.navigate not being called in Angular There seems to be an issue with the subscribe function not getting inside the subscribe method. I have properly mapped the http registeruser function in the auth.service file, but when I try to subscr ...

angular

Evaluate compatibility across different browsers within a single test scenario utilizing protractor

Looking to experiment with testing a chat application, I'm curious about running one instance of Chrome alongside another instance of Firefox to send messages between the two. After researching, it seems I can open multiple browser sessions for the sa ...

angularseleniumselenium-webdriverprotractorcross-browser

Angular 6: Sending Back HTTP Headers

I have been working on a small Angular Application for educational purposes, where I am utilizing a .net core WebApi to interact with data. One question that has come up involves the consistent use of headers in all Post and Put requests: const headers = ...

angulartypescriptangular-cli

Angular dropdown within another dropdown

I am encountering an issue with a dropdown within another dropdown on my HTML page. The structure is as follows: Dropdown |_ First Dropdown | |_ aaa | |_ bbb | |_ ccc |_ Second Dropdown |_ ddd Even though everything appears ...

htmlangular

Exploring TypeScript: Navigating the static methods within a generic class

I am trying to work with an abstract class in TypeScript, which includes an enum and a method: export enum SingularPluralForm { SINGULAR, PLURAL }; export abstract class Dog { // ... } Now, I have created a subclass that extends the abstract cla ...

angulartypescriptgenerics

Utilizing an external HTTP API on an HTTPS Django and Angular server hosted on AWS

Can this be achieved? I am in the process of creating an ecommerce platform that necessitates interacting with an external API service built on HTTP. My website is hosted on AWS EBS, utilizing django for the backend and angular2 for the frontend. Whenever ...

djangoangularapihttpproxy

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added

Currently, I am working on a project using Angular and firebase. My goal is to develop a function that can take two arguments - a string and an object, then return an Observable containing filtered data based on the key-value pairs in the object for a spe ...

javascriptangularfirebasegoogle-cloud-firestore

Is there a method in Angular to restrict change detection to only the current component and its descendant components?

Is there a way to trigger an event in the child component without traversing the entire component tree from the parent? import { Component } from '@angular/core' @Component({ selector: 'my-app', template: '<b>{{ te ...

angularangular2-changedetection

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

javascripthtmlangularinnerhtml

What is the best way to pause function execution until a user action is completed within a separate Modal?

I'm currently working on a drink tracking application. Users have the ability to add drinks, but there is also a drink limit feature in place to alert them when they reach their set limit. A modal will pop up with options to cancel or continue adding ...

javascriptreactjstypescriptreact-native

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

Angular2 ERROR: Unhandled Promise Rejection: Cannot find a matching route:

I'm facing an issue with my Angular2 application while utilizing the router.navigateByUrl method. Within my component, there is a function named goToRoute, structured as follows: router.goToRoute(route:string, event?:Event):void { if (event) ...

typescriptangularangular2-routing

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

javascriptangulartypescript

Angular's queryParams do not appear to properly connect with the query parameters

My code seems to have a mistake somewhere, but I can't figure it out. In my [queryParams] = "{allowEdit: server.id == 3 ? 1 : 0}", the params object is empty when I subscribe to it in the edit-server component. Why is it empty and how do I a ...

angulartypescriptfrontend

Error: Unable to access 'nativeElement' property from undefined object when trying to read HTML element in Angular with Jasmine testing

There is a failure in the below case, while the same scenario passes in another location. it('login labels', () => { const terms = fixture.nativeElement as HTMLElement; expect(terms.querySelector('#LoginUsernameLabel')?.tex ...

angulartypescriptkarma-jasmine