Angular-cli: dedupe-duplicate-modules turn on/off option request

[eun-choi]

🚀 Feature request

I would like to the option to turn on/off the 'dedupe-duplicate-modules' function at build time.

Because, I'm using both the DateAdapter module of '@angular/material/core' and the DateAdapter module of 'angular-calendar'.

Therefore, either of them will not work after build that due to the 'dedupe-duplicate-modules' function.

Sample code
_a.module.ts_

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    NgxMaterialTimepickerModule,
  ],

_a.component.ts_

import { MatDatepickerInputEvent, MatDatepicker } from '@angular/material/datepicker';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { NgxMaterialTimepickerComponent, NgxMaterialTimepickerTheme } from 'ngx-material-timepicker';
@Component({
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-US' },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
  ]
})

_b.module.ts_

import { NgModule } from '@angular/core';
import { CommonModule, registerLocaleData } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
    RouterModule.forChild(routes),

_b.component.ts_

import { CalendarEvent, CalendarView, DAYS_OF_WEEK, CalendarMonthViewDay, CalendarDateFormatter, CalendarEventTitleFormatter } from 'angular-calendar';
import { isSameMonth, isSameDay } from 'date-fns';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import { CustomEventTitleFormatter } from './custom-title-formatter.provider';
@Component({
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    },
    {
      provide: CalendarEventTitleFormatter,
      useClass: CustomEventTitleFormatter
    }
  ]
})

It works fine until @angular-devkit/[email protected]

But, An error occurs from @angular-devkit/[email protected] or later.

_error log_

core.js:4073 ERROR Error: Cannot instantiate cyclic dependency! DateAdapter
    at throwCyclicDependencyError (core.js:5357)
    at R3Injector.hydrate (core.js:11262)
    at R3Injector.get (core.js:11088)
    at NgModuleRef$1.get (core.js:23982)
    at Object.get (core.js:22238)
    at getOrCreateInjectable (core.js:3799)
    at ɵɵdirectiveInject (core.js:13770)
    at ɵɵinject (core.js:804)
    at NodeInjectorFactory.CustomDateFormatter_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:3907)

Therefore, it seems to be affected by the 'dedupe-duplicate-modules' function.

[alan-agius4]

Hi @eun-choi,

The dedupe-duplicate-modules only dedupes modules with the same name and versions and not symbols.

You can get which modules are being deduped by adding the following two options --no-progress --verbose in the command line when running ng build/serve.

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

To continue looking at this we'd require a minimal reproduction. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[eun-choi]

Currently, I had installed @angular-devkit/[email protected] version.
And then, If I comment out as below, APP works fine.

node_modules > @angular-devkit > build-angular > src > angular-cli-files > models > webpack-configs > common.js in line 382

            plugins: [
                PnpWebpackPlugin,
                // new webpack_2.DedupeModuleResolvePlugin({ verbose: buildOptions.verbose }),
            ],

First, I'll try to find if it can be solved by any method other than comment out.

[alan-agius4]

@eun-choi, unfortunately without a reproduction we'll be unable to look and solve the issue.

[eun-choi]

[minimal reproduction code]
https://github.com/eun-choi/dedupe-test

[environment]

  "dependencies": {
    "@angular/animations": "^10.0.0-rc.6",
    "@angular/cdk": "^10.0.0-rc.3",
    "@angular/common": "^10.0.0-rc.6",
    "@angular/core": "^10.0.0-rc.6",
    "@angular/forms": "^10.0.0-rc.6",
    "@angular/material": "^10.0.0-rc.3",
    "@angular/material-moment-adapter": "^10.0.0-rc.3",
    "@angular/platform-browser": "^10.0.0-rc.6",
    "@angular/platform-browser-dynamic": "^10.0.0-rc.6",
    "@angular/router": "^10.0.0-rc.6",
    "@ionic/angular": "^5.2.2",
    "angular-calendar": "^0.28.16",
    "date-fns": "^2.14.0",
    "moment": "^2.27.0",
    "rxjs": "^6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.0-rc.5",
    "@angular/cli": "^10.0.0-rc.5",
    "@angular/compiler": "^10.0.0-rc.6",
    "@angular/compiler-cli": "^10.0.0-rc.6",
    "@angular/language-service": "^10.0.0-rc.6",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/node": "^14.0.13",
    "codelyzer": "^5.2.2",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.2",
    "typescript": "^3.9.5"
  },

[System]
NodeJS : v12.18.0
npm : 6.14.5
OS : macOS Catalina

---

@alan-agius4

1. clone git url: https://github.com/eun-choi/dedupe-test
2. npm i
3. ng serve
4. 'tab1' work fine. but, 'tab2' error occur.
5. npm i @angular-devkit/[email protected]
6. ng serve
7. both 'tab1' and 'tab2' works fine.

[alan-agius4]

The problem seems to be caused because angular-calendar is shipping date-fns as part of their distributable, however this doesn't have a name nor a version which is causing incorrect dedupping.

We should handle such cases and don't dedupe a module when we don't have a name or version in the manifest.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}