angular-cli build error in monorepo: TS2451: 'ngDevMode' variable cannot be redeclared

Question

angular-cli build error in monorepo: TS2451: 'ngDevMode' variable cannot be redeclared

In my development environment, I have organized a monorepo with two distinct packages. The first package is the primary application, known as app, while the second package is a shared library that is utilized by the main application, referred to as lib. Both of these packages are TypeScript/Angular projects.

The framework of my project looks like this:

monorepo/
  packages/
    app/
    lib/

I am currently attempting to configure the app project in such a way that when an import from the lib package is detected, instead of searching through the node_modules directory, it will directly access the output directory generated from building the lib package. In order to achieve this, I have made alterations in my tsconfig.json:

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

However, upon executing ng build within the app folder, I encounter the following error messages (the same error is reported twice, originating from separate locations):

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

This issue signifies that Angular is being loaded redundantly, once from the app directory and again from the lib directory.

javascript angular typescript angular-cli

Answer 1

Answer №1

It appears that the issue is with loading angular twice, as you have pointed out. There are two possible solutions for this problem:

Option 1: enforce the use of the specific angular version defined in the application. Inside the tsconfig.json file of your app, add the following line to the 'paths' property. This will ensure that the angular library used is from the node_modules directory of your project (adjust the relative path as needed)

"paths": {
  ...
  "@angular: ["../node_modules/@angular"],
  ...

Option 2: create a symbolic link to integrate your library into the app.

Build your library, which should be located at my-lib-folder\dist\my-lib
Navigate to your app's folder
Run the command
```
npm install ..\my-lib-folder\dist\my-lib
```
. This will establish a symlink in the node_modules of your app pointing to the distribution of your library.
Edit the tsconfig.json file and include a path to the distribution of your library

"paths": {
  ...
  "my-lib": ["dist.my-lib"]
  ...

Regardless of the option chosen, pay attention to your imports:

GOOD : import {MyLibModule} from 'my-lib/';
BAD : import {MyLibModule} from '../my-lib-folder/my-lib/...';

In the latter scenario, the angular version will still be loaded based on the relative import location.

Answer 2

It appears that the issue is with loading angular twice, as you have pointed out. There are two possible solutions for this problem:

Option 1: enforce the use of the specific angular version defined in the application. Inside the tsconfig.json file of your app, add the following line to the 'paths' property. This will ensure that the angular library used is from the node_modules directory of your project (adjust the relative path as needed)

"paths": {
  ...
  "@angular: ["../node_modules/@angular"],
  ...

Option 2: create a symbolic link to integrate your library into the app.

Build your library, which should be located at my-lib-folder\dist\my-lib
Navigate to your app's folder
Run the command
```
npm install ..\my-lib-folder\dist\my-lib
```
. This will establish a symlink in the node_modules of your app pointing to the distribution of your library.
Edit the tsconfig.json file and include a path to the distribution of your library

"paths": {
  ...
  "my-lib": ["dist.my-lib"]
  ...

Regardless of the option chosen, pay attention to your imports:

GOOD : import {MyLibModule} from 'my-lib/';
BAD : import {MyLibModule} from '../my-lib-folder/my-lib/...';

In the latter scenario, the angular version will still be loaded based on the relative import location.

angular-cli build error in monorepo: TS2451: 'ngDevMode' variable cannot be redeclared

Answer №1

Similar questions

Adding an active class to a selected list item can easily be accomplished by targeting the

Finding the correlation between SVG element IDs and JSON keysUnderstanding how to pair up

Retrieve the modal ID when the anchor tag is clicked in order to open the modal using PHP

Event triggered when a Socket.IO connection is disconnected

Executing form actions on click using Ajax without causing a page refresh

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

Can you explain the significance of these specific HTML attributes within the button tag?

Loading JavaScript in the background using Java and HtmlUnit

Having trouble accessing the POST RESPONSE json in ReactJS and NodeJS

Unable to make anchor tag inside button effectively collapse another div

I can't seem to figure out why the game is not showing up on the desktop in this index HTML

Why does the jQuery .each loop only loop when I console.log?

Transform an Array<string> into an object with the strings of the array as keys

What is the best way to develop a node package that is compatible with various operating systems?

The global CSS styles in Angular are not being applied to other components as expected

I am curious as to why jQuery offers the done() method for promises, while the JavaScript promises documented by Mozilla do not. Is there a way to incorporate a done() method in vanilla JavaScript promises if needed?

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

Would it be possible to use a script to convert the y-axis values of the chart into Arabic numerals?

Problem with jQuery Window Resize Trigger Not Reactivating