Angular 11 - webpack 5 support

[AsmisAlan]

🐞 bug report

Affected Package

@Angular-devkit

Description

Hello people! recently I have upgraded an application from angular 10 to angular 11 in order to try some features of webpack 5.
I completed the entire migration without adding webpack and all worked well, Then I added "resolutions":{"webpack": "^5.0.0"} in the package.json file as the documentation explain and the devkit package started to fail when I ran the build/serve command.

🔬 Minimal Reproduction

Upgrade from angular 10 to angular 11 using Webpack 5.

🔥 Exception or Error

(node:24880) UnhandledPromiseRejectionWarning: Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
at C:....\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\NormalModuleFactory.js:644:11
at eval (eval at create (C:....\node_modules@angular-devkit\build-angular\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
(node:24880) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 25)
(node:24880) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:24880) UnhandledPromiseRejectionWarning: Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
at C:....\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\NormalModuleFactory.js:644:11
at eval (eval at create (C:...\node_modules@angular-devkit\build-angular\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
(node:24880) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 26)
(node:24880) UnhandledPromiseRejectionWarning: Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
at C:....\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\NormalModuleFactory.js:644:11
at eval (eval at create (C:...\node_modules@angular-devkit\build-angular\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
(node:24880) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 27)
(node:24880) UnhandledPromiseRejectionWarning: Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
at C:....\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\NormalModuleFactory.js:644:11
at eval (eval at create (C:......\node_modules@angular-devkit\build-angular\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1)
(node:24880) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 28)

🌍 Your Environment

Angular Version:
Angular CLI: 11.0.2
Node: 12.18.3
OS: win32 x64
Angular: 11.0.2

@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1100.2
@angular-devkit/core 11.0.2
@angular-devkit/schematics 10.0.8
@angular/cdk 11.0.1
@angular/flex-layout 11.0.0-beta.33
@angular/material 11.0.1
@schematics/angular 11.0.2
@schematics/update 0.1100.2
ng-packagr 11.0.3
rxjs 6.6.3
typescript 4.0.5
webpack 4.44.2

Anything else relevant?

Something strange that I noticed is that the Webpack 5 was installed but the angular version show that is using the version 4.44.2

[clydin]

From the version list, it appears that the project is using a mixture of version 11 and version 10 dependencies. Was ng update used to update the project? Can you try updating the remainder of the packages to version 11? If this proves problematic, please provide the contents of the project's package.json.

[AsmisAlan]

Hi @clydin ! thanks for your response!

Find bellow the result of ng update:

Found 49 dependencies.
We analyzed your package.json, there are some packages to update:

  Name                               Version                  Command to update
 --------------------------------------------------------------------------------
  @ngrx/store                        10.0.0 -> 10.0.1         ng update @ngrx/store
  @nrwl/angular                      10.1.0 -> 10.4.4         ng update @nrwl/angular
  @nrwl/cypress                      10.1.0 -> 10.4.4         ng update @nrwl/cypress
  @nrwl/jest                         10.1.0 -> 10.4.4         ng update @nrwl/jest
  @nrwl/workspace                    10.1.0 -> 10.4.4         ng update @nrwl/workspace

There might be additional packages which don't provide 'ng update' capabilities that are outdated.     
You can update the addition packages by running the update command of your package manager.

And my package.json dependencies:

{
    "resolutions": {
        "webpack": "^5.0.0"
    },
    "scripts": {... },
    "private": true,
    "dependencies": {
        "@angular/animations": "11.0.2",
        "@angular/cdk": "^11.0.0",
        "@angular/common": "11.0.2",
        "@angular/compiler": "11.0.2",
        "@angular/core": "11.0.2",
        "@angular/flex-layout": "^11.0.0-beta.33",
        "@angular/forms": "11.0.2",
        "@angular/localize": "11.0.2",
        "@angular/material": "^11.0.0",
        "@angular/platform-browser": "11.0.2",
        "@angular/platform-browser-dynamic": "11.0.2",
        "@angular/router": "11.0.2",
        "@ngrx/effects": "10.0.0",
        "@ngrx/entity": "10.0.0",
        "@ngrx/router-store": "10.0.0",
        "@ngrx/store": "10.0.0",
        "@nrwl/angular": "10.1.0",
        "rxjs": "^6.5.5",
        "scss-bundle": "^3.1.2",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.1100.2",
        "@angular/cli": "^11.0.2",
        "@angular/compiler-cli": "11.0.2",
        "@angular/language-service": "11.0.2",
        "@ngrx/schematics": "10.0.0",
        "@ngrx/store-devtools": "10.0.0",
        "@nrwl/cli": "^10.1.0",
        "@nrwl/cypress": "10.1.0",
        "@nrwl/jest": "10.1.0",
        "@nrwl/workspace": "10.1.0",
        "@types/jest": "^26.0.8",
        "@types/node": "~14.6.0",
        "codelyzer": "^6.0.0",
        "cypress": "^4.0.0",
        "dotenv": "^8.2.0",
        "eslint": "^7.7.0",
        "jest": "^26.2.2",
        "jest-junit": "^11.1.0",
        "jest-preset-angular": "^8.2.1",
        "ng-packagr": "11.0.3",
        "node-sass": "^4.14.1",
        "prettier": "^2.0.4",
        "ts-jest": "^26.1.4",
        "ts-mockery": "^1.2.0",
        "ts-node": "~9.0.0",
        "tslint": "~6.1.0",
        "typescript": "4.0.5",
        "webpack": "^4.18.1"
    }
}

[clydin]

Thank you for the additional information. It appears the project is using nx. Third-party builders are not supported by the Angular team. Please consider opening an issue report with the nx project.

The error shown above indicates that an old version of the @ngtools/webpack package is in use.
One thing that could be tried, however, is to delete the node_modules directory and any package lock files (yarn.lock/package-lock.json) and reinstall.

[angular-automatic-lock-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.}