What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

I encountered this error:

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. src/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

My initial tsconfig setup looked like this:

{
 "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "module": "es2015",
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
   "target": "es5",
  "typeRoots": [
  "node_modules/@types"
  ],
  "lib": [
  "es2017",
  "dom"
   ],
  "paths": { "@angular/*": ["node_modules/@angular/*"] } 
   },
   }

After some research, I made adjustments to my tsconfig as shown below. However, the error persists.

Updated tsconfig file:

 {
 "compilerOptions": {
 "baseUrl": "./",
 "outDir": "./dist/out-tsc",
 "sourceMap": true,
 "declaration": false,
 "module": "es2015",
 "moduleResolution": "node",
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "target": "es5",
 "typeRoots": [
 "node_modules/@types"
 ],
 "lib": [
  "es2017",
  "dom"
 ],
  "paths": { "@angular/*": ["node_modules/@angular/*"] } 
 },
 }

Anyone with insights on resolving this error in Angular 6? Your help is greatly appreciated.

angulartypescriptnpmangular6

Answer №1

It appears that you have duplicate versions of @angular/core within your project. One is located in the src/node_modules directory, and the other is in the node_modules directory. To resolve this issue, consider deleting the node_modules folders and running the npm install command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Any suggestions on how to handle the 166 files that have been installed locally with gulp?

Once I completed the installation by running $ npm install gulp --save-dev npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e38e8a8d8a8e8297808ba3d1cdd3cdd2d3">[email protected]</a>: Make su ...

node.jsnpmgulpdependenciesnode-modules

Inverting the Arrangement of Linear Axis

I am in the process of creating a mobile application that includes a chart feature. I am using Nativescript for Angular along with the nativescirpt-ui-chart plugin. Currently, the chart displays grades ranging from 1 to 5, with 5 appearing at the top and ...

angularchartsnativescript

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

When utilizing AMP's binding feature, you must apply specific attributes that encapsulate an element's property with square brackets and connect it to an expression. An example from AMP is shown below: <p [text]="'Hello ' + foo"> ...

javascriptreactjstypescriptamp-html

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

I am currently in the process of transitioning my Angular 1.5 project to use TypeScript. The project is compiled with webpack and even though I have included Angular type definitions in my package.json file as shown below, "@types/angular": "~1.5.19", "@t ...

angularjstypescript

Is having only one FCM token sufficient for storing data from multiple devices?

I'm currently working on an Angular website and looking to send push notifications to users subscribed on both desktop and mobile. I am utilizing Firebase Cloud Messaging for this purpose and wondering if storing a single FCM token will suffice for se ...

angularfirebasefirebase-cloud-messaging

Unable to import file: ~bootstrap/scss/functions. The file cannot be found or is unreadable.", "formatted": "Error: File import failed: ~

Attempting to launch a new project, I'm facing difficulties loading CSS files onto the login page. Upon checking the npm build, I encountered an error. Additionally, there seems to be an issue with loading images stored in my folders. As a frontend n ...

djangoreactjsnpmbootstrap-4

What is the best way to implement i18n in an input field placeholder?

Currently, I am using inputs with placeholders in this manner: <input placeholder="Filter"> However, I need to adhere to the i18n method. Unfortunately, i18n-placeholder is prohibited in Angular 6. Can anyone suggest the correct approach to achiev ...

angularangular-i18n

Displaying notification in Ionic 2

Whenever I click on the register button, if I fill out all the fields I am taken to the regsuccess page. Otherwise, I receive a message saying to fill in all required fields. However, I want to display an alert message using Ionic2 and TypeScript. HTML: ...

angulartypescriptionic2

Transformed Vue code with TypeScript using a more aesthetically pleasing format, incorporating ref<number>(0)

Original Format: const activeIndex = ref<number>(0) Formatted Version: const activeIndex = ref < number > 0 Prettier Output: click here for image description Prettier Configuration: { "$schema": "https://json.schemastore.org ...

typescriptwebvuejs3code-formattingprettier

Navigating to the next page on a dynamic component in Angular 5 by

I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For ...

javascriptangulartypescriptcontentful

Tips for interacting with the DOM in an Angular 4 application

I am trying to call the addItems method, but I keep getting an error: Uncaught TypeError: this.addItems is not a function Currently, I am using Angular 4 along with jQuery and the fullpage.js library. page-content.component.ts import { Component, OnI ...

javascriptangulartypescript

Loading data into the Nuxt store upon application launch

Currently, I'm working on an app using Nuxt where I preload some data at nuxtServerInit and store it successfully. However, as I have multiple projects with similar initial-preload requirements, I thought of creating a reusable module for this logic. ...

typescriptnuxt.js

What is the best way to create a data type that enables unrestricted index retrieval while ensuring that the value retrieved will never be

By enabling the noUncheckedIndexedAccess option in TypeScript, we ensure that when accessing object properties with arbitrary keys, the value type includes both the specified type and undefined. This behavior is generally appropriate as it aligns with run ...

typescript

Are Angular HTTP observables distinct in their behavior in comparison to standard observables?

While experimenting with Angular routing, I decided to utilize an in-memory database to retrieve information about the heroes. The original StackBlitz project can be found here. If you go to the heroes tab, select a hero, and modify their name, you' ...

javascriptangularrxjs

What are the reasons behind the compilation failure of the react-sortable-hoc basic example when using typescript?

Take a look at this sample code snippet extracted from the official react-sortable-hoc webpage. import React, {Component} from 'react'; ... // Code snippet goes here ... render(<SortableComponent/& ...

reactjstypescriptreact-sortable-hoc

Experimenting with a VSCode extension that requires the act of launching a folder/workspace

Currently, I am developing a custom VSCode extension that considers the path of the file being opened within the workspace. To create a reproducible test scenario, I want to open the test folder itself in VSCode and then proceed to open the test file with ...

typescriptvisual-studio-codevscode-extensions

Unable to get md-virtual-repeat to work within md-select?

Attempting to use md-select to showcase a large amount of data is causing the browser to freeze upon opening. To address this, I tried implementing md-virtual repeat within md-select for improved performance. However, the code doesn't seem to be funct ...

javascripttypescriptmaterial-designangular-material

Encountering 404 errors when reloading routes on an Angular Azure static web app

After deploying my Angular app on Azure static web app, I encountered an error. Whenever I try to redirect to certain routes, it returns a 404 error. However, if I navigate from one route to another within the app, everything works fine. I have attempted t ...

javascriptangulartypescriptazure-web-app-service

Are there any available NPM packages specifically for integrating with QuestDB?

Just started using QuestDB and I'm curious if there is an npm package available for it. I found a package on npmjs.com/questdb, but it appears to be empty. Can someone confirm if there is indeed an npm package for QuestDB? Thank you! ...

node.jsnpmquestdb

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

cssangulartypescript