Cannot redeclare block-scoped variable 'ngDevM

问题:

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.

回答1:

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.

回答2:

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

回答3:

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/*"
            ]
        },

回答4:

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.

回答5:

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.

回答6:

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

回答7:

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.

回答8:

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.

回答9:

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.

回答10:

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.

回答11:

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.

回答12:

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

回答13:

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)

回答14:

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.