Encountering "Cannot find module" errors while using the most recent version of WebStorm 2019.3 with Angular

Since updating to Angular 9, I've been encountering errors in the TypeScript error console. Strangely, no errors are shown when I run 'tsc' in the command line.

https://i.sstatic.net/3mNGp.png

This is my tsconfig file:

{
  "compileOnSave": false,
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": true
  },
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    ...
}

Additionally, here's my tsconfig.app.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "module": "esnext",
    ...
}

Any thoughts or suggestions on how to resolve this issue would be greatly appreciated!

Thank you,

Sean

angulartypescriptwebstorm

Answer №1

I discovered the issue when I realized I had the original tsconfig.json file: 

"baseUrl": "./",

Then, I had overridden it with tsconfig.app.json INSIDE the ./src directory:

"baseUrl": "./",

It should have been that the tsconfig.app.json file overrode the original one. However, it seems that WebStorm was switching back and forth (definitely a bug). To resolve this, I modified the original tsconfig.json to:

"baseUrl": "./src",

Now both the tsconfig in the root directory and tsconfig.app in './src' will point to 'src':

"baseUrl": "./src" in root tsconfig.json
"baseUrl": "./" in ./src/tsconfig.app.json

With these changes, everything is working correctly. It appears that WebStorm was getting confused and not using the last configuration as it should.

I hope this explanation helps someone,

Sean.

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

Transferring the click functionality between components in Angular

I have a parent component called Component1. In its HTML, I've included the following code: <div> <router-outlet></router-outlet> </div> <div> <button>Banner</button> </div> My goal is to pass the f ...

angularcomponents

Utilize Angular2 to dynamically add new routes based on an array register

Currently, I am utilizing Angular2 for the frontend of my project and I am faced with the task of registering new Routes from an array. Within my application, there is a service that retrieves data from a server. This data is then stored in a variable wit ...

typescriptangularroutes

Mongoose TypeScript Aggregation error: is not a valid property of type 'any[]'

Attempting to replace a standard mongo call with an aggregate call. The original code that was functional is as follows: const account = await userModel .findOne({ 'shared.username': username }) .exec(); console.log(account._id) The n ...

node.jsmongodbtypescriptmongooseaggregation-framework

Error TS2345: The type '{ type: "mouseWheel"; }' cannot be assigned to the parameter of type 'MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent'

I've integrated the sendInputEvent method into BrowserView: view.webContents.sendInputEvent({type: 'keyDown', keyCode: 'C'}) In the rendering page of BrowserWindow, I've added: window.addEventListener('keydown', ...

typescriptelectron

Having trouble viewing the initial value in an AngularJS2 inputText field

I'm having trouble displaying the initial value in inputText. I'm unsure of what mistake I'm making, but the value should be showing up as expected. Kind regards, Alper <input type="text" value="1" [(ngModel)]="Input.VSAT_input1" name= ...

htmlangulartypescript

Displaying elements within a collection of forms

I am currently working on displaying users' names and a list of their courses in an Angular project. Each user has a different number of courses, so I am experimenting with using Angular Form Array to achieve this functionality. Below is a snippet fr ...

angulartypescriptangular-reactive-formsformarrayangular-formbuilder

Having trouble upgrading to Angular 2 RC7 and encountering issues with routing?

Attempting to elevate our app to angular 2 RC7 with router 3.0.0.rc-3 from RC5 has resulted in errors on the child routes files. ERROR in [default] C:/src/app/routes/childroute1/child-routes-one.routes.ts:31:8 Type '{ path: string; component: t ...

angular

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

Implementing the masonry-layout library by David Desandro in my Next app has been a smooth process. You can find the link here. When I apply it, the masonry layout functions perfectly as intended. Here's how I'm incorporating it successfully: imp ...

reactjstypescriptnext.js

What is the best way to search for and isolate an array object within an array of objects using Javascript?

I am attempting to narrow down the list based on offerings const questions = [ { "id": 2616, "offerings": [{"code": "AA"},{"code": "AB"}]}, { "id": 1505, "offerings": [ ...

javascriptarraystypescriptfiltering

A TypeScript function that returns the ReturnType of a specific callback function

Is it possible to define an annotation for a function that accepts a callback, and have the function return type determined by the callback's return type? // Suppose the callback takes a number as argument function processCallback(cb: (arg:number) =&g ...

typescripttypescript-generics

Using interfaces for typecasting in TypeScript

Consider the code snippet below: let x = { name: 'John', age: 30 } interface Employee { name:string, } let y:Employee = <Employee>x; console.log(y); //y still have the age property, why What is the reason for TypeScript ov ...

typescript

Oh no, an issue has occurred with The Angular Compiler! It appears that TypeScript version 3.9.10 was found instead of the required version, which should be >=3.6.4 and <

After upgrading my angular application from version 5 to version 9, I encountered an issue while trying to deploy my code on the server. ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.9.0 but 3.9.10 was found instead. Even though ...

angulartypescriptmigrationangular9

Learning to utilize the i18n library with React Vite

The developer console is showing the following message: i18next::translator: missingKey en translation suche suche Here is the file structure of my project: vite.config.ts i18n.js test/ src/ components/InputSearch.tsx routes/ public/ de/translation. ...

typescriptvitei18nextreact-i18nextreact-tsx

Purging the Webpack cache

Is there a way to prompt webpack to clear its cache? While working extensively with threejs and webpack, I noticed that webpack seems to hold two instances of threejs in memory without any obvious reason. The error message reads: https://i.sstatic.net/JH ...

angularthree.jswebpack

Encountering issues importing 'angulars/router' into Plunker environment

I'm encountering an issue with Plnkr when trying to import the router class in my project import {Component} from '@angular/core' import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; An error messag ...

angular

Have they developed a polygon amoy chain specifically for thirdweb?

I'm currently attempting to utilize the polygon amoy testnet on a local server. Unfortunately, I haven't been able to determine if there's a method for accessing this chain via thirdweb. My code is implemented in typescript. Although I att ...

typescripterc20thirdweb

Various dateInput formats supported by mat-datepicker

I'm facing an issue while configuring two mat-datepickers with different date formats - "MM/YYYY" and "DD/MM/YYYY". I attempted to set the format for MM/YYYY in one module and the format for DD/MM/YYYY in the app module. Here is my first code snippet ...

angulartypescriptdatepickerangular-material2formatdatetime

ngModel shows the same values for distinct fields

Currently working on an Angular 5 and Firestore project, where I have implemented a form using [(ngModel)] to update a document in the database. The update operation is successful, however, there seems to be an issue with how the [(ngModel)] is displaying ...

angulartypescriptfirebaseangularjs-directive

Tips for excluding HTML tags within childNodes while performing a string.replace() using innerHTML

I am working on a project to enhance readability by replacing each word in a document's P tags with a span element. The code I have works well for the first case, but subsequent replacements start to mess up the HTML structure of the P tag. Here is an ...

javascripttypescriptdominnerhtml

Establish a default value for ng2-datepicker

Has anyone figured out how to set an initial value for the ng2-datepicker when using it for available date and date expires? I want the initial value of dateAvailable to be today's date and the initial value of dateExpires to be 2099-12-31. <label ...

angulartypescriptng2-datepicker