Closed naveedahmed1 closed 3 years ago
The MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead
aspect of the issue is a Webpack 5 related warning and not an error. There may still be several of these present. The code is currently being reviewed to locate and correct any remaining Webpack 4 specific code patterns.
The second aspect regarding the server build appears to be Webpack 5 related but will require addition investigation.
@alan-agius4 you can reproduce the issue in Mustakbil-SSR-Demo
repo after updating Angular packages ng update @angular/cli @angular/core --createCommits=true --force=true --next
@clydin should I add you to the private repo?
The Uncaught Error: Automatic publicPath is not supported in this browser
is caused by an older version of mini-css-extract-plugin, see https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707. This version however, is not used in the Angular CLI version 12.
I tried to reproduce this in your project but I wasn't able, with either of the below commands
yarn build:ssr
ng build
ng serve
Likely this is caused by incorrect module resolution, can you try the below and see if the problem persists.
rm -rf node_modules
npm i
Thats strange, I removed node_modules
and installed packages again yet no success.
Which npm version are you using? Can you run npm ls mini-css-extract-plugin
and provide the output?
npm version :6.14.11
Output of npm ls mini-css-extract-plugin
is:
-- (empty)
Have you tried running the project in Visual Studio? If so, when you run the project you will see the homepage is rendered, but if you open the Chrome Dev Console you will notice the errors and realize that app is broken.
Also update the Angular CLI ng update @angular/cli @angular/core --createCommits=true --force=true --next
I removed the node_modules
again and installed packages again, Webpack warning is still there but publicPath
error is no longer there but I now see below errors:
I dont know why is it looking for modules in https://pagead2.googlesyndication.com
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a failed.
(error: https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a.js)
ChunkLoadError: Loading chunk default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a failed.
(error: https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a.js)
at Object.__webpack_require__.f.j (jsonp chunk loading:27)
at ensure chunk:6
at Array.reduce (<anonymous>)
at Function.__webpack_require__.e (ensure chunk:5)
at loadChildren (app-routing.module.ts:16)
at RouterConfigLoader.loadModuleFactory (router.js:3676)
at RouterConfigLoader.load (router.js:3650)
at MergeMapSubscriber.project (router.js:2798)
at MergeMapSubscriber._tryNext (mergeMap.js:44)
at MergeMapSubscriber._next (mergeMap.js:34)
at resolvePromise (zone.js:1255)
at resolvePromise (zone.js:1209)
at zone.js:1321
at ZoneDelegate.push.90551.ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.js:28619)
at ZoneDelegate.push.90551.ZoneDelegate.invokeTask (zone.js:433)
at Zone.push.90551.Zone.runTask (zone.js:205)
at drainMicroTaskQueue (zone.js:620)
at ZoneTask.push.90551.ZoneTask.invokeTask [as invoke] (zone.js:520)
at invokeTask (zone.js:1656)
And some times this error:
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-src_app_shared_services_lookup_service_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_material___ivy_ngcc___fesm2015_select_js.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-src_app_shared_validators_custom-validators_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_material___ivy_ngcc___fesm2015_input_js.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_overlay_js.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_material___ivy_ngcc___fesm2015_dialog_js.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-src_app_shared_cascading-select_cascading-select_module_ts-src_app_shared_dynamic-for-df0bfe.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/src_app_account_enable-notifications_component_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/src_app_account_account_module_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/default-src_app_account_login-dialog-launch_component_ts-src_app_shared_utilities_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/common.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
jsonp chunk loading:60 GET https://pagead2.googlesyndication.com/pagead/js/src_app_shared_rate-app_rate-app_component_ts.js net::ERR_ABORTED 404
__webpack_require__.F.j @ jsonp chunk loading:60
(anonymous) @ chunk prefetch function:4
__webpack_require__.E @ chunk prefetch function:3
(anonymous) @ startup prefetch:1
__webpack_require__.O @ chunk loaded:25
webpackJsonpCallback @ jsonp chunk loading:94
(anonymous) @ main.js:1
load script:41 GET https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_material___ivy_ngcc___fesm2015_input_js.js net::ERR_ABORTED 404
__webpack_require__.l @ load script:41
__webpack_require__.f.j @ jsonp chunk loading:43
(anonymous) @ ensure chunk:6
__webpack_require__.e @ ensure chunk:5
loadChildren @ app-routing.module.ts:16
loadModuleFactory @ router.js:3676
load @ router.js:3650
(anonymous) @ router.js:2798
_tryNext @ mergeMap.js:44
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ catchError.js:14
subscribe @ Observable.js:23
innerSubscribe @ innerSubscribe.js:67
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ take.js:22
subscribe @ Observable.js:23
call @ throwIfEmpty.js:13
subscribe @ Observable.js:23
call @ catchError.js:14
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
innerSubscribe @ innerSubscribe.js:67
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ scan.js:18
subscribe @ Observable.js:23
call @ takeLast.js:22
subscribe @ Observable.js:23
call @ throwIfEmpty.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:14
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
innerSubscribe @ innerSubscribe.js:67
_innerSub @ switchMap.js:44
_next @ switchMap.js:34
next @ Subscriber.js:49
notifyNext @ switchMap.js:66
_next @ innerSubscribe.js:10
next @ Subscriber.js:49
(anonymous) @ subscribeToPromise.js:5
push.90551.ZoneDelegate.invoke @ zone.js:400
onInvoke @ core.js:28632
push.90551.ZoneDelegate.invoke @ zone.js:399
push.90551.Zone.run @ zone.js:160
(anonymous) @ zone.js:1318
push.90551.ZoneDelegate.invokeTask @ zone.js:434
onInvokeTask @ core.js:28619
push.90551.ZoneDelegate.invokeTask @ zone.js:433
push.90551.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:620
push.90551.ZoneTask.invokeTask @ zone.js:520
invokeTask @ zone.js:1656
globalZoneAwareCallback @ zone.js:1682
Show 55 more frames
core.js:6456 ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk default-node_modules_angular_material___ivy_ngcc___fesm2015_input_js failed.
Edit
publicPath
error is still there, if I comment out addAdsenseScriptTag()
it throws below publicPath
error, otherwise it show above errors.
Uncaught Error: Automatic publicPath is not supported in this browser
at publicPath:14
at runtime.js:241
at runtime.js:349
As an experiment, can you try adding a deployUrl
setting with the value of an empty string (""
)?
Surprisingly adding deployUrl
fixed the issue, I added it for both browser
and server
.
One more thing which I noticed is that the javascript bundles are no longer in sequential order.
Webpack 5 uses a new deterministic identifier algorithm. The concept being that it will limit cache misses by increasing the probability of preserving the file names.
I see, btw this upgrade reduced size of my js bundles as well:
Browser Bundles: 3.33Mb > 3.28Mb
Server Bundles : 4.67Mb > 3.89Mb
Few more things to bring in your notice, after update:
@naveedahmed1, can you please try out the latest RC version?
I had a similar problem, I deleted angular-builders/custom-webpack
, after I changed angular builder from custom-webpack
to default and added in tsconfig.json
-> "skipLibCheck": true
but the bundle increased
NG11 latest
Initial ES5 Total | 1.00 MB
Initial ES2015 Total | 855.20 kB
NG12 RC
Initial ES5 Total | 1.02 MB
Initial ES2015 Total | 875.06 kB
@alan-agius4 I can confirm although DeprecationWarning
is still there but the issue has been resolved and app is working fine.
Closing as this issue should be solved.
If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app
to create a new project where you reproduce the problem.
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.
π Bug report
Command (mark with an
x
)Is this a regression?
Yes, the previous version in which this bug was not present was: 12.0.0-next.8. After upgrading to 12.0.0-next.9, the client app and server (ssr) app throws below error. `MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead` Although despite of this the `ng serve` command for `client` application does work, but `SSR` applications is broken. The server application throws below error in Chrome Dev Console and is broken: ``` ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a failed. (error: https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a.js) ChunkLoadError: Loading chunk default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a failed. (error: https://pagead2.googlesyndication.com/pagead/js/default-node_modules_angular_cdk___ivy_ngcc___fesm2015_portal_js-node_modules_angular_cdk___i-50892a.js) at Object.__webpack_require__.f.j (jsonp chunk loading:27) at ensure chunk:6 at Array.reduce (