无法重新声明块范围变量“ngDevMode”答案

【问题标题】：Cannot redeclare block-scoped variable 'ngDevMode'无法重新声明块范围变量“ngDevMode”
【发布时间】：2018-08-02 05:44:10
【问题描述】：

我的应用在 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"
  }
}

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

npm install angular-io-datepicker --save

现在，当我执行服务时（在 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，这个模块仍然给我同样的问题。

【问题讨论】：

遇到了同样的问题：/
可能的帮助：github.com/angular/angular/issues/21925

标签： angular angular-cli

【解决方案1】：

我遇到了同样的错误，尽管我认为它是由对位于不同项目中的 Typescript 文件的引用引起的。我可以按照这里的建议解决问题：github issues 24165。具体来说，我在项目根目录的tsconfig.json 文件中的compilerOptions 中添加了以下内容：

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

注意：如果您的基本路径不为空，则可能需要使用../node_modules。

【讨论】：

【解决方案2】：

对于角度 6 在 tsConfig 中

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

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

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

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

【讨论】：

谢谢！对我来说，在 node_modules ("../node_modules/@angular/*") 的相对路径中添加两个点就可以了。没有它，它不起作用
本必须做同样的事情^。这实际上为我节省了大量时间，谢谢！

【解决方案3】：

TL:DR（解决方法见底部）

可能的原因

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

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

正确的解决方案

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

解决方法

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

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

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

【讨论】：

? 很好的解决方案

【解决方案4】：

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

在 tsconfig.json 中

 "paths": {

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

这告诉编译器选择“node_modules/@angular”，主应用程序的角度版本，用于包括库在内的所有事件

【讨论】：

【解决方案5】：

库angular-io-datepicker 是still using angular ^4.0.0. 此版本与您的项目正在使用的角度版本不匹配会导致错误。图书馆should have defined peerDependencies instead of directly depending on angular。这会导致你的 npm 抛出 peerDependency 不匹配警告。

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

所以您可以继续使用 angular v4 或使用 another datepicker library。

【讨论】：

【解决方案6】：

这也发生在我身上。这是我为解决它所做的：

我有一个使用 @angular/core 版本 7.0.4 构建的私有包
我将它安装到我使用 @angular/core 版本 7.1.0 的项目中

在这种情况下，我们有两个不同版本的@angular/core！

我刚刚更新了我的私有包以使用@angular/core 7.1.0 版本，问题解决了！

添加：

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

在我的场景中不需要。

Full discussion here

【讨论】：

【解决方案7】：

我在将项目升级到 Angular 6 后遇到了这个问题。该项目使用的是我使用 Angular 5 发布的库。我已将该库的源升级到 Angular 6 并发布了一个新版本，所以问题有已修复。

【讨论】：

【解决方案8】：

就我而言，我在同一个存储库中有两个项目和两个单独的 node_modules。这个错误发生在我身上，因为我错误地将一些东西从一个 node_modules 自动导入到另一个应用程序中。删除导入解决了这个问题。

【讨论】：

【解决方案9】：

我最近遇到了这个问题，我发现这个 github 问题评论很有用：

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

TL;DR : 你可能不得不降级你的 Angular 包版本。这似乎是 Angular 5 的问题。

【讨论】：

【解决方案10】：

我在使用 Angular：6.0.9 时遇到了同样的问题。

正如@Capricon 所述，我正在安装一个与我的 Angular 版本不兼容的包 (ngx-accordion-table version 1.0.10)。 The package is using Angular 5.2.0.

需要从我的角度项目的 node_module 和我的主文件夹中的全局模块中卸载它。现在它又开始工作了。

【讨论】：

【解决方案11】：

对我来说，这是由于合并/升级后缺少依赖项而发生的。检查您的 package.json 是否缺少对您的项目构建至关重要的任何内容。

【讨论】：

【解决方案12】：

我在 5.2.1 中遇到了同样的问题。

对我来说，downgrading to 5.1.3 现在解决了它。

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】：

我的具体问题是安装直接依赖于@angular/core 的包这是简要说明https://github.com/angular/angular/issues/21670#issuecomment-359752703

从提供的链接复制：

在实际的 ng-project 中安装我的库时，它还在那里创建了一个 node_modules 文件夹，因此我在项目中有两个版本的 @angular/core - 并且都在全局范围内声明了 ngDevMode，从而导致在此描述的错误消息问题。

我的解决方案是不使用包 (ng-spinner)

【讨论】：

【解决方案14】：

尝试删除当前节点模块并重新安装，

使用“rm -rf node_modules”，然后使用“npm i”

另外，如果你有多个版本，请确保你有正确版本的节点模块，然后使用，

非虚拟机使用

解决它。

另外，请确保您的本地和全局 Angular CLI 版本相同。

【讨论】：