Encountering Compilation Issues Post Upgrading to Angular 9

I recently upgraded my Angular application from version 8 to version 9, following the official guide. However, after the upgrade, I encountered errors that prevent my application from building. The specific errors include:

"Module not found: Error: Can't resolve '@angular/cdk/layout/breakpoints'", "Field 'browser' doesn't contain a valid alias configuration resolve as module looking for modules in No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /@angular/cdk/layout/breakpoints doesn't exist .ts"

Similar errors are also reported for 

@angular/material/core/common-behaviors
, @angular/material/core/datetime, and @angular/material/core/ripple.

I have tried including all relevant files that I thought could help resolve the issue, but I'm still stuck. If anyone has suggestions or solutions, please assist me. This problem is causing a lot of frustration.

Here are snippets from my package.json:

[package.json content]

Here are excerpts from my angular.json:

[angular.json content]

And here are sections from my tsconfig.json:

[tsconfig.json content]
angulartypescript.net-coreangular-materialangular-cli

Answer №1

Follow these steps:

  • undo any recent changes
  • delete the node_modules directory
  • npm install / yarn
  • npm install @angular/cli -g
  • ng update @angular/cli @angular/core --force
  • ng update --all --force

If you are using Angular Material, include @angular/material in the last command
To track changes with git commits, add --create-commits

Answer №2

If you encounter an issue where The Angular Compiler is asking for TypeScript version >=3.6.4 and <3.9.0, but 3.9.5 is detected instead, you can try running the following command:

npm i [email protected]

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 validation with input binding using if statement

I have developed a reusable component for input fields where I included a Boolean variable called "IsValid" in my typescript file to handle validation messages. Here is the code from my typescript file: export class InputControlsComponent implements OnIn ...

htmlangulartypescriptinputbinding

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

javascripthtmlangularangular-materialmat-autocomplete

After applying the withStyles and withTranslation higher order components to a React component, a Typescript error is displayed

Trying to create a React component using Typescript, incorporating withStyles from @material-ui/core and withTranslation from react-i18next, both of which are Higher Order Components (HOC). Encountering a typescript error when using them together. Specif ...

reactjstypescriptmaterial-uireact-i18nextreact-with-styles

Having difficulties executing protractor tests on Safari

In my Angular7 project, everything runs smoothly in Chrome with all E2E tests passing without any issues. However, when trying to run the tests in Safari, Protractor crashes and throws an error. Initially, I had configured my protractor.conf.js file as fo ...

angularsafariprotractor

Guide on formatting the API response using a callback function in Angular development

How can I reformat my API response using a callback function and access the data within the angular subscribe method? I attempted to use mergemap but it didn't work as expected. this.http.get('https://some.com/questions.xml', {headers, res ...

angulartypescript

Having trouble utilizing a JavaScript file within TypeScript

I am currently exploring the integration of Three.js into an Angular application. Following the documentation, I imported Three.js using the following line: import * as THREE from 'three'; In addition, I installed the types for Three.js with th ...

angulartypescriptthree.js

Assign the onClick function to the decoration of a Vscode extension

When I click on a vscode decoration, I want to trigger a function. Here's the code I created for this: const decoration = { range, hoverMessage: `${command} ${input}`, command: { title: 'Run Function', command: ' ...

typescriptvscode-extensions

The Google Books API has encountered an authentication error with status code 401

Trying to access public data using the Google Books API locally: An error occurred with the authentication credentials. It seems that an OAuth 2 access token, login cookie, or another valid authentication credential is missing. For more information, visit ...

javascriptangular

Utilizing Angular's reactive forms to populate an array field with an array of data

I am currently using Angular 6 along with Reactive form to create a form. Within the ngOnInit() function, I have set up a form group in the following manner: this.landingPageForm = this.formBuilder.group({ title: new FormControl('', [ Val ...

angularangular6angular-reactive-forms

Error: Axios header not refreshing automatically in React. User must manually refresh the page

After logging in, I want to update the JWT token in the header before redirecting to the home page. Login.tsx ... const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.curr ...

javascriptreactjstypescriptauthenticationaxios

The navigation function in Angular, this.router.navigate, is causing issues and

I've encountered a peculiar issue. There's a logout function that is activated whenever I receive a 401 response from any API I interact with. The function looks like this: constructor( private router: Router, ) {} logout(router1: Router ...

angulartypescriptfrontend

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

htmlcssangular

Experiencing complications with an Angular 2 router

When a user logs into the system, they are greeted with a navigation bar featuring options like Dashboard, Customers, and Product. Below is an excerpt from my routes file: app.routing.ts export const router: Routes = [ { path: '', redir ...

javascriptangularroutesnavbarrouter

Troubleshooting the tabindex issue with buttons in MatMenu in Angular

I am currently using Angular 17 in my project and I am working on adding ADA compliance to it by placing tabindex where needed. However, I am encountering an issue with a button inside a mat menu. The tabindex="0" attribute is not focusing on th ...

angularmaterial-uiangular-material

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 ...

typescript

Tips for building a calculated field within Angular's reactive forms

I have recently implemented a form in my application and here is the code snippet: mapForm = this.fb.group({ name: ['', Validators.required], view: this.fb.group({ width: ['', Validators.required], height: [' ...

angularangular-reactive-forms

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material alw ...

javascriptcssangularangular-material

Error message: When using Vue CLI in conjunction with Axios, a TypeError occurs stating that XX

I recently started working with Vue.js and wanted to set up a Vue CLI project with Axios for handling HTTP requests. I came across this helpful guide which provided a good starting point, especially since I plan on creating a large project that can be reus ...

typescriptrestvue.jsnpmaxios

Executing a function once the Angular Component's DOM has been updated, just like how ngAfterViewInit works

I have a unique feature in my component that creates multiple directives based on user input. The simplified example below demonstrates how the component receives configuration data through an Input(), processes it using a service called MyService to gener ...

angulartypescript

What is the best way to adjust and filter an array based on a single value?

Here is an array that needs to be modified: [ {name: "test", value: "test", group: 0}, {name: "test1", value: "test2", group: 0}, {name: "test3", value: "test3", group: 1}, {name: "te ...

javascripttypescript