ERROR in node_modules/ionic-angular/umd/components/action-sheet/action-sheet-component.d.ts:1:22 - error TS2724

Question

I am working on ionic with angular. today morning i tried to update angular and and got errors. During fix these errors got more errors. At least I delete package-lock.json and node_module folder and install again an run project. I also run that command to update dependecies ng update @angular/cli @angular/core --allow-dirty --force. I got this error this time. Please anyone help.

ERROR in node_modules/ionic-angular/umd/components/action-sheet/action-sheet-component.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has n
o exported member 'Renderer'. Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/alert/alert-component.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Rend
erer'. Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/app/app-root.d.ts:1:72 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer'. Di
d you mean 'Renderer2'?
[ng] 1 import { ComponentFactoryResolver, ElementRef, InjectionToken, OnInit, Renderer, ViewContainerRef } from '@angular/core';
[ng]                                                                          ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/app/click-block.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer'.
 Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts:1:70 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Rendere
r'. Did you mean 'Renderer2'?
[ng] 1 import { ComponentFactoryResolver, ElementRef, ErrorHandler, NgZone, Renderer, ViewContainerRef } from '@angular/core';
[ng]                                                                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/backdrop/backdrop.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer
'. Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/badge/badge.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer'. Did
 you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/button/button.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer'. D
id you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/card/card-content.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer
'. Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';
[ng]                        ~~~~~~~~
[ng]   node_modules/@angular/core/core.d.ts:5929:31
[ng]     5929 export declare abstract class Renderer2 {
[ng]                                        ~~~~~~~~~
[ng]     'Renderer2' is declared here.
[ng] node_modules/ionic-angular/umd/components/card/card-header.d.ts:1:22 - error TS2724: Module '"../../../../@angular/core/core"' has no exported member 'Renderer'
. Did you mean 'Renderer2'?
[ng] 1 import { ElementRef, Renderer } from '@angular/core';

Here is my package.json file.

{
  "name": "assignment-2",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~10.0.9",
    "@angular/compiler": "~10.0.9",
    "@angular/core": "~10.0.9",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~10.0.9",
    "@angular/http": "latest",
    "@angular/platform-browser": "~10.0.9",
    "@angular/platform-browser-dynamic": "~10.0.9",
    "@angular/router": "~10.0.9",
    "@capacitor/android": "^2.1.0",
    "@capacitor/core": "2.1.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/fcm": "^5.27.0",
    "@ionic-native/push": "^5.28.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.0.7",
    "cordova-plugin-stripe": "^1.5.3",
    "cordova-sqlite-storage": "^5.0.0",
    "cordova-support-google-services": "^1.4.1",
    "core-js": "^2.5.4",
    "firebase": ">= 5.5.7 <8",
    "ionic-angular": "latest",
    "moment": "^2.24.0",
    "ngx-autosize": "^1.7.5",
    "phonegap-plugin-multidex": "^1.0.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "^0.1000.6",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "^10.0.6",
    "@angular/compiler-cli": "~10.0.9",
    "@angular/language-service": "~10.0.9",
    "@capacitor/cli": "2.1.0",
    "@ionic/angular-toolkit": "~2.0.0",
    "@ionic/lab": "3.1.6",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.0.27",
    "codelyzer": "^5.0.0",
    "firebase-tools": "^7.12.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "phonegap-plugin-push": "^2.3.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.9.7"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-stripe": {},
      "cordova-plugin-fcm-with-dependecy-updated": {},
      "phonegap-plugin-push": {
        "SENDER_ID": "929354685211"
      }
    }
  }
}

I search this issue on google but does not found any solution. Please help me.

user_4374616 · Answer

Having to use --allow-dirty --force should have given you enough warning to avoid the situation you are in right now. Angular CLI and NPM have a few mechanisms aim to ensure version compatibility.

For future I suggest using the angular update utility [https://update.angular.io] which will guide you through updating angular and its dependencies while ensuring best practices.

For your current situation the only thing I can recommend is starting with a fresh package.json and manually installing all the components you need using either ng add or npm install. Or go back to the last working commit in your version history and then update properly from there.

user_13883299 · Answer

I think there is an issue with the angular version, "ionic-angular" is used with angular versions up to 5. If we want to use a later angular version with ionic then we have to use "@ionic/angular". Following link help me to solve the problem.

https://forum.ionicframework.com/t/unable-to-build-an-ionic-angular-app-after-packages-upgrade/197497

ERROR in node_modules/ionic-angular/umd/components/action-sheet/action-sheet-component.d.ts:1:22 - error TS2724

2 Answers