Encountering problem while upgrading Angular Material from version 13 to 14 - error TS2307: Module '@angular/material/core/common-behaviors/constructor' not found

While upgrading Angular and Angular Material from version 13.2.6 to 14.2.2, I encountered the following challenges:

Error TS2307: Module '@angular/material/core/common-behaviors/constructor' or its type declarations cannot be found.

Error TS2345: Argument of type 'typeof MatInputBase' is not compatible with parameter of type '_AbstractConstructor'. Construct signatures types are incompatible.

This issue affected all files that used Constructor and AbstractConstructor.

I came across a related discussion, but none of the suggestions provided were helpful in resolving my problem.

Answer №1

It's always helpful when the error message is straightforward - "Cannot find module" simply means the module is not present :)

To verify this, I checked the node_modules directory and then navigated to @angular/material/core/ to confirm the absence of a common-behaviors folder. However, within the core module's index.t.ts file, I discovered the following declarations:

export declare type _Constructor<T> = new (...args: any[]) => T;

export declare type _AbstractConstructor<T = object> = abstract new (...args: any[]) => T;

This suggests that the code was rearranged during refactoring, causing some changes in location. To resolve my issue, all I had to do was adjust the imports to the correct path, switching from:

import { AbstractConstructor, Constructor } from '@angular/material/core/common-behaviors/constructor';

to:

import { _AbstractConstructor, _Constructor } from '@angular/material/core';

Naturally, a slight modification to the code was necessary since these classes now have an underscore preceding their names.

An easy fix, though not immediately apparent, especially since it was not outlined in the Angular Migration guide or handled by the upgrade script itself.

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-cli is throwing an error indicating that the current version is outdated

While working on one of my Angular 2 projects, I encountered an error when trying to run and test the app using the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a6a9a0b2aba6b5eaa4abae87f6e9f7e9f7eaa5a2b3a6e9f6f2">[email& ...

Is it feasible to send a variable to angular.json in order to prevent repetitive code?

I'm searching for a strategy to efficiently pass data to the angular.json file, eliminating the need for redundant build configurations. To illustrate my point better, let's use an example. Currently, in my angular.json file under the configurati ...

Capture stunning photos with Ionic Capacitor CameraPreview, where the camera is always front and center. Say goodbye to any

I'm currently working on developing a customized camera feature for a tablet application. One of the challenges I'm facing is getting buttons to float over the camera preview. Despite setting the isBack attribute to true, the camera preview remai ...

Attempting a second filter of the table using the dropdown results in no data being returned

I've developed a CRUD app using Angular 7, and I'm facing an issue. When I select a dropdown item for the first time, it shows the desired table data. However, on selecting another item for the second time, it returns nothing. Below is my compone ...

Tips for ensuring all files are recognized as modules during the transition of an established NodeJS project to TypeScript

I'm diving into TypeScript as a newcomer and I am exploring the process of transitioning a large, existing NodeJS codebase that is compliant with ES2017 to TypeScript. Here's a glimpse at my tsconfig.json: { "compilerOptions": { "mo ...

Adjusting the timing of a scheduled meeting

Is there a way for me to update the time of a Subject within my service? I'm considering abstracting this function into a service: date: Date; setTime(hours: number, mins: number, secs: number): void { this.date.setHours(hours); this.date.s ...

issue encountered when implementing slick.js in angular 6

Trying to implement slick.js, a carousel framework, in an Angular project. Initially attempted 'npm install slick --save' and manually adding the downloaded files to scripts and styles JSON objects. When that failed, resorted to importing the C ...

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

I am facing an issue with my Azure DevOps build pipeline that contains 2 npm tasks: - one for npm install - and the other for npm run-script build Unfortunately, I am encountering errors that do not provide sufficient information about the root cause of ...

Missing data list entries for next js server actions

After successfully running my add function, I noticed that the data I added earlier is not being reflected in the list when I check. import React, { useEffect, useState } from "react"; import { createPost } from "./actions"; import { SubmitButton } from ". ...

Angular2 Window Opener

Trying to establish communication between a child window and parent window in Angular 2, but I'm stuck on how to utilize window.opener for passing a parameter to Angular 2. In my previous experience with Angular 1.5, I referenced something similar he ...

The error message TS2339 in Angular service.component indicates that the property 'subscribe' is not recognized on the type 'Promise<Object>'

Currently, I am in the process of learning Angular by developing a web application for my parish. I have implemented a method for deleting items in the products-list.component.ts file which appears to be technically correct. However, when I attempt to run ...

Implementing the 'colSpan' attribute in ReactJS

I encountered an error saying "Type string is not assignable to type number" when attempting to include the colSpan="2" attribute in the ReactJS TypeScript code provided below. Any suggestions on how to resolve this issue? class ProductCategoryRow exten ...

A guide on successfully sending parameters to Angular routes

Currently, I am delving into Angular and exploring various basic concepts such as routing, Observables (and subscribing to them), making HTTP requests, and utilizing routing parameters. One scenario I have set up involves sending a HTTP GET request to JSON ...

Tips for resolving the "Page Not Found" error in your NextJs application

I am organizing my files in the following structure src/ ├── app/ │ ├── pages/ │ │ ├── authentication/ │ │ │ ├── SignUp/ │ │ │ │ └── page.tsx │ │ │ └── SignIn/ │ ...

Similar to the getState() function in react-redux, ngrx provides a similar method in Angular 6 with ngrx 6

Recently, I developed an application with react and redux where I used the getState() method to retrieve the state of the store and extract a specific slice using destructuring. Here's an example: const { user } = getState(); Now, I am transitioning ...

Polling with RxJs, handling errors, and resetting retryCount with retryWhen

I am currently working on setting up a polling strategy that functions as follows: Retrieve data from the server every X seconds If the request fails, show an error message: "Error receiving data, retry attempt N°"... And retry every X seconds for a maxi ...

I am working on a project where I have a parent component that contains a textarea element. My goal is to dynamically adjust the height of this textarea

Is there a way to adjust the size of a textarea component in a child component? textarea.html <textarea style = "height"=150px></textarea> // The height is defined globally here xyz.html <app-textarea></app-textarea> // Looking ...

Ways to extract the body/message of a request from an HttpErrorResponse in Angular using the ErrorHandler

Imagine I make a request to the server using the post method in order to create a new user. In case the server responds with an error, my goal is to retrieve the form data that was submitted along with that request from the ErrorHandler. This information i ...

Ways to stop the MasterComponent from rendering on every route change

I have a dropdown menu: click here to view My goal is to keep the dropdown open when the user opens a menu, but disable it if the user changes routes by clicking on another menu. How can I achieve this? Note: If the user navigates within the same route, ...

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...