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

Bidirectional binding in Angular 2 Custom Directive

I've been working on a custom directive that automatically selects all options when the user chooses "All" from a dropdown. While I was able to get my custom directive to select all options, it doesn't update the model on the consuming component. ...

Error: The object is not defined (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

I am currently working on developing a chat application using react-native with the following dependencies: "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/masked ...

Angular is able to successfully retrieve the current route when it is defined, but

Here's the code snippet I am working with: import { Router } from '@angular/router'; Following that, in my constructor: constructor(router: Router) { console.log(this.router.url); } Upon loading the page, it initially shows the URL a ...

Could someone show me how to modify the color of Material UI Label text in Angular?

Currently, I am developing my Angular university Project using the Mui library. In my logIn form, I have a Dark background and I would like to change the color of my Label Textfield to something different. Can anyone provide assistance? ...

Unraveling the Mechanics of ngFor in Angular

I am looking to optimize my code. In the section-portrait.component.html file, I have this ngFor loop: <app-portrait *ngFor="let model of models" [firstName]="model.firstName" [lastName]="model.lastName" ></app-portrait> This ...

What is the process for obtaining the ID of a selected node within ngx-graph?

Issue My challenge lies in using the ngx-graph library to create a flow chart within Angular 9. I am attempting to extract the id value of a node that has been clicked on. I have tried printing out "$event" and examining the PointerEvent object that appea ...

What is the best way to simulate a dynamoDB call using jest?

In a simple Handler, I have calls to getData defined in a separate file export const handler = async (event: APIGatewayProxyEvent): Promise<APIGatewayProxyResult> => { let respData = await new DynamoDBClient().getData(123); return { status ...

How can Angular 2 e2e tests maintain respect for their execution order?

What's the best way to ensure that Angular 2 e2e tests run in the order they are declared? I am currently using Angular-cli for my project. ...

What could be the reason for the route animation failing to work in Angular2?

App.module: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from "@angular/http"; import { BrowserAnimat ...

Angular 6 Calendar Template issues with parsing: Unable to link to 'view' as it is not recognized as a valid property of 'div'

I am in the process of developing an application that utilizes this angular calendar. My tech stack includes Angular 6 with AngularFire2 and Firebase. Below is my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; imp ...

Update md-progress-linear without causing a $digest cycle

The example showcasing the usage of md-progress-linear provides the following code snippet; <md-progress-linear md-mode="determinate" value="{{vm.determinateValue}}"> </md-progress-linear> It then updates the progress as follows; $interval( ...

How to use multiple template urls in Angular 6

Currently, I am creating a front-end using Angular 6 and facing the challenge of having components with varying html structures based on the user who is logged in. The number of templates required can range from 2 to over 20, so my preference would be to ...

A versatile Material UI paper that adjusts its dimensions dynamically

Utilizing Material-UI's Paper component (https://mui.com/components/paper/), I've encountered a scenario where the content within the Paper element needs to be dynamic. <Paper className="modal" elevation={3}> ...Content </Paper ...

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

Changing the environment variable in an Angular application with user input

I'm currently in the process of developing an angular application that interacts with a REST API on the backend server. The URL for this server is currently set as an environment variable like so: export const environment = { production: false, lo ...

Error occurs after upgrading React app to vite due to node-fetch issue

I'm a bit perplexed by this issue. Transitioning the build tool to vite has been seamless except for encountering this error: No matching export in "node_modules/node-fetch/lib/index.mjs" for import "RequestInit" No matching expor ...

How can we initiate an AJAX request in React when a button is clicked?

I'm fairly new to React and I'm experimenting with making an AJAX call triggered by a specific button click. This is how I am currently using the XMLHttpRequest method: getAssessment() { const data = this.data //some request data here co ...

How to show specific images by clicking on particular items in Ionic 3 on a separate page

Can someone assist me with displaying specific images from a slider gallery? I am struggling to figure out how to show only the January edition when clicking on it in eighteen.html, while hiding the February and March editions. It has been 2 days of unsucc ...

Error: When using HttpClient.get().subscribe() in Ionic v5/Angular 8, a TypeError is returned stating that it cannot read the property 'handle' because it is

When I use HttpClient.get('...').subscribe((data:any) => { console.log(data) }), it causes an error and I can't seem to pinpoint where the issue lies. Can anyone provide insight into what might be going wrong? I'm new to Angular. I sus ...