TS2300: Duplicate identifier 'Router'

Question

After upgrading my angular project from 7 to 8 I got the follwoing error:

ERROR in node_modules/@angular/router/router.d.ts(1817,22): error TS2300: Duplicate identifier 'Router'

here is my tsconfig.json

  {
"compileOnSave": false,
"compilerOptions": {
  "baseUrl": "src",
  "downlevelIteration": true,
  "module": "esnext",
  "paths": {
    "core-js/es7/reflect": [
      "node_modules/core-js/proposals/reflect-metadata"
    ],
    "@app/*": [
      "app/*"
    ],
    "@app/core/*": [
      "app/core/*"
    ],
    "@app/shared/*": [
      "app/shared/*"
    ]
  },
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es2015",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2017",
    "dom"
  ]
}
}

UPDATE:

I deleted the node_modules folder, run npm cache clean --force , deleted the package-lock.json form the project and do npm install again. I still have that error

here is my package.json

  {
"name": "start-ng",
"version": "2.2.0",
"license": "MIT",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "develop": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod",
  "prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod --configuration=production",
  "stage": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod --configuration=staging",
  "e2e": "ng e2e",
  "compile:server": "webpack --config webpack.server.config.js --progress --colors",
  "serve:ssr": "node dist/server",
  "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
  "build:client-and-server-bundles": "node --max_old_space_size=8192  node_modules/@angular/cli/bin/ng  build --prod --configuration=production && node --max_old_space_size=8192  node_modules/@angular/cli/bin/ng run careandcarers:server:production"
},
"private": true,
"dependencies": {
  "@agm/core": "^1.0.0-beta.6",
  "@angular/animations": "^8.0.1",
  "@angular/common": "^8.0.1",
  "@angular/compiler": "^8.0.1",
  "@angular/core": "^8.0.1",
  "@angular/forms": "^8.0.1",
  "@angular/platform-browser": "^8.0.1",
  "@angular/platform-browser-dynamic": "^8.0.1",
  "@angular/platform-server": "^8.0.1",
  "@angular/router": "^8.0.1",
  "@aspnet/signalr": "^1.1.4",
  "@nguniversal/express-engine": "^7.1.1",
  "@nguniversal/module-map-ngfactory-loader": "7.1.1",
  "@ngx-progressbar/core": "^5.3.2",
  "@ngx-progressbar/http": "^5.3.2",
  "@ngx-progressbar/router": "^5.3.2",
  "@progress/kendo-angular-buttons": "^4.4.2",
  "@progress/kendo-angular-dateinputs": "3.7.4",
  "@progress/kendo-angular-dropdowns": "^3.5.6",
  "@progress/kendo-angular-excel-export": "2.4.0",
  "@progress/kendo-angular-grid": "^3.14.4",
  "@progress/kendo-angular-inputs": "5.2.2",
  "@progress/kendo-angular-intl": "^1.7.1",
  "@progress/kendo-angular-l10n": "^1.4.1",
  "@progress/kendo-angular-popup": "^2.6.0",
  "@progress/kendo-angular-upload": "^4.3.2",
  "@progress/kendo-data-query": "^1.5.1",
  "@progress/kendo-drawing": "^1.5.12",
  "@progress/kendo-theme-default": "latest",
  "@swimlane/ngx-charts": "^12.0.1",
  "agm-direction": "^0.7.8",
  "angular-l10n": "^8.0.0",
  "angular2-navigate-with-data": "^1.1.11",
  "angular2-text-mask": "^9.0.0",
  "bootstrap": "^4.3.1",
  "classlist.js": "^1.1.20150312",
  "core-js": "^3.1.4",
  "domino": "^2.1.3",
  "express": "^4.17.1",
  "file-saver": "^2.0.2",
  "font-awesome": "^4.7.0",
  "intl": "1.2.5",
  "jquery": "3.4.1",
  "jwt-decode": "^2.2.0",
  "moment": "^2.24.0",
  "ng-block-ui": "^2.1.5",
  "ng-circle-progress": "^1.4.1",
  "ng2-ckeditor": "^1.2.3",
  "ngx-bar-rating": "^1.1.0",
  "ngx-bootstrap": "^4.3.0",
  "ngx-captcha": "^7.0.0",
  "ngx-chips": "^2.0.2",
  "ngx-infinite-scroll": "^7.2.0",
  "ngx-perfect-scrollbar": "8.0.0",
  "ngx-toastr": "^10.0.4",
  "popper.js": "1.15.0",
  "reflect-metadata": "^0.1.13",
  "rxjs": "^6.5.2",
  "rxjs-compat": "^6.5.2",
  "sweetalert2": "^8.12.1",
  "undefined": "^0.1.0",
  "web-animations-js": "github:angular/web-animations-js#release_pr208",
  "zone.js": "~0.9.1"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.800.3",
  "@angular-devkit/build-ng-packagr": "~0.800.3",
  "@angular/cli": "^8.0.3",
  "@angular/compiler-cli": "^8.0.1",
  "@angular/language-service": "^8.0.1",
  "@types/googlemaps": "^3.36.5",
  "@types/jasmine": "^3.3.13",
  "@types/jasminewd2": "^2.0.6",
  "@types/node": "~12.0.8",
  "codelyzer": "^5.1.0",
  "jasmine-core": "~3.4.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "^4.1.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "^2.0.5",
  "karma-jasmine": "^2.0.1",
  "karma-jasmine-html-reporter": "^1.4.2",
  "ng-packagr": "^5.3.0",
  "node-sass": "^4.12.0",
  "protractor": "~5.4.2",
  "ts-loader": "^6.0.3",
  "ts-node": "~8.3.0",
  "tsickle": "^0.35.0",
  "tslib": "^1.10.0",
  "tslint": "~5.17.0",
  "typescript": "^3.4.2",
  "uglify-js": "^3.6.0",
  "webpack-cli": "^3.3.4"
}

}

Answer 1

When working with TypeScript, there is a big chance that you will have to deal with a “duplicate identifier” error sooner or later. But what exactly this error means? Read the error text again. Duplicate identifier. You are defining, with other words referencing, the same identifier (class, method, property) twice in your code.

Answer 2

Everything works fine if you remove the package angular2-navigate-with-data.

after removing this package to send data to another page change the code:

form

this.router.navigateByData({ url: , data: data });

to

this.router.navigateByUrl(url, { state: data });

when you want to get data :

form

let data = this.router.getNavigatedData();

to

this.activatedRoute.paramMap.pipe(map(() => window.history.state)).subscribe(data => { let data = data });