Upgrade Challenge from Angular 7 to Angular 9

I am currently in the process of upgrading my application from version 7 to version 9. However, I have encountered an issue with the new IVY compiler in Angular 9 not being compatible with the library angular-webstorage-service, resulting in the following error:

ERROR in node_modules/angular-webstorage-service/src/storage-service.module.d.ts:9:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This indicates that the library (angular-webstorage-service) containing StorageServiceModule has either not been processed correctly by ngcc or is incompatible with Angular Ivy. It may be worth checking for a newer version or reaching out to the library's authors for clarification on its compatibility with Ivy.

Any suggestions for making Angular 9 compatible with this issue?

typescriptangular7angular9

Answer №1

According to the updated guidelines for Angular upgrades available here

https://i.sstatic.net/GRpC5.png

When upgrading the Angular version, it is important to update dependencies to ensure compatibility with the new version.

The error message is caused by the fact that the npm library angular-webstorage-service is not compatible with Angular version 9.0.1.

As mentioned in the documentation for angular-webstorage-service found here, the ngx-webstorage-service is suitable for use with Angular 9.

https://i.sstatic.net/ZGLJf.png

To fix this issue, you need to execute the following commands:

npm un angular-webstorage-service --save
npm i ngx-webstorage-service --save

By doing this, the problem should be resolved.

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

An item whose value is determined by the specific type of key it possesses

Consider the following scenario: enum MouseType { GENERAL_USE = 1, SPECIALIZED_USE = 2, } enum KeyboardType { GENERAL_USE = 3, SPECIALIZED_USE = 4, } interface MouseSpecifications { buttons: number; dpi: number; } interface KeyboardSpecifica ...

typescript

The properties in Typescript, specifically 'value', are not compatible with each other

I've encountered an error while working on a TypeScript project with React Context. The error message states: Argument of type 'Context<{}>' is not assignable to parameter of type 'Context<IsProductContext>'. The type ...

reactjstypescript

What is the best way to loop through properties of a Typescript interface?

I am currently working with an interface called FilterData, which has the following structure: export interface FilterData { variables?: string[]; processDefinitionKey?: string; } When I make a request to the server, I receive an object named filterS ...

javascriptnode.jstypescript

Is there a simpler and more refined approach for handling Observables within RxJS pipelines?

Picture this: I have an observable that gives me chocolate cookies, but I only want to eat the ones without white chocolate. Since I am blind, I need to send them to a service to determine if they are white or not. However, I don't receive the answer ...

javascriptangulartypescriptrxjs

Steps for automatically closing a TextPrompt if the end user does not respond within a specific time frame

How can I programmatically close a Prompt in Microsoft Chatbot SDK v4, such as TextPrompt or ConfirmPrompt, and end the dialog after a certain period of time if the user does not reply? I attempted to use setTimeout and step.endDialog but encountered issu ...

javascriptnode.jstypescriptbotframework

The type 'Navigator' does not have the property 'userAgentData' in its definition

Since I'm looking to minimize the information provided by navigator.userAgent, I decided to migrate to User-Agent Client Hints. However, I've encountered an error while attempting to do so: https://i.stack.imgur.com/lgIl7.png Could someone plea ...

javascripttypescriptgoogle-chrome

Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow. https://i.stack ...

javascripttypescriptmathcalculationangle

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

I am facing challenges enforcing restricted imports in my TypeScript project using ESLint. The configuration seems to be causing issues for me. I have configured the baseUrl in my tsconfig.json file as "src" and attempted to use modules in my ESLint setup ...

javascriptreactjstypescriptwebpackeslint

Streamline copyright verification with Angular

We are currently working on an angular application that we plan to release as open-source. We make sure to include copyright information in every file, specifically in the .ts and .scss files. However, being human, there are times when we may forget to ad ...

angulartypescriptnpmsass

Switching over to Typescript: Sending mapped properties

I'm having trouble converting my React.JS script to TypeScript. I need assistance in creating a drop-down navigation bar on my website. Here's a snippet from my Header.tsx file: The error message Property 'onClick' does not exist on t ...

reactjstypescript

Missing expected property in TypeScript casting operation

I recently came across this intriguing playground example outlining a scenario where I attempted to convert an object literal into an object with specific properties, but encountered unexpected results. class X { y: string; get hi(): string { ...

typescript

The presence of v-if does not depend on the model value to toggle the element

I have a scenario where I want to hide the dropdown menu for US states if a different country other than the US is selected. The code snippet I am using to achieve this functionality is shown below: <b-row v-for="demo in demographics" :key=&qu ...

typescriptvue.jsvuejs2

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

I can't help but wonder if anyone has encountered this issue before. Prior to this, my EventHandler structure looked like: export interface EventHandler { name: string; canHandleEvent(event: EventEntity): boolean; handleEvent(event: EventEntity ...

javascripttypescriptpromise

Retrieve a type from a Union by matching a string property

Looking at the following structure: type Invitation = | { __typename?: 'ClientInvitation' email: string hash: string organizationName: string } | { __typename?: 'ExpertInvitation' email: strin ...

typescript

Steps to dynamically include a marker on a Google Maps component using HTTPGET in Angular 6

I am currently working on an Angular 6 application that involves integrating the Google Javascript API with AGM. So far, the map functions well except for dynamically adding markers using an http get request. Here is a snippet of the component.html: < ...

angulartypescriptrestgoogle-maps

Is it possible to enforce a certain set of parameters without including mandatory alias names?

My inquiry pertains to handling required parameters when an alias is satisfied, which may seem complex initially. To illustrate this concept, let's consider a practical scenario. If we refer to the Bing Maps API - REST documentation for "Common Param ...

typescript

The state of dynamically created Angular components is not being preserved

My current task involves dynamically creating multiple components to be placed in a table. The code successfully achieves this objective, but the state seems to be getting jumbled up at the level of the dynamically generated components. When a component is ...

angulartypescriptdynamiccomponentsstate

Convert image file to a React TypeScript module for export

Imagine a scenario where you have a folder containing an image file and an index file serving as a public API. Is there a method to rename the image file before reexporting it? Here is the structure of the folder: └── assets/ ├── index.t ...

reactjstypescriptimage

Transitioning from Angular Http to HttpClient: Overcoming Conversion Challenges

Currently, I am in the process of converting my old Angular app from Http to HttpClient. While working on the service.ts section, I encountered an error that I am struggling to resolve: ERROR Error: Cannot find a differ supporting object '[object Ob ...

angulartypescripthttpserviceobservable

When submitting in an Angular mat-dialog, the page should refresh without closing the dialog

I recently started working with Angular and had to retrieve data from the database to populate a user grid. I successfully completed that task and then moved on to using MatDialog for creating new users. After fixing the creation services and linking them ...

angulartypescriptpage-refreshmat-dialog