Issue TS2307 encountered following the transition from Angular 11 to Angular 12 in a project migration

After upgrading my project from Angular 11 to Angular 12, I encountered errors while using the ng update command. Instead of troubleshooting further, I decided to take a more manual approach.

I started by creating a brand new Angular 12 project, re-adding all the necessary dependencies, and then replacing the src folder from my old Angular 11 project. Since the config files in the Angular 11 project had default values, I assumed that sticking with the defaults in Angular 12 would work smoothly.

However, my optimism quickly faded as I saw the build logs filled with error TS2307 related to local files.

Despite confirming that the file was indeed present in the folder, the error persisted:

Error: src/app/components/open-orders/open-orders.component.ts:2:23 - error TS2307: Cannot find module 'src/app/data/Order' or its corresponding type declarations.

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

This is the open-orders.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Order } from 'src/app/data/Order';
import { CloudService } from 'src/app/services/cloud.service';

The same TS2307 error persisted for both local imports.

Even after attempting to use relative paths, the issue remained:

import { Component, OnInit } from '@angular/core';
import { Order } from '../../data/Order';
import { CloudService } from '../../services/cloud.service';

Despite trying various solutions found online in the tsconfig.json and angular.json files, none seemed to solve the TS2307 problem at hand.

Could this be specifically related to Angular 12? Any assistance in resolving this issue would be greatly appreciated.

Answer №1

The reason for the error is that it is trying to find a module in src/app/data/Order, but it cannot be found. Make sure to verify your file path and confirm if the module actually exists.

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

Is there a way to help my KafkaJS consumer stay patient while waiting for a broker to become available?

My KafkaJS consumer setup looks like this: // Create the kafka client const kafka = new Kafka({ clientId, brokers, }); // Create the consumer const consumer = this.kafka.consumer({ groupId, heartbeatInterval: 3000, sessionTimeout: 30000, }); // ...

angular ag-grid error with cell editing

I am encountering issues with updating a cell in ag-grid within my Angular 8 application. Below is the code snippet for reference: this.columns = [ { headerName: '', field: 'enabled', width: 30, headerCheckboxSelection: true, check ...

Tips for utilizing [ngClass] with various class situations in Angular4

My current div structure is as follows: <div class="class-a" [ngClass]="{'class-b': !person.something}"> However, I now need to add an additional condition... I want the div to have class-a if one condition is met, class-b if another con ...

Trigger the rowContextMenu in Tabulator Table by clicking a Button

Is there a way to add a button at the end of a table that, when clicked, opens a rowContextMenu below the button? Additionally, can the rowContextMenu pop up when right-clicking anywhere on the row? I have attempted some solutions without success. Here is ...

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

I am puzzled by the structure of 3 classes: A, B, and C. Both B and C extend the abstract class A. abstract class A { public name: string; constructor(name: string) { this.name = name; } abstract getName(): string; } class B extends A { g ...

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...

Interactive MUI React Tab Components

Currently, I am working with MUI tabs and have added an X button to them. However, I am facing difficulties in making the tabs closeable. I would greatly appreciate any help or guidance on how to achieve this feature. Despite trying different methods, I ha ...

How can a fixed type value be assigned to a portion of a type that is constrained by generics?

Experience a new aspect of Ids with my basic interface: interface Identifiable { id?: number; } Behold, a universal function that transforms record objects into entities with ids: function transformRowToObject<T extends Identifiable>(row: { id: ...

Tips for utilizing the "??=" syntax in Typescript

let x; x ??= 'abc' console.log(x); // abc Running the code above in the browser console does not cause any issues. However, when attempting to run it in TypeScript, an error is thrown. SyntaxError: Unexpected token '??=' Here is my c ...

Unable to fulfill the return type requirement in a typed TypeScript function

In this scenario, let's consider the following type: export type Transformer = <T extends any[], U>( data: T, ) => U; Now, let's examine a function that needs to adhere to this type: export const transform: Transformer = ( d ...

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

I've been working on a multiselect feature in my Next.js project, utilizing states and setting them accordingly. However, I keep encountering this specific error: https://i.stack.imgur.com/m8zuP.png whenever I click on this: https://i.stack.imgur.c ...

Guide for transferring data from HTML to controller in Angular 4

Hello everyone, I am new to Angular and currently working on displaying a table based on the value of a toggle button. I have implemented a toggle button using Angular material, but I'm struggling to pass the data to my controller. I would really app ...

What is the best way to implement a <Toast> using blueprintjs?

Struggling without typescript, I find it quite challenging to utilize the Toast feature. This component appears to have a unique appearance compared to the others. Shown below is an example code. How would you convert this to ES6 equivalent? import { But ...

Working with base URL and relative paths in Angular 2 on GitHub Pages

While attempting to deploy my project site on gh-pages, I encountered an issue with relative paths in the templates of my Angular2 app that uses webpack. Despite setting the base URL to match my repository name, everything loads fine except for the paths w ...

Show a modal component from another component in Angular 2

As a newcomer to Angular, I'm working on a modal component that changes from hiding to showing when a button with (click) is clicked. The goal is to integrate this modal into my main component, allowing me to display the modal on top of the main conte ...

Which objects can be looped through in Aurelia templating?

In the documentation for Aurelia, it mentions that repeaters can be used with arrays and other iterable data types, including objects, as well as new ES6 standards like Map and Set. Map is usually recommended, as shown in the example below: <template&g ...

What methods can TypeScript employ to comprehend this situation?

There's an interesting scenario when it comes to assigning a variable of type unknown to another variable. TypeScript requires us to perform type checking on the unknown variable, but how does TypeScript handle this specific situation? It appears that ...

Extending a Typescript class from another file

I have a total of three classes spread across three separate .ts files - ClassA, ClassB, and ClassC. Firstly, in the initial file (file a.ts), I have: //file a.ts class ClassA { } The second file contains: //file b.ts export class ClassB extends Class ...

Instructions on invoking a setter method in Angular

I am looking to implement a setter method to update my form. When should I invoke the setter method? Below is the code snippet from my component.ts: export class UpdateZoneComponent implements OnInit { profileForm: FormGroup products: any; h: number; c ...

How can I remove a row from a mat table using Angular?

Having trouble implementing *ngFor in my angular mat table, seeking guidance from someone with more expertise? I am trying to delete a row within an array using a button and display it on my table, but encountering issues. I intend to utilize *ngFor to sh ...