App broken after 12.0.0-next.9 - MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead #20544

naveedahmed1 · 2021-04-15T15:01:36Z

🐞 Bug report

Command (mark with an `x`)

[x ] build
[ x] serve

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 (<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

Uncaught Error: Automatic publicPath is not supported in this browser
    at publicPath:14
    at runtime.js:241
    at runtime.js:349

🔬 Minimal Reproduction

Here's my package.json running npm run build should produce the above error. I can also add you to a private repo for more information.

{
  "name": "mustakbil",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "ng-high-memory": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng",
    "start": "echo hello && node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng serve",
    "serve": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng serve --project=Mustakbil",
    "serve:prod": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng serve --configuration=production --project=Mustakbil",
    "build": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng build --configuration=production --project=Mustakbil",
    "build:ssr_ignore_dash_dash_watch_from_AngularCliBuilderDotCS": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng run Mustakbil:server:production ",
    "build:ssr": "npm run build:ssr_ignore_dash_dash_watch_from_AngularCliBuilderDotCS",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "analyze": "node --max_old_space_size=30000 ./node_modules/@angular/cli/bin/ng build --prod --statsJson=true && webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.0.0-next.9",
    "@angular/cdk": "12.0.0-next.6",
    "@angular/common": "12.0.0-next.9",
    "@angular/compiler": "12.0.0-next.9",
    "@angular/core": "12.0.0-next.9",
    "@angular/fire": "6.1.4",
    "@angular/forms": "12.0.0-next.9",
    "@angular/google-maps": "12.0.0-next.6",
    "@angular/material": "12.0.0-next.6",
    "@angular/platform-browser": "12.0.0-next.9",
    "@angular/platform-browser-dynamic": "12.0.0-next.9",
    "@angular/platform-server": "12.0.0-next.9",
    "@angular/pwa": "0.1200.0-next.8",
    "@angular/router": "12.0.0-next.9",
    "@angular/service-worker": "12.0.0-next.9",
    "@fingerprintjs/fingerprintjs": "^3.0.3",
    "@nguniversal/aspnetcore-engine": "11.2.1",
    "@nguniversal/builders": "^11.2.1",
    "@nguniversal/common": "11.2.1",
    "@ngx-lite/json-ld": "0.6.3",
    "@ngx-pwa/local-storage": "11.1.0",
    "@swimlane/ngx-charts": "17.0.1",
    "@trademe/ng-defer-load": "8.2.1",
    "@types/fingerprintjs2": "^2.0.0",
    "aspnet-prerendering": "3.0.1",
    "core-js": "3.6.5",
    "d3-shape": "1.3.7",
    "dayjs": "^1.8.29",
    "es6-promise": "^4.2.8",
    "es6-shim": "^0.35.6",
    "file-saver": "2.0.5",
    "firebase": "8.3.2",
    "install": "^0.13.0",
    "moment": "2.27.0",
    "ng2-adsense": "9.1.0",
    "ng2-ckeditor": "1.3.3",
    "ngx-build-plus": "11.0.0",
    "ngx-img-cropper": "10.0.0",
    "ngx-infinite-scroll": "10.0.1",
    "preboot": "^7.0.0",
    "rxjs": "~6.6.0",
    "screenfull": "5.0.2",
    "smoothscroll-polyfill": "0.4.4",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.1.1",
    "@angular-devkit/build-angular": "12.0.0-next.9",
    "@angular/cli": "12.0.0-next.9",
    "@angular/compiler-cli": "12.0.0-next.9",
    "@angular/language-service": "12.0.0-next.9",
    "@types/jasmine": "~3.5.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.0.24",
    "@types/webappsec-credential-management": "0.6.0",
    "codelyzer": "^6.0.1",
    "concat": "3.0.0",
    "guess-parser": "0.4.22",
    "guess-webpack": "0.4.22",
    "html-minifier": "^4.0.0",
    "html-minifier-terser": "^5.1.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.4.2",
    "npm": "^6.14.11",
    "npm-run-all": "^4.1.5",
    "protractor": "~7.0.0",
    "purgecss": "^4.0.3",
    "replace-in-files-cli": "^1.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "typescript": "4.2.3",
    "webpack-bundle-analyzer": "^4.4.0"
  }
}

Below is my index.html

<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head itemscope itemtype="http://schema.org/WebSite">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <base href="/" />

   <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
  <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">

  <link rel="preconnect" href="https://accounts.google.com" crossorigin>
  <link rel="dns-prefetch" href="https://accounts.google.com">

  <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
  <link rel="dns-prefetch" href="https://www.google-analytics.com">

  <!--<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
  <link rel="dns-prefetch" href="https://www.gstatic.com">-->

  <link rel="preconnect" href="https://stats.g.doubleclick.net" crossorigin>
  <link rel="dns-prefetch" href="https://stats.g.doubleclick.net">

  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#1976d2">

</head>
<body onload="loadSmoothScrollScript()" class="header-pattern">

  <app-root>
    <div class="mat-elevation-z2 navbar-fixed-top">
      <div class="container">
        <div class="mat-toolbar mat-primary pl0 pr0">
          <nav class="mat-tab-nav-bar mat-primary" style="width: 100%;">
            <div class="mat-tab-links" style="display: flex;">
              <a href="/" class="nav-logo">
                <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" style="width: 45px; height: 45px; background: #fff; border-radius: 50%" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" xmlns:v="https://vecta.io/nano">
                  <title>Logo - Find Jobs Online</title>
                  <path fill="#d73a48" d="M231.5 44c-51.8 6.8-96.1 27.9-131 62.4-17.8 17.7-30.4 35.2-41.5 57.8-27.6 56.1-28.7 120.7-3.1 177.4 4 8.8 14.3 27.4 15.2 27.4 1.4 0 9.2-9.6 13-16 4.3-7.3 64.6-139.3 68.9-151 1.6-4.1 3.1-9.6 3.5-12.2.6-4 .4-4.9-1.5-6.8-2.1-2.1-2.9-2.2-13.4-1.7-6.1.2-11.9.8-12.8 1.2-1.7.7-1.7.4.1-3.6l2-4.4 20.3-5.1c11.2-2.7 30.3-7.9 42.6-11.4 13.6-3.9 22.6-6 23.1-5.4.5.5-2.5 8.3-7.4 19.1-4.5 10.1-8 18.1-7.6 17.9 56.1-32.4 83.6-41.6 108-36 8.5 1.9 15 5.9 18.8 11.6 4.2 6 5.5 10.8 5.7 19.9 0 4.4.2 7.9.3 7.9s5.3-3.3 11.5-7.4c37.2-24.4 65-34.6 91.4-33.4l10.2.5-5.5-8.6c-22.2-34.4-51.6-60.4-88.8-78.6-20.9-10.2-39.1-16-62.5-20.1-11.2-1.9-48.8-2.8-59.5-1.4z" />
                  <path fill="#3373b3" d="M248 180.9c-4.7 1-12.5 3.5-17.5 5.5-9.2 3.7-26.5 13.6-32.2 18.4-2.6 2.2-8.8 15-33.4 69.2l-33.5 76c-3.9 11.1-4.4 18-1.5 20.9 2.7 2.7 11.2 5.1 17.8 5.1 6 0 6.4.7 3.3 5.8l-2 3.3-66.8-.6 2.1 3c3.9 5.6 24.1 25.7 32.7 32.5 31.7 25.2 69 41.1 110.5 47.1 13.4 2 46.4 1.7 60.5-.5 63.3-9.8 117.2-43.6 151.6-95.1 29.8-44.8 41.5-100.8 31.8-152.9l-1.7-9-2.9 8.5c-1.7 4.6-14.7 34.3-29 65.9-28 61.7-31.4 70.1-32.4 78.5-.6 5-.5 5.6 2.3 8.3 3.2 3.3 10.1 5.2 18.3 5.2 2.8 0 5 .2 5 .5s-.9 2.4-2 4.5l-2 4h-57c-31.4 0-57-.2-57-.5s.9-2.4 2-4.5c2-3.9 2.2-4 7.3-4 6.8 0 17.5-2.3 22.5-4.9 5.9-3 13.2-11.9 19-22.9 5.8-11.2 55.2-119.6 58.8-129 4.1-10.9 5.8-21.4 4.4-27.2-1.4-5.9-5.9-10.3-12.2-12.1-6-1.6-23.5-.5-33.3 2-10.5 2.8-25.6 10.3-37.8 18.8l-9.9 6.8-30.8 68-33 74c-1.1 3.3-2.3 8.8-2.7 12.2-.5 5.6-.4 6.3 1.9 8.6 3.2 3.2 8.1 4.6 18.1 5.4 4.6.3 7.7 1 7.7 1.7 0 .6-.9 2.6-2 4.3l-2 3.3h-58.5c-39.5 0-58.5-.3-58.5-1 0-.6.6-2.6 1.4-4.4 1.4-3.3 1.4-3.3 9.7-3.9 4.6-.3 11.5-1.6 15.3-2.7 6-1.9 7.9-3.1 13-8.3 3.4-3.4 7.8-9.1 9.8-12.7 5-8.5 59-127.6 62.5-137.7 2.1-6.1 2.7-9.7 2.8-16.5 0-10-1.4-12.9-8.1-16.3-5.5-2.8-20.9-3.1-32.4-.6z" />
                </svg>
              </a>
              <a class="mat-tab-link hidden-xs" href="/employers">Employers</a>
              <a class="mat-tab-link hidden-xs" href="/people">People</a>
              <a class="mat-tab-link hidden-xs" href="/read">Read</a>
              <a class="mat-tab-link hidden-xs" href="/learn">Learn</a>
              <a class="mat-tab-link hidden-xs" href="/contact">Contact</a>
              <div class="flex-grow"></div>
              <a class="mat-tab-link hidden-xs">Login</a>
              <span class="flex-none flex-align-end hidden-gt-xs" style="width: 40px; text-align: center;line-height: 45px;">
                <icon-svg icon="menu" class="baseline-unset"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon" fill="currentColor"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></icon-svg>
              </span>
            </div>
          </nav>
        </div>
      </div>
    </div>

    <div id="placeholder"></div>

    <script>
      if (typeof window !== 'undefined') {
        var path = window.location.pathname;
        var contents = '';
        if (path == '/') {
          contents = '<div id="top" class="body-content pt-75-gt-xs pt-65-xs" style="min-height: 550px;"><div class="header-pattern slider-layout slider-indigo"><div class="container"><h1 class="text-center">Jobs in Pakistan, Search Online & Find Jobs</h1><h2 class="text-center hidden-xs">Jobs in Karachi, Lahore, Islamabad, Peshawar and other major cities of Pakistan!</h2><div style="height:388px"><div class="layout-row layout-wrap layoutalign-center-center"><div class="flex-750px flex-100-xs"><div class="mat-card search-form mat-elevation-z4" style="height:108.59px;"><nav class="mat-tab-nav-bar mat-primary" style="width: 100%;"><div class="mat-tab-links" style="display: flex;"><a class="mat-tab-link">Jobs</a><a class="mat-tab-link">Companies</a><a class="mat-tab-link">People</a><a class="mat-tab-link">Read</a><a class="mat-tab-link">Learn</a></div></nav><div class="layout-row layout-wrap layout-gap-15px"><div class="flex"></div><div class="flex"></div><div class="flex-30px flex-hide-xs pt10"></div></div></div><div id="homepage-buttons" class="layout-row layout-wrap layoutalign-center-center layout-gap-20px"><a rel="nofollow" class="flex-250px flex-150px-xs" href="/account/employer"><icon-svg icon="business"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon" fill="currentColor"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg></icon-svg><br> I Want to Post Jobs <div class="flex-hide-xs text-sm" style="color: #FFEB3B;">Post Jobs, Start Hiring Online</div></a><a rel="nofollow" class="flex-250px flex-150px-xs" href="/account/jobseeker"><icon-svg icon="person"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></icon-svg><br> I Want to Find Jobs <div class="flex-hide-xs text-sm" style="color: #FFEB3B;">Post Resume, Apply Online for Jobs</div></a></div><h3 class="text-center"> Start job search at Pakistan&apos;s No.1 Jobs site. Browse latest jobs in Pakistan and find your dream job. </h3><div class="mat-chip-list layout-row layout-wrap layoutalign-center-center multi-color"><div class="mat-chip"><a title="Jobs in Karachi" href="/jobs/pakistan/karachi">Jobs in Karachi</a></div><div class="mat-chip"><a title="Jobs in Lahore" href="/jobs/pakistan/lahore">Jobs in Lahore</a></div><div class="mat-chip"><a title="Jobs in Islamabad" href="/jobs/pakistan/islamabad">Jobs in Islamabad</a></div><div class="mat-chip"><a title="Jobs in Peshawar" href="/jobs/pakistan/peshawar">Jobs in Peshawar</a></div></div><div class="mat-chip-list layout-row layout-wrap layoutalign-center-center"><div class="mat-chip"><a title="Full Time Jobs in Pakistan" href="/jobs/pakistan/full-time">Full Time Jobs</a></div><div class="mat-chip"><a title="Internships in Pakistan" href="/jobs/pakistan/internship">Internships</a></div><div class="mat-chip"><a title="Part Time Jobs in Pakistan" href="/jobs/pakistan/part-time">Part Time Jobs</a></div><div class="mat-chip"><a title="Per Diem Jobs in Pakistan" href="/jobs/pakistan/per-diem">Per Diem Jobs</a></div><div class="mat-chip"><a title="Seasonal Jobs in Pakistan" href="/jobs/pakistan/seasonal">Seasonal Jobs</a></div><div class="mat-chip"><a title="Temporary Jobs in Pakistan" href="/jobs/pakistan/temporary-contract">Temporary Jobs</a></div></div></div></div></div></div></div></div>';
          document.getElementById("placeholder").innerHTML = contents;
        }

        if (path == '/account/jobseeker' || path == '/account/jobseeker?utm_source=TWA' || path == '/account/employer') {
          var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
          if (indexedDB) {
            var dbExists = true;
            var request = indexedDB.open("ngStorage");
            request.onupgradeneeded = function (e) {
              e.target.transaction.abort();
              dbExists = false;
            }

            request.onsuccess = function (e) {
              if (dbExists) {
                if (path == '/account/jobseeker' || path == '/account/jobseeker?utm_source=TWA') {
                  contents = '<div id="top" class="body-content container pt-75-gt-xs pt-65-xs" style="min-height: 550px;"><div class="mb15 pt0 pb0 pl0 pr0 mat-card-gt-xs"><div class="layout-row layout-wrap list-dashboard-actions tiles"><div class="mat-ripple flex flex-50-xs" tabindex="0" title="Edit Resume"><div><icon-svg icon="assignment_ind"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.22 0 .41.1.55.25.12.13.2.31.2.5 0 .41-.34.75-.75.75s-.75-.34-.75-.75c0-.19.08-.37.2-.5.14-.15.33-.25.55-.25zM19 19H5V5h14v14zM12 6c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-6 6.47V18h12v-1.53c0-2.5-3.97-3.58-6-3.58s-6 1.07-6 3.58zM8.31 16c.69-.56 2.38-1.12 3.69-1.12s3.01.56 3.69 1.12H8.31z"></path></svg></span></icon-svg><div class="title">Resume</div></div></div><div title="Search Jobs" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="search"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span></icon-svg><div class="title">Jobs</div></div></div><div title="My Applications" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="content_copy"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span></icon-svg><div class="title">Applications</div></div></div><div title="My Interviews" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="event"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z"></path></svg></span></icon-svg><div class="title">Interviews</div></div></div><div title="Messages" class="mat-ripple flex flex-50-xs" tabindex="0"><div><!----><icon-svg icon="chat"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"></path></svg></span></icon-svg><div class="title">Messages</div></div></div><div title="Read" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="read"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M12 9c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 8.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zm7 5.58c-2.53.34-4.93 1.3-7 2.82-2.06-1.52-4.47-2.49-7-2.83v-6.95c2.1.38 4.05 1.35 5.64 2.83L12 14.28l1.36-1.27c1.59-1.48 3.54-2.45 5.64-2.83v6.95z"></path></svg></span></icon-svg><div class="title">Read</div></div></div><div title="Learn" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="learn"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm10 1.09v2L14.5 15l3.5-1.91v-2L14.5 13 11 11.09zM14.5 6L9 9l5.5 3L20 9l-5.5-3z"></path></svg></span></icon-svg><div class="title">Learn</div></div></div><div title="Job Notifications" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="notifications-edit"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><rect fill="none" height="24" width="24"></rect><g><path d="M17.58,6.25l1.77,1.77L14.37,13H12.6v-1.77L17.58,6.25z M20.85,5.81l-1.06-1.06c-0.2-0.2-0.51-0.2-0.71,0l-0.85,0.85 l1.77,1.77l0.85-0.85C21.05,6.32,21.05,6,20.85,5.81z M18,12.2V17h2v2H4v-2h2v-7c0-2.79,1.91-5.14,4.5-5.8V3.5 C10.5,2.67,11.17,2,12,2s1.5,0.67,1.5,1.5v0.7c0.82,0.21,1.57,0.59,2.21,1.09l-1.43,1.43C13.64,6.26,12.85,6,12,6 c-2.21,0-4,1.79-4,4v7h8v-2.8L18,12.2z M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z"></path></g></svg></span></icon-svg><div class="title">Notifications</div></div></div></div></div></div>';
                } else if (path == '/account/employer') {
                  contents = '<div id="top" class="body-content container pt-75-gt-xs pt-65-xs" style="min-height: 550px;"><div class="mb15 pt0 pb0 pl0 pr0 mat-card-gt-xs"><div class="layout-row layout-wrap list-dashboard-actions tiles"><div title="Post a New Job" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="assignment"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"></path></svg></span></icon-svg><div class="title">Post Job</div></div></div><div title="My Jobs" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="list"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z"></path></svg></span></icon-svg><div class="title">My Jobs</div></div></div><div title="View Applicants" class="mat-ripple flex flex-50-xs" tabindex="0"><div><span class="badge">633</span><!----><icon-svg icon="recent_actors"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M21 5h2v14h-2zm-4 0h2v14h-2zm-3 0H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-1 12H3V7h10v10z"></path><circle cx="8" cy="9.94" r="1.95"></circle><path d="M11.89 15.35c0-1.3-2.59-1.95-3.89-1.95s-3.89.65-3.89 1.95V16h7.78v-.65z"></path></svg></span></icon-svg><div class="title">Applicants</div></div></div><div title="View Scheduled Interviews" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="events"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M7 11h2v2H7v-2zm14-5v14c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2l.01-14c0-1.1.88-2 1.99-2h1V2h2v2h8V2h2v2h1c1.1 0 2 .9 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z"></path></svg></span></icon-svg><div class="title">Interviews</div></div></div><div title="View Scheduled Test &amp; Questionnaires" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="quiz"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><g><path d="M4,6H2v14c0,1.1,0.9,2,2,2h14v-2H4V6z M20,2H8C6.9,2,6,2.9,6,4v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4 C22,2.9,21.1,2,20,2z M20,16H8V4h12V16z M13.51,10.16c0.41-0.73,1.18-1.16,1.63-1.8c0.48-0.68,0.21-1.94-1.14-1.94 c-0.88,0-1.32,0.67-1.5,1.23l-1.37-0.57C11.51,5.96,12.52,5,13.99,5c1.23,0,2.08,0.56,2.51,1.26c0.37,0.6,0.58,1.73,0.01,2.57 c-0.63,0.93-1.23,1.21-1.56,1.81c-0.13,0.24-0.18,0.4-0.18,1.18h-1.52C13.26,11.41,13.19,10.74,13.51,10.16z M12.95,13.95 c0-0.59,0.47-1.04,1.05-1.04c0.59,0,1.04,0.45,1.04,1.04c0,0.58-0.44,1.05-1.04,1.05C13.42,15,12.95,14.53,12.95,13.95z"></path></g></svg></span></icon-svg><div class="title">Tests</div></div></div><div title="Messages" class="mat-ripple flex flex-50-xs" tabindex="0"><div><!----><icon-svg icon="chat"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"></path></svg></span></icon-svg><div class="title">Messages</div></div></div><div title="Search Resumes Database" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="people"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"></path></g></svg></span></icon-svg><div class="title">Find People</div></div></div><!----><div title="Upgrade Now" class="mat-ripple flex flex-50-xs" tabindex="0"><div><icon-svg icon="cart" class="changing-color"><span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="svg-icon"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-8.9-5h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4l-3.87 7H8.53L4.27 2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2z"></path></svg></span></icon-svg><div class="title">Buy Now!</div></div></div></div></div></div>';
                }

                if (contents != '') {
                  document.getElementById("placeholder").innerHTML = contents;
                }
              } else {
                indexedDB.deleteDatabase("ngStorage");
              }
            };
          }
        }
      }
    </script>
  </app-root>
  <script>
    function addAdsenseScriptTag() {
      var imported = document.createElement('script');
      imported.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      imported.setAttribute("type", "text/javascript");
      imported.defer = true;
      //imported.async = true;
      document.body.appendChild(imported);
    }

    function isAccountURL() {
      return window.location.pathname.startsWith('/account/');
    }

    function isScrollBehaviorSupported() {
      return 'scrollBehavior' in document.documentElement.style;
    }

    function addSmoothScrollPollyfill() {
      var imported = document.createElement('script');
      imported.src = 'https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js';
      imported.setAttribute("type", "text/javascript");
      imported.defer = true;
      //imported.async = true;
      document.body.appendChild(imported);
    }

    function loadSmoothScrollScript() {
      if (!isScrollBehaviorSupported()) {
        addSmoothScrollPollyfill();
      }
    }

    function addScripts() {
      //Adsense
      if (!isAccountURL()) {
        addAdsenseScriptTag();
      }

      //Google Tag Manager
      (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.defer = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-NJFTK74');
    }



    function addGoogleTagManagerTag() {
      (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.defer = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-NJFTK74');
    }


    if ('requestIdleCallback' in window) {
      // Use requestIdleCallback to schedule work.
      window.requestIdleCallback(addScripts);

    } else {
      addScripts();
    }

  </script>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NJFTK74" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
</body>
</html>

🔥 Exception or Error


(node:13504) [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:13504) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:13504) [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)

🌍 Your Environment



Angular CLI: 12.0.0-next.9
Node: 14.16.0
OS: win32 x64

Angular: 12.0.0-next.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                          Version
----------------------------------------------------------
@angular-devkit/architect        0.1102.9
@angular-devkit/build-angular    12.0.0-next.9
@angular-devkit/core             12.0.0-next.8
@angular-devkit/schematics       12.0.0-next.8
@angular/cdk                     12.0.0-next.6
@angular/fire                    6.1.4
@angular/google-maps             12.0.0-next.6
@angular/material                12.0.0-next.6
@angular/pwa                     0.1200.0-next.8
@nguniversal/aspnetcore-engine   11.2.1
@nguniversal/builders            11.2.1
@nguniversal/common              11.2.1
@schematics/angular              12.0.0-next.8
rxjs                             6.6.7
typescript                       4.2.3

The text was updated successfully, but these errors were encountered:

clydin · 2021-04-15T16:13:29Z

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.

naveedahmed1 · 2021-04-15T16:20:13Z

@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

naveedahmed1 · 2021-04-15T16:24:07Z

@clydin should I add you to the private repo?

alan-agius4 · 2021-04-16T07:59:18Z

The Uncaught Error: Automatic publicPath is not supported in this browser is caused by an older version of mini-css-extract-plugin, see webpack-contrib/mini-css-extract-plugin#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

naveedahmed1 · 2021-04-16T16:59:37Z

Thats strange, I removed node_modules and installed packages again yet no success.

alan-agius4 · 2021-04-16T17:05:30Z

Which npm version are you using? Can you run npm ls mini-css-extract-plugin and provide the output?

naveedahmed1 · 2021-04-16T17:42:17Z

npm version :6.14.11

Output of npm ls mini-css-extract-plugin is:
-- (empty)

naveedahmed1 · 2021-04-16T17:46:46Z

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

naveedahmed1 · 2021-04-16T18:53:29Z

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

clydin · 2021-04-19T17:20:22Z

As an experiment, can you try adding a deployUrl setting with the value of an empty string ("")?

naveedahmed1 · 2021-04-20T15:21:29Z

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.

clydin · 2021-04-20T15:32:58Z

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.

naveedahmed1 · 2021-04-20T15:57:18Z

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

naveedahmed1 · 2021-04-20T18:24:33Z

Few more things to bring in your notice, after update:

Compilation takes little longer than previous version
Page is not automatically refreshed, after we make any changes to the app and app is recompiled.

alan-agius4 · 2021-04-22T08:58:51Z

@naveedahmed1, can you please try out the latest RC version?

vdumbrav · 2021-04-22T12:16:45Z

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

naveedahmed1 · 2021-04-22T18:57:18Z

@alan-agius4 I can confirm although DeprecationWarning is still there but the issue has been resolved and app is working fine.

alan-agius4 · 2021-04-26T18:21:08Z

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.

angular-automatic-lock-bot · 2021-06-07T08:36:50Z

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

alan-agius4 added area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix labels Apr 15, 2021

ngbot bot modified the milestone: Backlog Apr 15, 2021

alan-agius4 closed this as completed Apr 26, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App broken after 12.0.0-next.9 - MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead #20544

App broken after 12.0.0-next.9 - MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead #20544

naveedahmed1 commented Apr 15, 2021

clydin commented Apr 15, 2021

naveedahmed1 commented Apr 15, 2021

naveedahmed1 commented Apr 15, 2021

alan-agius4 commented Apr 16, 2021

naveedahmed1 commented Apr 16, 2021

alan-agius4 commented Apr 16, 2021 •

edited

Loading

naveedahmed1 commented Apr 16, 2021

naveedahmed1 commented Apr 16, 2021 •

edited

Loading

naveedahmed1 commented Apr 16, 2021 •

edited

Loading

clydin commented Apr 19, 2021

naveedahmed1 commented Apr 20, 2021

clydin commented Apr 20, 2021 •

edited

Loading

naveedahmed1 commented Apr 20, 2021

naveedahmed1 commented Apr 20, 2021

alan-agius4 commented Apr 22, 2021

vdumbrav commented Apr 22, 2021

naveedahmed1 commented Apr 22, 2021

alan-agius4 commented Apr 26, 2021

angular-automatic-lock-bot bot commented Jun 7, 2021

App broken after 12.0.0-next.9 - MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead #20544

App broken after 12.0.0-next.9 - MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead #20544

Comments

naveedahmed1 commented Apr 15, 2021

🐞 Bug report

Command (mark with an x)

Is this a regression?

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

clydin commented Apr 15, 2021

naveedahmed1 commented Apr 15, 2021

naveedahmed1 commented Apr 15, 2021

alan-agius4 commented Apr 16, 2021

naveedahmed1 commented Apr 16, 2021

alan-agius4 commented Apr 16, 2021 • edited Loading

naveedahmed1 commented Apr 16, 2021

naveedahmed1 commented Apr 16, 2021 • edited Loading

naveedahmed1 commented Apr 16, 2021 • edited Loading

clydin commented Apr 19, 2021

naveedahmed1 commented Apr 20, 2021

clydin commented Apr 20, 2021 • edited Loading

naveedahmed1 commented Apr 20, 2021

naveedahmed1 commented Apr 20, 2021

alan-agius4 commented Apr 22, 2021

vdumbrav commented Apr 22, 2021

naveedahmed1 commented Apr 22, 2021

alan-agius4 commented Apr 26, 2021

angular-automatic-lock-bot bot commented Jun 7, 2021

Command (mark with an `x`)

alan-agius4 commented Apr 16, 2021 •

edited

Loading

naveedahmed1 commented Apr 16, 2021 •

edited

Loading

naveedahmed1 commented Apr 16, 2021 •

edited

Loading

clydin commented Apr 20, 2021 •

edited

Loading