it-swarm.com.de

Variable 'ngDevMode' für Blockbereiche kann nicht neu deklariert

Meine App in Angular 5. So sieht das package.json aus

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

Alles ist soweit gut. Jetzt muss ich in meiner App einen Datepicker verwenden. Also habe ich wink-io-datepicker installiert

npm install angular-io-datepicker --save

Wenn ich nun ein ng diente (nachdem ich OverlayModule und DatePickerModule in app.module.ts aufgenommen habe), wird mir der folgende Fehler angezeigt

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

Irgendwelche Vorschläge, was falsch sein könnte und wie man es beheben kann? Ich habe dieses Modul zuvor erfolgreich mit Angular 4 verwendet. Dann habe ich ein Upgrade auf Angular 5 durchgeführt und es brach. Nun, selbst wenn ich auf eckige 4 rolle, gibt mir dieses Modul immer noch das gleiche Problem. 

13
kayasa

Ich bin auf den gleichen Fehler gestoßen, obwohl ich denke, dass er durch einen Verweis auf eine TypeScript-Datei verursacht wurde, die sich in einem anderen Projekt befindet. Ich konnte das Problem lösen, indem ich den Rat hier befolgte: github Ausgaben 24165 . Ich habe der compilerOptions in der tsconfig.json-Datei im Stammverzeichnis meines Projekts Folgendes hinzugefügt:

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

Hinweis: Es kann erforderlich sein, ../node_modules zu verwenden, wenn der Basispfad nicht leer ist.

5
Andy King

ich kann sehen, dass die richtige Antwort bereits gegeben ist. Aber ich denke, es ist eine bessere Erklärung erforderlich, was mit der Antwort passiert.

in tsconfig.json

 "paths": {

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

dadurch wird der Compiler angewiesen, für alle Vorkommen einschließlich der Bibliotheken die Version "node_modules/@ angle" (die Version der Hauptanwendung) zu wählen

3
Heshan

Für Winkel 6in tsConfig

wenn die baseUrl src ist, funktioniert der Pfad wie folgt.

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

wenn die baseUrl leer ist, funktionierte der Pfad ohne root für mich

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

Die Bibliothek angular-io-datepicker verwendet verwendet weiterhin den Winkel ^4.0.0. Diese Versionsübereinstimmung mit der von Ihnen verwendeten Winkelversion verursacht den Fehler. Die Bibliothek sollte peerDependencies definiert haben, anstatt direkt vom Winkel abhängig zu sein. Dies hätte dazu geführt, dass Ihr npm Warnhinweise zu nicht übereinstimmenden Peer-Abhängigkeiten ausgibt.

Das Angle-Team hat anscheinend eine Variable innerhalb von Dateien verschoben, und die Versionskonflikte bewirkt jetzt, dass die Variable ngDevMode mehrmals deklariert wird.

Sie können also entweder weiterhin den Winkel v4 verwenden oder eine andere Datepicker-Bibliothek verwenden.

2
Capricorn

Ich hatte dieses Problem, nachdem ich mein Projekt auf Angular 6 aktualisiert hatte. Das Projekt verwendete eine Bibliothek von mir, die mit Angular 5 freigegeben wurde. Ich habe die Quellen dieser Bibliothek auf Angular 6 aktualisiert und eine neue Version veröffentlicht, daher wurde das Problem behoben.

1
Francesco Borzi

Das passierte auch für mich. Folgendes habe ich getan, um es zu lösen:

  • Ich hatte ein privates Paket, das mit @ angle/core Version 7.0.4 erstellt wurde
  • Ich habe es in meinem Projekt installiert, das die Version @ Version/Version @.0 von Angular/Core verwendete

In diesem Szenario haben wir zwei @ angle/core mit verschiedenen Versionen!

Ich habe gerade mein privates Paket aktualisiert, um die @ angle/core Version 7.1.0 zu verwenden, und das Problem wurde behoben!

Hinzufügen:

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

wird in meinem Szenario nicht benötigt.

Vollständige Diskussion hier

1

In meinem Fall habe ich zwei Projekte im selben Repository und zwei separate node_modules. Dieser Fehler ist bei mir aufgetreten, weil ich versehentlich etwas von einem node_modules in die andere App importiert habe. Das Entfernen des Imports löste das Problem.

0
user123959

Für mich geschah dies aufgrund fehlender Abhängigkeiten nach einem Zusammenführen/Upgrade. Vergewissern Sie sich, dass in package.json nichts Wesentliches für Ihren Projektaufbau fehlt.

0
Trujllo

Mein spezielles Problem war die Installation eines Pakets, das eine direkte Abhängigkeit von @ angle/core hatte Dies ist die kurze Erklärung https://github.com/angular/angular/issues/21670#issuecomment-359752703

Aus dem angegebenen Link kopiert:

Bei der Installation meiner Bibliothek im eigentlichen ng-project wurde dort auch ein node_modules-Ordner erstellt. Ich hatte also zwei Versionen von @ angle/core im Projekt - und beide deklarieren ngDevMode im globalen Bereich, was zu der in diesem Problem beschriebenen Fehlermeldung führt.

Meine Lösung bestand darin, das Paket nicht zu verwenden (ng-Spinner)

0
JanBrus

Ich habe das gleiche Problem mit Angular: 6.0.9 ausgeführt.

Wie von @Capricon beschrieben, installierte ich ein Paket ( ngx-accordion-table Version 1.0.10 ), das nicht mit meiner Angular-Version kompatibel war. Das Paket verwendet Angular 5.2.0 .

Muss aus dem node_module meines Winkelprojekts und aus dem globalen in meinem Home-Ordner deinstalliert werden. Jetzt funktioniert es wieder.

0
GuidoD

Ich habe vor kurzem dieses Thema gelesen und fand diesen Github-Kommentar hilfreich:

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

TL; DR: Möglicherweise müssen Sie Ihre Angular-Paketversionen downgraden. Dies scheint ein Problem mit Angular 5 zu sein.

0
Niles Tanner

TL: DR (Problemumgehung unten)

Wahrscheinliche Ursache

Vor TypeScript konnten NPM-Pakete alle gewünschten globalen Variablen verwenden, da NPM den Umfang jedes Pakets verwaltet, um Konflikte zu vermeiden. Mit TypeScript/Webpack werden Importe jetzt in Gruppen zusammengefasst und Konfliktpotential entsteht.

Im Grunde informiert Sie TypeScript/Webpack Sie darüber, dass dieselbe Deklaration mehrmals im selben Umfang gemacht wird, was ein Problem darstellen kann. Was TypeScript jedoch nicht zu erkennen scheint, ist, dass NPM den Gültigkeitsbereich verwaltet, was es uns ermöglicht, mehrere Deklarationen desselben Objekts in verschiedenen Paketen/Gültigkeitsbereichen zu erstellen und sogar verschiedene Versionen desselben Pakets in abhängigen Gruppen zu verwenden.

Richtige Lösung

Die richtige Lösung besteht darin, dass die importierten Pakete keine globalen Werte deklarieren oder jede Abhängigkeit in "peerDependencies" verschieben. Letzteres ist nicht sehr machbar, da die konsumierenden Anwendungen wissen müssten, welche Abhängigkeiten jede Abhängigkeit benötigt ... einen Management-Alptraum und das gesamte Problem, das NPM anspricht. 

Problemumgehung

Da wir nicht immer die Kontrolle über Drittanbieterpakete und deren Deklaration/Export von Objekten haben, können Sie der tsconfig.json-Datei einfach die folgende Eigenschaft hinzufügen:

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

Dadurch wird TypeScript angewiesen, die doppelten Deklarationen zu ignorieren.

0
A-Diddy

Ich hatte das gleiche Problem mit 5.2.1.

Für mich hat downgrading to 5.1.3 das Problem gelöst.

npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] --save
0
Zohab Ali

Entfernen Sie die aktuellen Knotenmodule und installieren Sie sie erneut.

Verwende "rm -rf node_modules" und dann "npm i"

Stellen Sie außerdem sicher, dass Sie die richtige Version der Knotenmodule haben, wenn Sie mehrere Versionen haben, und verwenden Sie dann

nVM verwenden

um es zu lösen.

Stellen Sie außerdem sicher, dass Ihre lokale und globale angular CLI-Version identisch ist.

0
Wilson Varghese