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

[niccolascosta]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/adv-view-js-comp-core/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
declare global {
const ngDevMode: boolean;
}
export declare const _ngDevMode: boolean;
export {};

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  Windows

Others:

[Toxicable]

I'm sorry but we can't reproduce the problem following the instructions you provided.

If the problem still exists please open a new issue following our submission guidelines.

[ronnyek]

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+

[crowmagnumb]

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?

[PH-Lars]

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

[steveblue]

I have a similar and maybe related problem with ngDevMode. Closure Compiler cannot bundle my browser module in ADVANCED_OPTIMIZATIONS because ngDevMode is not declared.

[jacobbuck72]

Downgrading solved the problem for me too.

[actra-gschuster]

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.

[steveblue]

Making ngDevMode an extern worked for me with Closure Compiler

[denver-HJS]

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.

[lmlife2016]

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

[crowmagnumb]

Thanks @PH-Lars, Falling back to 5.1.3 worked for me too. peerDependencies solution not valid for my situation.

[vicb]

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