无法重新声明块范围变量'ngDevMode'

Question

我在Angular 5上的应用程序.这是package.json的样子

{
  "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"
  }
}

到目前为止一切都很好.现在我需要在我的应用程序中使用datepicker.所以我安装了angular-io-datepicker

npm install angular-io-datepicker --save

现在,当我执行ng服务(在app.module.ts中包含OverlayModule和DatePickerModule之后)时,它给出了以下错误

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'.

关于什么可能是错的以及如何解决它的任何建议？我之前使用Angular 4成功使用了这个模块.然后我升级到Angular 5并且它崩溃了.现在,即使我回滚到角4,这个模块仍然给我同样的问题.

Answer 1

我遇到了同样的错误,虽然我认为它是由对位于不同项目中的Typescript文件的引用引起的.我能够通过遵循以下建议来解决问题:github发布24165.具体来说,我将以下内容添加到项目根目录compilerOptions中的tsconfig.json文件中:

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

注意:../node_modules如果基本路径不为空,则可能需要使用.

Answer 2

对于 tsConfig 中的角度 6

如果 baseUrl 是 src，则设置路径如下。

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

如果 baseUrl 为空，则设置没有 root 的路径对我有用

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

Answer 3

TL：DR（请参阅底部的解决方法）

可能的原因

在 TypeScript 之前，NPM 包可以使用他们想要的所有全局变量，因为 NPM 管理每个包的范围以防止冲突。现在，使用 TypeScript/Webpack，导入被组合在一起，潜在的冲突就会出现。

基本上，TypeScript/Webpack 让你知道在同一个范围内多次进行相同的声明，这可能是一个问题。然而，TypeScript 似乎没有意识到 NPM 正在管理范围，这允许我们在不同的包/范围中对同一对象进行多次声明，甚至可以在依赖项中使用同一包的不同版本。

正确的解决方案

正确的解决方案是导入的包不声明全局变量或将每个依赖项移动到“peerDependencies”。后者不太可行，因为它需要消费应用程序知道每个依赖项需要哪些依赖项……管理噩梦和 NPM 一开始要解决的整个问题。

解决方法

由于我们并不总是可以控制第三方包及其声明/导出对象的方式，因此您可以简单地将以下属性添加到tsconfig.json文件中：

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

这告诉 TypeScript 忽略重复的声明。

Answer 4

我可以看到已经给出了正确的答案，但是我认为需要更好的解释。

在tsconfig.json中

 "paths": {

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

这告诉编译器选择“ node_modules / @ angular”，即所有应用程序（包括库）的主应用程序的角度版本

Answer 5

该库angular-io-datepicker仍在使用 Angular ^4.0.0。此版本与您项目正在使用的角度版本不匹配会导致错误。库应该定义peerDependencies而不是直接依赖于 Angular。这会导致你的 npm 抛出 peerDependency 不匹配警告。

角度团队显然在文件中移动了一个变量，并且版本不匹配现在导致该ngDevMode变量被多次声明。

因此，您可以继续使用 Angular v4 或使用另一个日期选择器库。