Closed
Description
Bug Report
Affected Package
Seems like an issue with @angular-devkit/build-angular
and/or @ngtools/webpack
and/or @angular/compiler-cli
?
Is this a regression?
Yes, the behavior was not reproducible with Angular 11 and webpack 4.
Description
Attempting to build (ng build --aot true --common-chunk false --source-map false --vendor-chunk false
) fails with the error below.
Minimal Reproduction
I can investigate further and try to put something together if needed, but our project code is at least available at https://github.com/cyph/cyph/tree/angular-42087-test.
Exception or Error
Angular 12 with Webpack 5:
⠋ Generating browser application bundles...Warning: Entry point 'devextreme-angular/ui/file-manager' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/ui/file_manager', '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'angular2-text-mask' contains deep imports into '/cyph/cyph.app/node_modules/text-mask-core/dist/textMaskCore'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/core' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/core/utils/common', '/cyph/cyph.app/node_modules/devextreme/core/dom_adapter', '/cyph/cyph.app/node_modules/devextreme/events', '/cyph/cyph.app/node_modules/devextreme/core/renderer', '/cyph/cyph.app/node_modules/devextreme/core/http_request', '/cyph/cyph.app/node_modules/devextreme/core/utils/ready_callbacks', '/cyph/cyph.app/node_modules/devextreme/events/core/events_engine', '/cyph/cyph.app/node_modules/devextreme/core/utils/ajax', '/cyph/cyph.app/node_modules/devextreme/core/utils/deferred'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/ui/nested' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all', '/cyph/cyph.app/node_modules/devextreme/animation/fx', '/cyph/cyph.app/node_modules/devextreme/viz/core/base_widget', '/cyph/cyph.app/node_modules/devextreme/ui/widget/ui.widget', '/cyph/cyph.app/node_modules/devextreme/ui/box', '/cyph/cyph.app/node_modules/devextreme/ui/button', '/cyph/cyph.app/node_modules/devextreme/ui/tab_panel', '/cyph/cyph.app/node_modules/devextreme/ui/form', '/cyph/cyph.app/node_modules/devextreme/data/abstract_store', '/cyph/cyph.app/node_modules/devextreme/ui/pivot_grid/xmla_store', '/cyph/cyph.app/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
(node:320) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
at new Promise (<anonymous>)
at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:320) 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: 88)
(node:320) [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.
⠙ Generating browser application bundles (phase: building)...(node:320) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 88)
⠴ Generating browser application bundles (phase: building)...WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md
node_modules/@angular/material/core/theming/_theming.scss 289:7 private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss 31:3 theme()
src/css/mixins.scss 167:4 cyph-apply-theme()
src/css/cyph.base.scss 5:1 @import
src/css/cyph.app.scss 11:9 root stylesheet
[...]
✔ Browser application bundle generation complete.
Warning: /cyph/cyph.app/src/js/externals/_stream_duplex.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
[...]
./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
at new Promise (<anonymous>)
at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
./src/js/cyph.app/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
at new Promise (<anonymous>)
at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
./src/js/cyph.app/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (/cyph/cyph.app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
at /cyph/cyph.app/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:43:19
at Hook.eval [as call] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1030:30)
at /cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
at Hook.eval [as callAsync] (eval at create (/cyph/cyph.app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/cyph/cyph.app/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
at Compiler.runAsChild (/cyph/cyph.app/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:520:8)
at /cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:135:27
at new Promise (<anonymous>)
at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:134:16)
at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
Angular 12 with Webpack 4:
⠋ Generating browser application bundles...Warning: Entry point 'devextreme-angular/ui/file-manager' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/ui/file_manager', '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'angular2-text-mask' contains deep imports into '/cyph/cyph.app/node_modules/text-mask-core/dist/textMaskCore'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/core' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/core/utils/common', '/cyph/cyph.app/node_modules/devextreme/core/dom_adapter', '/cyph/cyph.app/node_modules/devextreme/events', '/cyph/cyph.app/node_modules/devextreme/core/renderer', '/cyph/cyph.app/node_modules/devextreme/core/http_request', '/cyph/cyph.app/node_modules/devextreme/core/utils/ready_callbacks', '/cyph/cyph.app/node_modules/devextreme/events/core/events_engine', '/cyph/cyph.app/node_modules/devextreme/core/utils/ajax', '/cyph/cyph.app/node_modules/devextreme/core/utils/deferred'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'devextreme-angular/ui/nested' contains deep imports into '/cyph/cyph.app/node_modules/devextreme/bundles/dx.all', '/cyph/cyph.app/node_modules/devextreme/animation/fx', '/cyph/cyph.app/node_modules/devextreme/viz/core/base_widget', '/cyph/cyph.app/node_modules/devextreme/ui/widget/ui.widget', '/cyph/cyph.app/node_modules/devextreme/ui/box', '/cyph/cyph.app/node_modules/devextreme/ui/button', '/cyph/cyph.app/node_modules/devextreme/ui/tab_panel', '/cyph/cyph.app/node_modules/devextreme/ui/form', '/cyph/cyph.app/node_modules/devextreme/data/abstract_store', '/cyph/cyph.app/node_modules/devextreme/ui/pivot_grid/xmla_store', '/cyph/cyph.app/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
(node:8623) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:8623) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:8623) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:8623) UnhandledPromiseRejectionWarning: TypeError: webpack_1.node.NodeTargetPlugin is not a constructor
at WebpackResourceLoader._compile (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:83:13)
at WebpackResourceLoader.get (/cyph/cyph.app/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
at Object.resourceHost.readResource (/cyph/cyph.app/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
at AdapterResourceLoader.preload (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
at resolveStyleUrl (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:192:49)
at /cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:83
at Array.map (<anonymous>)
at ComponentDecoratorHandler.preanalyze (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:50)
at _loop_1 (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:321:53)
at TraitCompiler.analyzeClass (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:343:35)
at visit (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:113:27)
at visitNodes (/cyph/cyph.app/node_modules/typescript/lib/typescript.js:28217:30)
at Object.forEachChild (/cyph/cyph.app/node_modules/typescript/lib/typescript.js:28456:24)
at visit (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:115:20)
at TraitCompiler.analyze (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:117:13)
at TraitCompiler.analyzeAsync (/cyph/cyph.app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:79:25)
(node:8623) 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: 88)
(node:8623) [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.
✔ Browser application bundle generation complete.
Error: webpack_1.util.cleverMerge is not a function
Error: webpack_1.util.cleverMerge is not a function
Error: webpack_1.util.cleverMerge is not a function
Error: webpack_1.util.cleverMerge is not a function
Error: webpack_1.util.cleverMerge is not a function
Your Environment
Angular Version:
Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 7.12.1
OS: linux arm64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1200.0
@angular-devkit/core 12.0.0
@angular-devkit/schematics 12.0.0
@schematics/angular 12.0.0
Anything else relevant?