Dependency on CommonJS module 'flat' causing Angular 10 warnings

[timbru31]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When building or starting the Angular App the following warning is displayed:

WARNING in /Users/me/Coding/ume/d2d-toolbox/node_modules/@ngneat/transloco/__ivy_ngcc__/fesm2015/ngneat-transloco.js depends on 'flat'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Expected behavior

No warning is displayed.

Minimal reproduction of the problem with instructions

1. Create a new Angular CLI project with Angular v10
2. Add transloco

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

While it's only a warning, it would be nice if it's fixed or suppressed.
The offending file is the helpers.ts (https://github.com/ngneat/transloco/blob/153682a4c4f3268ee20146c5f94f1baaa965008b/projects/ngneat/transloco/src/lib/helpers.ts#L2) because the flat package (https://github.com/hughsk/flat) is a CommonJS module.

Possible solutions are changing the flat package to something that uses proper ES6 modules or the inline the flat function into this package given the fact that the code is not complex or really big.

Environment

Angular version: 10.0.2

Browser:
n/a
 
For Tooling issues:
- Node version: 12.18.2
- Platform: macOS 10.15.5

Others:

[shaharkazaz]

@timbru31 This is a change introduced in angular-cli v10.
You can remove the warning by passing the allowedCommonJsDependencies build option.
You can open a PR for implementing the flat functionality in transloco 😄

[timbru31]

I'm aware what caused the issue and that I can suppress the issue (which is what we currently do) 😄 - I wanted to raise an issue for your awareness. Feel free to close it, but at least others will find a solution in the comments.

Sadly, I do not have enough spare time to submit a PR inlining the flattening.

[muuvmuuv]

I would like to work on this but do not really understand how to develop/test inside projects. I have also opened an issue on flat, maybe they will update flat to be ES Module complaint.

This is what I have so far but it is not "safe".

import { paths } from 'deepdash-es/standalone';
import { get } from 'lodash-es';

export function flatten(obj: Translation): Translation {
  return paths(obj).reduce((a, b) => ((a[b.toString()] = get(obj, b)), a), {});
}

[Laith-Bzour90]

to fix this issue on terminal
in angular.json put this line :
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"ngneat-transloc",
"ngneat-transloco-locale",
"flat"
],

[DmitryEfimenko]

A fix for this issue has been merged in the flat lib, but they're failing to release it for months.

Not sure if having a dependency on a package that's maintained so sparingly makes sense for transloco.

[shaharkazaz]

@DmitryEfimenko there is another issue that's open related to flat.
Transloco and ~9M other consumers depend on that package, I hope they will release a new version soon, if they won't I'll consider a different solution.