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 issues 24165。具体来说，我将以下内容添加到了项目根目录compilerOptions中的tsconfig.json文件中：

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

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

Answer 2

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

在tsconfig.json中

 "paths": {

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

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

Answer 3

对于角度6 在tsConfig中

如果baseUrl是src，则按如下所示设置路径即可。

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

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

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

Answer 4

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

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

因此，您可以继续使用angular v4或使用another datepicker library。

Answer 5

这件事也发生在我身上。这是我为解决该问题所做的事情：

我有一个使用@ 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

Answer 6

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.

Answer 7

就我而言，我在同一个存储库中有两个项目，并且有两个单独的node_modules。因为我错误地将某些内容从一个node_modules自动导入到另一个应用程序中，所以发生了此错误。删除导入即可解决问题。

Answer 8

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

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

TL; DR：您可能必须降级Angular包版本。这似乎是Angular 5的一个问题。

Answer 9

我在使用Angular运行同一问题：6.0.9。

如@Capricon所述，我正在安装与Angular版本不兼容的软件包（ngx-accordion-table version 1.0.10）。 The package is using Angular 5.2.0。

需要从我的角度项目的node_module和我的家庭文件夹中的全局项目中卸载它。现在它又可以工作了。

Answer 10

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

Answer 11

TL：DR （有关解决方法，请参见底部）

可能原因

在TypeScript之前，NPM软件包可以使用所需的所有全局变量，因为NPM管理每个软件包的作用域以防止冲突。现在，使用TypeScript / Webpack，可以将导入分组在一起，并可能产生冲突。

基本上，TypeScript / Webpack会让您知道在同一范围内多次进行同一声明，这可能是一个问题。但是，TypeScript似乎无法意识到的是NPM正在管理范围，这使我们可以在不同的包/作用域中甚至在依赖项中使用同一版本的不同版本来对同一对象进行多个声明。

正确的解决方案

正确的解决方案是，导入的软件包不要声明全局变量或将每个依赖项移至“ peerDependencies”。后者不是很可行，因为它将要求使用方的应用程序知道每个依赖项需要哪些依赖项……这是管理上的噩梦，也是NPM首先要解决的整个问题。

解决方法

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

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

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

Answer 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

Answer 13

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

从提供的链接中复制：

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

我的解决方案是不使用软件包（ng-spinner）

Answer 14

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

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

此外，如果您随后使用多个版本，请确保您具有正确版本的节点模块，

nvm使用

解决它。

还要确保本地和全局角度CLI版本相同。

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

14 个答案: