Angular-cli: Building Angular 10 app shows incomplete "Warning in" messages

[KShewengger]

🐞 Bug report

• [ ] new
• [x] build
• [ ] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] xi18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

Yes

Description

Whenever I tried to build my app, there are warning in relevance to _"Fix CommonJS or AMD dependencies can cause optimization bailouts"_ and incomplete _"Warning in"_ message but the first one is now resolved through editing the angular.json and add this line right here:

"allowedCommonJsDependencies": [
        "..."
 ]

But the 2nd issue - incomplete _"Warning in"_ messages still persists. With this, would like to be guided.

🔬 Minimal Reproduction

It is through when running ng build --prod but since the warning shown is incomplete, I'm quite not sure when does it persist but these are the list of packages that I have added under allowedCommonJsDependencies

"allowedCommonJsDependencies": [
              "ngx-lightbox",
              "ngx-flickity",
              "lodash",
              "flickity",
              "flickity-imagesloaded",
              "imagesloaded/imagesloaded"
 ]

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 10.0.2
Node: 12.11.1
OS: macOS Catalina
Angular: 10.0.3

[alan-agius4]

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 or share the project even privately?

You can read here why this is needed. 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.

[rurku]

I've seen this too with version 10.0.2 and I tried to track it down.
I'm pretty sure it was introduced in Pull Request https://github.com/angular/angular-cli/pull/18097 . Looks like child warnings are not correctly appended to the array. The number of "WARNING in" messages matched the number of children in stats.json and the children had no warnings ("warnings": []).
But I had trouble reproducing it in a fresh project - it also had children with "warnings": [] in stats.json but it did not show the empty warning messages on production build.
So there must be more to it.

[alan-agius4]

@rurku, that’s really good info.

[KShewengger]

Hi @alan-agius4 , the empty Warning in messages still persists on my side after reinstalling these packages:

"@angular-devkit/build-angular": "~0.1000.2",
"@angular/cli": "~10.0.2"

May I know if the fix is published or if there's something that I have missed.
Thank you, would like to be guided.

[alan-agius4]

The fix will be published later on this week in the next patch version.

[sahad78]

Was the fix released?

[alan-agius4]

Yeah, it’s available in 10.0.3

[UrbanNuke]

Hello @alan-agius4
I've updated @angular/cli to 10.0.3, but I'm getting the same warnings - Warning in

[alan-agius4]

@UrbanNuke, can you provide the output of ng version?

[UrbanNuke]

@alan-agius4 of course, here

Angular CLI: 10.0.3
Node: 12.16.1
OS: win32 x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.3
@angular-devkit/build-angular      0.1000.3
@angular-devkit/build-optimizer    0.1000.3
@angular-devkit/build-webpack      0.1000.3
@angular-devkit/core               10.0.3
@angular-devkit/schematics         10.0.3
@angular/cdk                       10.0.2
@angular/cli                       10.0.3
@angular/material                  10.0.2
@angular/material-moment-adapter   10.0.2
@ngtools/webpack                   10.0.3
@schematics/angular                10.0.3
@schematics/update                 0.1000.3
rxjs                               6.5.5
typescript                         3.9.7
webpack                            4.43.0

[alan-agius4]

@UrbanNuke, you do have the correct packages, would you be able to share a reproduction even privately?

[sahad78]

Same here, still getting the "warning in" message after updating to 10.0.3

Angular CLI: 10.0.3
Node: 12.18.2
OS: win32 x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.3
@angular-devkit/build-angular     0.1000.3
@angular-devkit/build-optimizer   0.1000.3
@angular-devkit/build-webpack     0.1000.3
@angular-devkit/core              10.0.3
@angular-devkit/schematics        10.0.3
@angular/cdk                      10.0.2
@angular/cli                      10.0.3
@angular/material                 10.0.2
@ngtools/webpack                  10.0.3
@schematics/angular               10.0.3
@schematics/update                0.1000.3
rxjs                              6.6.0
typescript                        3.9.6
webpack                           4.43.0

[sahad78]

`chunk {0} runtime-es2015.409e6590615fb48d139f.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.409e6590615fb48d139f.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.a0fa45e0fa52702b64f0.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.2dcde1efe3c1bf4aaa25.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {1} main-es2015.ee10e22b237f855707bc.js (main) 927 kB [initial] [rendered]
chunk {1} main-es5.ee10e22b237f855707bc.js (main) 1.01 MB [initial] [rendered]
chunk {4} styles.0a476d8894767495ec69.css (styles) 66.4 kB [initial] [rendered]
Date: 2020-07-17T09:55:43.615Z - Hash: 6892c17f98f3804a659d - Time: 172891ms

WARNING in

WARNING in `

[UrbanNuke]

@alan-agius4 unfortunately I can't provide reproduction because our security politics.
But I've localized problem, every 'warning' depends on each path in angular.json in "styles", and "assets"

from angular.json

"assets": [
      "src/favicon.ico",
      "src/assets",
      { "glob": "pdf.worker.min.js", "input": "node_modules/pdfjs-dist/build/", "output": "assets/" }
],
"styles": [
      "./libs/jexcel/jexcel.css",
      "./node_modules/jsuites/dist/jsuites.css",
      "./libs/jexcel/jexcel.theme.css",
      "src/assets/scss/our-custom-theme.scss",
      "node_modules/monaco-editor/min/vs/editor/editor.main.css",
      "src/styles.scss"
],
"stylePreprocessorOptions": {
       "includePaths": [
               "src/assets/scss/base"
        ]
},

[alan-agius4]

@UrbanNuke, can you try to create a minimal reproduction using no new and post a link here?

It would be super helpful to quickly identify and solve the problem.

[alan-agius4]

Alternatively what would be helpful is modify node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js line 84 and add console.log({warnings}); and provide the outputted values.

[UrbanNuke]

@alan-agius4
While I was creating repository, I localized problem more.
Problem in .browserslistrc, especially with IE 11

[alan-agius4]

@UrbanNuke, thanks for the info and reproduction.

Will take a look sometime between today and Monday.

[KShewengger]

Alternatively what would be helpful is modify node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js line 84 and add console.log({warnings}); and provide the outputted values.

@alan-agius4 After adding the console above with the updated packages:

"@angular-devkit/build-angular": "^0.1000.3",
"@angular/cli": "^10.0.3",

When I ran the app, this is the result of the log:

{
  warnings: [
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    []
  ]
}

On stats.js line 85 maybe instead of this:

return rs('\n' + warnings
        .filter(m => !!m)

we can try to have it like this:

return rs('\n' + warnings
        .filter(m => m.length)                // This will validate empty strings or empty arrays

With that, the empty warnings are now gone:

[alan-agius4]

The problem there is that we except an array of strings.

I know what’s happening 😊, it’s an easy fix. Thank you everyone for all
the information provided.

On Fri, 17 Jul 2020 at 14:46, Kristy Mae Almuete [e-mail]
wrote:

Alternatively what would be helpful is modify
node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js
line 84 and add console.log({warnings}); and provide the outputted values.

After adding the console above with the updated packages:

"@angular-devkit/build-angular": "^0.1000.3",
"@angular/cli": "^10.0.3",

When I ran the app, the result of the logs is this:

{
warnings: [
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
'Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt',
[],
[],
[],
[],
[],
[],
[],
[],
[],
[]
]
}

On stats.js line 85 maybe instead of this:

return rs('n' + warnings
.filter(m => !!m)

we can have it this:

return rs('n' + warnings
.filter(m => m.length)

With that, the empty warnings are now gone:

[image: image]
https://user-images.githubusercontent.com/7908747/87787548-67b38f00-c86e-11ea-8bb8-4f00902716d7.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/18231#issuecomment-660087131,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEF74WSELBIBYRNBBYBEZ7DR4BBZZANCNFSM4OXRKYZA
.

[UrbanNuke]

@alan-agius4 thanks for very fast fix 😊

[alan-agius4]

Couldn’t have been possible without the info that all of you provided. So thank you all as well 😊

[KShewengger]

Have tested it and All is now well when I updated my packages with:

"@angular-devkit/build-angular": "^0.1000.4",
"@angular/cli": "^10.0.4",

and run ng build --prod and the incomplete warnings are now gone, thank you 🎉

[alan-agius4]

Thanks for the confirmation @KShewengger.

[sahad78]

updated to Angular: 10.0.5 and empty warnings now gone. Thanks for the fix.

[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._}