Cannot redeclare block-scoped variable 'ngDevMode'

Question

My app in on Angular 5. Here is how the package.json looks like

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@types/file-saver": "0.0.1",
    "angular-2-dropdown-multiselect": "^1.6.0",
    "angular2-csv": "^0.2.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.3",
    "ngx-bootstrap": "^1.9.3",
    "ngx-clipboard": "^8.1.0",
    "ngx-loading": "^1.0.14",
    "ngx-pagination": "^3.0.0",
    "ngx-toastr": "^6.4.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Everything is fine so far. Now I need to use a datepicker in my app. So I installed angular-io-datepicker

npm install angular-io-datepicker --save

Now, when I do a ng serve (after including the OverlayModule and DatePickerModule in app.module.ts ), it gives me the below error

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-io-overlay/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Any suggestions on what could be wrong and how to fix it? I was earlier using this module successfully with Angular 4. Then I upgraded to Angular 5 and it broke. Now even if I rollback to angular 4, this module still gives me the same problem.

Possible help: https://github.com/angular/angular/issues/21925 — R. Richards, Feb 22 '18 at 15:16

Andy King · Answer 1 · 2019-03-01T18:22:06.937

I ran into the same error, although I think it was caused by a reference to a Typescript file located in a different project. I was able to resolve the problem by following the advice here: github issues 24165. Specifically, I added the following to the compilerOptions in the tsconfig.json file in the root of my project:

"paths": {
  "@angular/*": ["node_modules/@angular/*"]
}

Note: it may be necessary to use ../node_modules if your base path is not empty.

score 7 · Answer 2 · answered Sep 28 '18 at 20:57

TL:DR (See bottom for workaround)

Likely Cause

Before TypeScript, NPM packages could use all the global variables they wanted since NPM manages each package's scope to prevent conflicts. Now, with TypeScript/Webpack, imports are grouped together and the potential for conflicts arises.

Basically, TypeScript/Webpack is letting you know that the same declaration is being made within the same scope more than once, which could be a problem. However, what TypeScript appears to not realize is that NPM is managing the scope, which allows us to make multiple declarations of the same object, in different packages/scopes and even using different versions of the same package in dependents.

Correct Solution

The correct solution is for the imported packages to not declare globals or move each dependency to "peerDependencies". The latter of which isn't very feasible since it would require the consuming applications to know which dependencies each dependency needs... a management nightmare and the whole problem NPM addresses to begin with.

Workaround

Since we don't always have control over third-party packages and how they declare/export objects, you can simply add the following property to the tsconfig.json file:

{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    ...
  }
}

This tells TypeScript to ignore the duplicate declarations.

score 6 · Answer 3 · answered Sep 13 '18 at 16:34

6

For angular 6 in tsConfig

if the baseUrl is src then setting the path as follows works.

"paths": {
            "@angular/*": [
                "../node_modules/@angular/*"
            ]`enter code here`
        },

if the baseUrl is empty then setting the path without root worked for me

"paths": {
            "@angular/*": [
                "node_modules/@angular/*"
            ]
        },

answered Sep 13 '18 at 16:34

user1288411

149
1
10

Thanks! for me adding the two dots in the relative path to node_modules (`"../node_modules/@angular/*"`) did the trick. without it, it didn't work – benshabatnoam Feb 27 '19 at 18:12
Had to do the same thing has ben ^. This actually saved me an enormous about of time, thanks! – Michael McKenna Dec 03 '19 at 16:23

Heshan · Answer 4 · 2019-07-23T10:29:04.957

6

i can see correct answer is already given ,But i think better explanation is needed whats happening with the answer.

in tsconfig.json

 "paths": {

 "@angular/*": ["node_modules/@angular/*"]
}

this tells the compiler to choose "node_modules/@angular", the angular version of main application's for all the occurrences including libraries

edited Jul 23 '19 at 10:29

answered Oct 25 '18 at 13:51

Heshan

772
8
22

score 4 · Answer 5 · answered May 12 '18 at 10:25

The library angular-io-datepicker is still using angular ^4.0.0. This version mismatch with the angular version you're project is using causes the error. The library should have defined peerDependencies instead of directly depending on angular. This would have caused your npm to throw peerDependency mismatch warnings.

The angular team apparently moved a variable within files and the version mismatch now causes the ngDevMode variable to be declared multiple times.

So you could either continue using angular v4 or use another datepicker library.

score 2 · Answer 6 · answered Nov 24 '18 at 14:59

This happened for me too. Here is what I did to solve it:

I had a private package which was built using @angular/core version 7.0.4
I installed it into my project which was using @angular/core version 7.1.0

In this scenario we have two @angular/core with different versions!

I just updated my private package to use @angular/core version 7.1.0, and the problem resolved!

Adding:

"paths": {
"@angular/": ["node_modules/@angular/"]
}

does not needed in my scenario.

Full discussion here

score 1 · Answer 7 · answered Jun 19 '18 at 11:12

1

I had this issue after upgrading my project to Angular 6. The project was using a library of mine released using Angular 5. I've upgraded the sources of that library to Angular 6 and released a new version, so the issue has been fixed.

answered Jun 19 '18 at 11:12

Francesco Borzi

56,083
47
179
252

score 1 · Answer 8 · answered Aug 22 '19 at 16:26

1

In my case I have two projects in the same repository and two separate node_modules. This error was happening for me because I mistakenly auto-imported something from one node_modules into the other app. Removing the import solved the issue.

answered Aug 22 '19 at 16:26

user123959

1,226
1
12
29

score 0 · Answer 9 · answered Jun 14 '18 at 17:13

I just ran into this issue recently and I found this github issue comment useful:

https://github.com/angular/angular/issues/21670#issuecomment-359273278

TL;DR : You might have to downgrade your Angular package versions. This seems to be a problem with Angular 5.

score 0 · Answer 10 · answered Jul 18 '18 at 15:07

I was running in the same issue using Angular: 6.0.9.

As described by @Capricon I was installing a package (ngx-accordion-table version 1.0.10) which was not compatible with my Angular version. The package is using Angular 5.2.0.

Needed to uninstall it from the node_module of my angular project and the global one in my home-folder. Now it is working again.

score 0 · Answer 11 · answered Jul 30 '18 at 20:59

0

For me this happened due to missing dependencies after a merge/upgrade. Check your package.json is not missing anything crucial to your project build.

answered Jul 30 '18 at 20:59

Trujllo

100
1
10

score 0 · Answer 12 · answered Dec 06 '18 at 09:48

I was having the same problem with 5.2.1.

For me, downgrading to 5.1.3 solved it for now.

npm install @angular/common@5.1.3 @angular/compiler@5.1.3 @angular/compiler-cli@5.1.3 @angular/core@5.1.3 @angular/forms@5.1.3 @angular/http@5.1.3 @angular/platform-browser@5.1.3 @angular/platform-browser-dynamic@5.1.3 @angular/platform-server@5.1.3 @angular/router@5.1.3 @angular/animations@5.1.3 --save

JanBrus · Answer 13 · 2019-01-30T13:00:04.623

My specific problem was installing package that had direct dependency on @angular/core This is the brief explanation https://github.com/angular/angular/issues/21670#issuecomment-359752703

Copied from the link provided:

When installing my library in the actual ng-project it also created a node_modules folder there so I had two versions of @angular/core in the project - and both declare ngDevMode in the global scope resulting in the error message described in this issue.

My solution was not to use the package (ng-spinner)

score 0 · Answer 14 · answered Mar 18 '19 at 12:29

Try removing the current node modules and installing them again,

Use "rm -rf node_modules" and then "npm i"

Also, make sure u have the right version of node modules if u have multiple versions then use,

nvm use

to solve it.

Also, make sure your local and global angular CLI version is the same.

Cannot redeclare block-scoped variable 'ngDevMode'

14 Answers14

Linked