angular: error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'

had to add this line in the main tsconfig

Closing as no proper repro. I would really help if someone could create a new issue with a proper repro. Thanks.

Ran into the same issue today, in my case the problem is one of my libraries that had a direct dependency on @angular/core. When installing my library in the actual ng-project it also created a node_modules folder there so I had two versions of @angular/core in the project - and both declare ngDevMode in the global scope resulting in the error message described in this issue.

I’m having the same problem with 5.2.1.

For me, downgrading to 5.1.3 solved it for now.

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

Downgrading solved the problem for me too.

I had this problem too, I just deleted the node_modules from my generated package and the app worked.

I was actually just running into this very same problem. I created a library with ng-packagr. I then used npm link to include this into a brand new angular/cli project (angular ^5.0.0).

As soon as I included the module from my library, I got this compilation error. The said library is massive, so including that one here wouldn’t be feasible. I’ll see if I can knock out a bare library and see if it still has same end result. Maybe its angular mismatch, as my library targets angular 4+

Angular 7, same issue after upgrading from Angular 6 with ng update

@NgModule({ imports: [ HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService) ] }) missing HttpModule will cause this issue

I believe @actra-gschuster 's explanation and the suggestion to declare the @angular umbrella dependencies as peerDependencies provided in #20101 are related. After following both of those suggestions the error cleared up for me.

Note: I’m also using ng-packagr to create my npm package.

I resolved this issue in Angular 7 by set manually "paths": { "@angular/*": ["node_modules/@angular/*"] } to tsconfig.json at root of the project.

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

Thanks @PH-Lars, Falling back to 5.1.3 worked for me too. run this code 💯

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

@adornala honestly i have no clue either

I fixed it by updating my typescript dependency to “typescript”: “2.5.3”. (I’m on “@angular/core”: “5.2.8”)

@mariohmol I’m not talking about peerDependencies.

Ex of what I’m talking about:

{
  "name": "...",
  "scripts": {
    ...
  },
  "dependencies": {
    "@angular/core": "5.2.7",
    ...
  },
  "devDependencies": {
    "typescript": "2.7.2",
    ...
  },
  "resolutions": {
    "@angular/core": "5.2.7",
    "typescript": "2.7.2"
  }
}

Here, no matter what the sub dependencies rely on (for @angular/core + typescript), it’ll always resolve to one and only version: The one I’ve written in “resolutions”.

Note: This only work with Yarn as far as I’m aware.

This is also a known problem to occur if you have several angular projects in the same repository… if you miss on the imports in one of your components (eg when copying code from one project to the other) and actually tries to import something from @angular/core from the other project you get this error…

e.g import { Injectable } from '../../../../THE_OTHER_PROJECT_FOLDER/node_modules/@angular/core';

instead of the correct

import { Injectable } from ‘@angular/core’;`

I also just ran into the same problem upgrading to 5.2.1. I have my setup a little funky because I’m working on getting ng-packagr working on a big library but have some issues. So in the meantime, I am (and have been for a long time now) using a “link” in my tsconfig.json file. For example,

{
    "compilerOptions": {
        "paths": {
            "MyLibrary/*": ["../myLibrary/src/*"]
        }
    }
}

And then in my app I can do an import like …

import { MyComponent } from "MyLibrary/module";

… module.ts is the file that defines the module.

But since myLibrary is outside the tree of my main app I also have to keep an up-to-date package.json file in the library (which is fine because I will eventually have to anyway for the correctly packaged module). All fine until this release and now I get …

ERROR in [at-loader] ../myLibrary/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts:9:11
    TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

ERROR in [at-loader] ./node_modules/@angular/core/src/render3/ng_dev_mode.d.ts:9:11
    TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

… as it apparently tries to read something twice that it expects only once. Hope this helps. I’m stuck at the moment but on to a week’s vacation now. Hopefully resolved by my return. 😃

So I think this can be duplicated with the simplest of setup as I described. If I can manage to get the time before I catch my flight to make a tiny repo that reproduces I will. But if not I hope this is sufficient to make someone go “Aha I know what it is!”. 😉

UPDATE: Forgot to say that before I “remembered” to update angular in my library it was working fine. I was on 4.4.4 before this. I updated angular to 5.2.1 in my main app and everything was hunky dory. I then tried to compile with AoT (for the first time using the AngularCompilerPlugin from ngtools/webpack) and it wasn’t working (different issue). So then it dawned on me that I should update the angular libraries in myLibrary to the same level. Only after doing that did I get this error (with JiT). So if I drop those libraries back down to 4.4.4 it should work again. BUT how do I move forward?

So i ran into this problem yesterday. I had my Angular project and another NPM Package with angular as a dependency. Both Angulars had the same version (7.2.0). The error occurred while trying to build the main app.

My solution to this was to upgrade Angular in my project to the newest version (7.2.3). It looks like there was a conflict while both Angular versions were the same

@adornala - that was the issue in my case, so I decided to drop in my 5 cents in case someone else has more than 1 Angular app in the same repo and mistakenly imports a component from another app.

It happened to me, because we have two Angular apps in one repo powered by the same backend app. Some of the components in both apps are named similarly and when using WebStorm intellisense it’s easy to pull the component from another app into your app. And since another component references it’s own local node_modules, you’re importing angular/core twice.

This fixed it for me. Run this for latest Angular as at 12/10/2018.

npm install @angular/common@6.1.8 @angular/compiler@6.1.8 @angular/compiler-cli@6.1.8 @angular/core@6.1.8 @angular/forms@6.1.8 @angular/http@6.1.8 @angular/platform-browser@6.1.8 @angular/platform-browser-dynamic@6.1.8 @angular/platform-server@6.1.8 @angular/router@6.1.8 @angular/animations@6.1.8 --save