Невозможно переопределить переменную block-scoped 'ngDevMode'

Мое приложение в 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-службу (после включения OverlayModule и DatePickerModule в app.module.ts), она дает мне следующую ошибку

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, и он сломался. Теперь, даже если я откатываюсь до Angular 4, этот модуль все равно дает мне такую же проблему.

Ответ 1

Я столкнулся с той же ошибкой, хотя я думаю, что она была вызвана ссылкой на файл Typescript, расположенный в другом проекте. Я смог решить проблему, следуя совету здесь: GitHub 24245. В частности, я добавил следующее в compilerOptions в файле tsconfig.json в корне моего проекта:

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

Примечание: может быть необходимо использовать ../node_modules если ваш базовый путь не пуст.

Ответ 2

Я вижу, что правильный ответ уже дан, но я думаю, что нужно лучшее объяснение того, что происходит с ответом.

в tsconfig.json

 "paths": {

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

это говорит компилятору выбрать "node_modules/@angular", угловую версию основного приложения для всех случаев, включая библиотеки

Ответ 3

Для углового 6 в tsConfig

если baseUrl является src, то установка пути выполняется следующим образом.

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

если baseUrl пуст, то установка пути без root работает для меня

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

Ответ 4

Библиотека angular-io-datepicker все еще использует angular ^4.0.0. Эта версия не соответствует версии angular проект использует причины ошибки. Библиотека должна была определить peerDependencies вместо прямой зависимости от angular. Это могло бы привести к тому, что ваш npm будет передавать предупреждения о несоответствиях peerDependency.

Команда angular, видимо, перемещала переменную в файлы, и несоответствие версии теперь вызывает несколько раз переменную ngDevMode.

Итак, вы можете либо продолжать использовать angular v4, либо использовать другую библиотеку датпикера.

Ответ 5

Это случилось и для меня. Вот что я сделал для ее решения:

У меня был частный пакет, который был построен с использованием @угловой/основной версии 7.0.4
Я установил его в свой проект, который использовал @angular/core версию 7.1.0

В этом случае у нас есть два @угловых/ядро с разными версиями!

Я просто обновил свой частный пакет, чтобы использовать @angular/core версию 7.1.0, и проблема решена!

Добавление:

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

в моем сценарии не требуется.

Полное обсуждение здесь

Ответ 6

У меня был этот вопрос после обновления моего проекта до Angular 6. В проекте использовалась библиотека, выпущенная с помощью Angular 5. Я обновил источники этой библиотеки до Angular 6 и выпустил новую версию, поэтому проблема исправлена.

Ответ 7

TL: DR (см. Снизу для обходного пути)

Вероятная причина

До TypeScript пакеты NPM могли использовать все глобальные переменные, которые им нужны, поскольку NPM управляет каждой областью пакета для предотвращения конфликтов. Теперь, с помощью TypeScript/Webpack, импорт группируется вместе и возникает вероятность возникновения конфликтов.

В принципе, TypeScript/Webpack позволяет вам знать, что одна и та же декларация выполняется в одной области более одного раза, что может быть проблемой. Однако то, что TypeScript не понимает, заключается в том, что NPM управляет областью действия, что позволяет нам делать несколько объявлений одного и того же объекта в разных пакетах/областях и даже использовать разные версии одного и того же пакета в иждивенцах.

Правильное решение

Правильное решение заключается в том, что импортированные пакеты не объявляют глобальные переменные или не переносят каждую зависимость на "peerDependencies". Последняя из них не очень эффективна, поскольку для удовлетворения потребляющих приложений необходимо знать, какие зависимости зависят от каждой зависимости... кошмар управления и все проблемы с NPM-адресами для начала.

Временное решение

Поскольку мы не всегда имеем контроль над сторонними пакетами и как они объявляют/экспортируют объекты, вы можете просто добавить следующее свойство в файл tsconfig.json:

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

Это говорит TypeScript игнорировать дубликаты объявлений.

Ответ 8

Недавно я столкнулся с этой проблемой, и я нашел этот комментарий для github полезным:

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

TL; DR: вам может потребоваться понизить ваши версии с угловым пакетом. Это, похоже, проблема с Angular 5.

Ответ 9

Я работал в той же проблеме, используя Angular: 6.0.9.

Как описано в @Capricon, я устанавливал пакет (ngx-accordion-table version 1.0.10), который не был совместим с моей Угловой версией. Пакет использует Angular 5.2.0.

Необходимо удалить его из node_module моего углового проекта и глобального в моей домашней папке. Теперь он снова работает.

Ответ 10

Для меня это произошло из-за отсутствия зависимостей после слияния/обновления. Проверьте, что пакет package.json не имеет ничего важного для сборки вашего проекта.

Ответ 11

У меня была такая же проблема с 5.2.1.

Для меня downgrading to 5.1.3 разрешило это на данный момент.

npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/platform-browser-dyna[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] --save

Ответ 12

Моя конкретная проблема заключалась в установке пакета, который имел прямую зависимость от @angular/core. Это краткое объяснение https://github.com/angular/angular/issues/21670#issuecomment-359752703

Скопировано по предоставленной ссылке:

При установке моей библиотеки в настоящий ng-проект она также создала там папку node_modules, поэтому у меня было две версии @angular/core в проекте - и обе они объявляют ngDevMode в глобальной области видимости, что приводит к сообщению об ошибке, описанному в этом выпуске.

Моим решением было не использовать пакет (ng-spinner)

Ответ 13

Попробуйте удалить модули текущего узла и установить их снова,

Используйте "rm -rf node_modules", а затем "npm i"

Кроме того, убедитесь, что у вас есть правильная версия узловых модулей, если у вас есть несколько версий, то используйте,

использование nvm

решить это.

Кроме того, убедитесь, что ваша локальная и глобальная угловая версия CLI совпадают.

Ответ 14

В моем случае у меня есть два проекта в одном репозитории и два отдельных node_modules. Эта ошибка произошла для меня, потому что я по ошибке автоматически импортировал что-то из одного node_modules в другое приложение. Удаление импорта решило проблему.