Impossible de redéclarer la variable "ngDevMode" à portée de bloc
Mon application sur Angular 5. Voici à quoi ressemble le 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"
}
}
Tout va bien jusqu'à présent. Maintenant, je dois utiliser un datepicker dans mon application. Alors j'ai installé angular-io-datepicker
npm install angular-io-datepicker --save
Maintenant, quand je fais un ng (après avoir inclus OverlayModule et DatePickerModule dans app.module.ts), cela me donne l'erreur ci-dessous
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'.
Des suggestions sur ce qui pourrait être faux et comment y remédier? J'utilisais auparavant ce module avec succès avec Angular 4. Ensuite, je suis passé à Angular 5 et le logiciel est tombé en panne. Maintenant, même si je reviens à 4 angulaire, ce module me donne toujours le même problème.
J'ai rencontré la même erreur, bien que je pense que cela a été provoqué par une référence à un fichier TypeScript situé dans un projet différent. J'ai pu résoudre le problème en suivant les conseils ici: questions github 24165 . Plus précisément, j'ai ajouté ce qui suit à la compilerOptions dans le fichier tsconfig.json à la racine de mon projet:
"paths": {
"@angular/*": ["node_modules/@angular/*"]
}
Remarque: il peut être nécessaire d’utiliser ../node_modules si votre chemin de base n’est pas vide.
je peux voir que la réponse correcte est déjà donnée, mais je pense qu'une meilleure explication est nécessaire sur ce qui se passe avec la réponse.
dans tsconfig.json
"paths": {
"@angular/*": ["node_modules/@angular/*"]
}
ceci indique au compilateur de choisir la version angulaire "node_modules/@ angular" (version angulaire de l'application principale) pour toutes les occurrences, bibliothèques comprises
Pour angulaire 6in tsConfig
si baseUrl est src, définir le chemin comme suit fonctionne.
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
]`enter code here`
},
si baseUrl est vide, définir le chemin sans racine a fonctionné pour moi
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
},
La bibliothèque angular-io-datepicker utilise utilise toujours angulaire ^4.0.0. Cette incompatibilité de version avec la version angulaire utilisée par votre projet provoque l'erreur. La bibliothèque devrait avoir défini peerDependencies au lieu de dépendre directement de angular . Cela aurait amené votre npm à lancer des avertissements de non concordance peerDependency.
L'équipe angulaire a apparemment déplacé une variable dans les fichiers et la non-concordance de version entraîne désormais la déclaration de la variable ngDevMode à plusieurs reprises.
Vous pouvez donc continuer à utiliser angular v4 ou utiliser une autre bibliothèque de datepicker .
Je rencontrais ce problème après la mise à niveau de mon projet vers Angular 6. Le projet utilisait une bibliothèque de moi publiée sous Angular 5. J'ai mis à niveau les sources de cette bibliothèque vers Angular 6 et ai publié une nouvelle version.
C'est arrivé pour moi aussi. Voici ce que j'ai fait pour le résoudre:
- J'ai eu un paquet privé qui a été construit en utilisant @ angular/core version 7.0.4
- Je l'ai installé dans mon projet qui utilisait @ angular/core version 7.1.0
Dans ce scénario, nous avons deux @ angular/core avec des versions différentes!
Je viens de mettre à jour mon paquet privé pour utiliser @ angular/core version 7.1.0, et le problème a été résolu!
Ajouter:
"paths": {
"@angular/": ["node_modules/@angular/"]
}
n'est pas nécessaire dans mon scénario.
Pour moi, cela est dû à l'absence de dépendances après une fusion/mise à niveau. Vérifiez votre package.json ne manque de rien de crucial pour la construction de votre projet.
Mon problème spécifique concernait l’installation d’un paquet dépendant directement de @ angular/core C’est la brève explication https://github.com/angular/angular/issues/21670#issuecomment-359752703
Copié à partir du lien fourni:
Lors de l’installation de ma bibliothèque dans le projet ng, il a également créé un dossier node_modules. Le projet contenait donc deux versions de @ angular/core - et les deux déclaraient ngDevMode dans la portée globale, ce qui donnait le message d’erreur décrit dans ce numéro.
Ma solution était de ne pas utiliser le paquet (ng-spinner)
Je courais dans le même problème en utilisant Angular: 6.0.9.
Comme décrit par @Capricon j'installais un paquet ( ngx-accordéon-table version 1.0.10 ) qui n'était pas compatible avec ma version angulaire. Le paquet utilise Angular 5.2.0 .
Nécessaire de le désinstaller du noeud_module de mon projet angulaire et du projet global de mon dossier personnel. Maintenant cela fonctionne à nouveau.
Je viens de rencontrer ce problème récemment et j'ai trouvé ce commentaire de github utile:
https://github.com/angular/angular/issues/21670#issuecomment-359273278
TL; DR: Vous devrez peut-être rétrograder les versions de votre package Angular. Cela semble être un problème avec Angular 5.
TL: DR (voir la solution de contournement en bas)
Cause probable
Avant TypeScript, les packages NPM pouvaient utiliser toutes les variables globales souhaitées car NPM gère l'étendue de chaque package pour éviter les conflits. Désormais, avec TypeScript/Webpack, les importations sont regroupées et des conflits risquent de se produire.
Fondamentalement, TypeScript/Webpack vous informe que la même déclaration est faite plusieurs fois dans le même champ d'application, ce qui peut poser problème. Cependant, TypeScript ne semble pas se rendre compte, c’est que NPM gère l’étendue, ce qui nous permet de faire plusieurs déclarations du même objet, dans différents packages/scopes et même en utilisant différentes versions du même package dans des dépendants.
Solution correcte
La solution correcte est que les packages importés ne déclarent pas de variables globales ou ne déplacent pas chaque dépendance vers "peerDependencies". Ce dernier point n’est pas très réalisable, car il faudrait que les applications consommatrices sachent quelles dépendances chaque dépendance a besoin… d’un cauchemar de gestion et de l’ensemble du problème qui concerne les adresses NPM.
Solution de contournement
Comme nous ne contrôlons pas toujours les packages tiers ni la manière dont ils déclarent/exportent les objets, vous pouvez simplement ajouter la propriété suivante au fichier tsconfig.json:
{
"compilerOptions": {
...
"skipLibCheck": true,
...
}
}
Cela indique à TypeScript d'ignorer les déclarations en double.
J'avais le même problème avec 5.2.1.
Pour moi, downgrading to 5.1.3 l'a résolu pour l'instant.
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