Transitioning from angular 7 to the latest version 12

Upgrading from Angular 7 to 12 has presented a series of issues for me.

The main problem seems to be with Angular Material.

I am looking for a solution to this.

./src/app/material.module.ts:13:89-110 - Encounter Error: 'MatAutocompleteModule' (imported as 'MatAutocompleteModule') not found in '@angular/material'

./src/app/material.module.ts:13:112-126 - Encountered Error: 'MatBadgeModule' (imported as 'MatBadgeModule') was not found in '@angular/material'

./src/app/material.module.ts:13:128-148 - Encountered Error: 'MatBottomSheetModule' (imported as 'MatBottomSheetModule') not found in '@angular/material'

... and so on
angulartypescript

Answer №1

Starting from Angular Material version 9, each module must be imported from its own unique path. For example:

import { MatAutocompleteModule } from '@angular/material/autocomplete';

If you have updated your Angular application using the ng update command (it is advised to use this method for updating Angular, although it is not recommended to skip multiple major versions, see here for more information), the migration process will automatically take care of updating the imports and no manual changes are required.

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

What is the reason behind TypeScript failing to provide type safety in a generic higher order component which introduces extra properties into React components?

I'm currently working on developing a versatile higher order component, but have encountered an issue with type safety not being enforced. Interestingly, when attempting the same implementation without using generics, the type safety is verified as ex ...

reactjstypescriptgenericshigher-order-components

Having trouble getting web components registered when testing Lit Element (lit-element) with @web/test-runner and @open-wc/testing-helpers?

Currently, I am working with Lit Element and Typescript for my project. Here are the dependencies for my tests: "@esm-bundle/chai": "^4.3.4-fix.0", "@open-wc/chai-dom-equals": "^0.12.36", "@open-wc/testing-help ...

javascripttypescriptunit-testingweb-componentlit-element

What are the best practices for utilizing Vue.js slot components and managing interactions between parent and child components?

Recently, I've been exploring the slot component feature of Vue.js with the aim of understanding how to manipulate component information using slots. I decided to create a simple code snippet in order to grasp the concept of slot components better. Ho ...

typescriptvue.jsvuetify.jsnuxt.js

Using LitElement: What is the best way to call functions when the Template is defined as a const?

When the template is defined in a separate file, it's not possible to call a function in the component. However, if the template is defined directly as returning rendered HTML with this.func, it works. How can one call a function when the template is ...

typescriptlit-elementlit-html

Angular2 displays an error stating that the function start.endsWith is not recognized as a valid function

After switching my base URL from / to window.document.location, I encountered the following error message: TypeError: start.endsWith is not a function Has anyone else experienced this issue with [email protected]? ...

angulartypescriptangular2-routing

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

After refreshing, the LocalStorage in Angular 2 seems to disappear

Something a little different here :) So, when attempting to log a user in, I am trying to store the access_token and expires in localStorage. It seems to be working "okay". However, if I refresh the page, the tokens disappear. Also, after clicking the log ...

javascriptangular

There seems to be an issue with the OpenAPI generator for Angular as it is not generating the multipart form data endpoint correctly. By default

Here is the endpoint that needs to be addressed: @PostMapping(value = "/file-upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public List<FileReference> handleFileUpload( @RequestPart(value = "file", name = "f ...

javaangularspringtypescriptswagger

Unit testing the error function within the subscribe method in Angular

I've been working on a unit test for the subscribe call, but I'm struggling to cover the error handling aspect of the subscribe method. The handleError function deals with statusCode=403 errors and other status codes. Any assistance would be grea ...

angulartypescriptunit-testingjasminekarma-jasmine

Unable to generate a store using reducer in TypeScript and Redux

I am having trouble creating a store using Redux and TypeScript. Here is my actions.js file: import { Action } from 'redux'; export interface ITodoAction extends Action { todo:string; } export const ADD_TODO:string = 'ADD_TODO'; ...

typescriptredux

Receiving contextual information from Microsoft Teams within an Angular application integrated as a tab

I am currently integrating an Angular website into a Microsoft Teams tab. In order to perform certain computations, I need to retrieve the Team ID. To achieve this, I have recently added npm install --save @microsoft/teams-js. Below is the code snippet th ...

angulartypescriptmicrosoft-teams

Using an angular 4 static method with a non-static object as an argument

Currently, I am working on an Angular 4 application and facing an issue while trying to pass the current language to the toLocaleString() method. The mathRound method is static, which makes it difficult to understand this.translation.currentLang. How can ...

angular

The whereabouts of the node_modules folder during the development phase

As I dive into Angular 2 app development, I encountered an issue. Installing node modules in each project folder using npm install seems to be taking up a lot of disk space and causing duplication across multiple projects. This led me to consider creating ...

angularnexusnode-modules

What steps can I take to ensure my CSS selector for the element is functioning properly?

Here is an example of some code: <html> <head> <style> .test{ background-color: red; p { background-color: yellow; } } </style> </head> <body> <div class="test"> ...

javascriptcssangular

Require assistance with accurately inputting a function parameter

I developed this function specifically for embedding SVGs export function svgLoader( path: string, targetObj: ElementRef ){ let graphic = new XMLHttpRequest; graphic.open('GET', path, !0), graphic.send(), graphic.onload = (a)=> ...

angulartypescript

Using Angular to invoke a method from a subclass

I am currently utilizing a RAD software that automatically creates Angular code for me. Each time, it generates two components: one is the "generated" component and the other is an empty component where you can add your own custom functions. In this scen ...

angular

Mastering error handling in Angular's Http requests

In my frontend application using Angular, I need to communicate with a RESTful webservice for the login process. The webservice returns different response codes in JSON format depending on the success or failure of the login attempt: If the login is corre ...

angularhttp

What could be causing the "Error: InvalidPipeArgument" to appear in my Angular code?

Currently, I am tackling a challenge within my Angular project that involves the following situation: Essentially, my HomeComponent view code looks like this: <div class="courses-panel"> <h3>All Courses</h3> <mat-t ...

angulartypescriptrxjsangular-observableasync-pipe

Does Highchart offer support for drilling down into sub-categories?

I want to implement a sub-sub drill down feature in my Chart using the following code snippet. // Create the chart Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Highcharts m ...

javascriptangularhighcharts

Separating Angular code into distinct components

My page contains two input fields: one is for email and the other is a text field. Currently, everything is functioning correctly. However, I now want to split the component into two parts. For example, I have a 'basic-info' component currently. ...

angularinputcomponents