Upgrading to Nebular 9 results in "ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk src_app_pages_pages_module_ts failed."

[argupta23]

Issue type

I'm submitting a ... (check one with "x")

• [x ] bug report
• [ ] feature request

Issue description

Current behavior: Upgrading from Angular 12/ Nebular 8 to Angular 13 and nebular 9 results in Webpack missing chunks

Expected behavior: upgrade should be seamless

Steps to reproduce:

Related code:

app-routing.module.ts

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { AuthGuard } from "./_guard/auth.guard";
import { LogoutComponent } from "./session/logout/logout.component";
import { LoginComponent } from './session/login/login.component';

export const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "logout",
    component: LogoutComponent
  },
  {
    path: 'pages',
    canActivate: [AuthGuard],
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' }, // prefix
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  enableTracing: true,
  // enableTracing: /localhost/.test(document.location.host)
  // useHash: true,
  // onSameUrlNavigation: 'reload' //'ignore'  // 
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

pages.module.ts

import { RouterModule, Routes } from "@angular/router";
import { NgModule } from "@angular/core";

import { PagesComponent } from "./pages.component";
import { CommonDashbComponent } from "./dashboard/commondashb/commondashb.component";
import { Resolver } from "../session/resolver";

// https://github.com/Ambitiont109/IMS-Admin-Teacher/blob/master/src/app/pages/admin/admin-routing.module.ts

const routes: Routes = [
  {
    path: "",
    component: PagesComponent,
    data: { breadcrumb: 'HOME', },
    children: [
      {
        path: "commondashb",
        component: CommonDashbComponent,
        data: {
          breadcrumb: 'Default Dashboard'
        }
      },

      {
        path: '',
        redirectTo: 'commondashb',
        pathMatch: 'full',
      },
      {
        path: "**",
        redirectTo: "commondashb",
        // pathMatch: "full",
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule { }

Other information:

npm, node, OS, Browser

Node, npm: `14.18.1` and `6.14.15`
OS: Ubuntu 20
Browser: Chrome

Angular, 13.1.0 Nebular 9.0.0

  "dependencies": {
    "@ag-grid-community/all-modules": "^26.2.0",
    "@ag-grid-community/angular": "^26.2.0",
    "@angular/animations": "^13.1.0",
    "@angular/common": "^13.1.0",
    "@angular/compiler": "^13.1.0",
    "@angular/core": "^13.1.0",
    "@angular/elements": "^13.1.0",
    "@angular/flex-layout": "^13.0.0-beta.36",
    "@angular/forms": "^13.1.0",
    "@angular/google-maps": "^13.1.0",
    "@angular/localize": "^13.1.0",
    "@angular/platform-browser": "^13.1.0",
    "@angular/platform-browser-dynamic": "^13.1.0",
    "@angular/pwa": "^13.1.1",
    "@angular/router": "^13.1.0",
    "@angular/service-worker": "^13.1.0",
    "@nebular/date-fns": "^9.0.0",
    "@nebular/moment": "^9.0.0",
    "@nebular/security": "^9.0.0",
    "@nebular/theme": "^9.0.0",
    "moment-timezone": "^0.5.34",
    "popper.js": "^1.16.0",
    "rxjs": "6.6.7",
    "rxjs-compat": "^6.6.3",
    "socket.io-client": "^4.2.0",
    "svgsaver": "^0.9.0",
    "tinymce": "^5.9.2",
    "ts-essentials": "^7.0.1",
    "tslib": "^2.0.0",
    "typeface-exo": "^1.1.13",
    "webpack": "^5.65.0",
    "webpack-dev-server": "^4.6.0",
    "webpack-sources": "^3.2.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.1.1",
    "@angular-devkit/core": "^13.1.1",
    "@angular/cdk": "^13.1.0",
    "@angular/cli": "^13.1.1",
    "@angular/compiler-cli": "^13.1.0",
    "@angular/language-service": "^13.1.0",
    "@types/jasmine": "^3.9.1",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "babel-polyfill": "^6.26.0",
    "codelyzer": "^6.0.0",
    "conventional-changelog-cli": "^2.1.1",
    "eslint": "^7.27.0",
    "husky": "^7.0.2",
    "jasmine-core": "^3.9.0",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "protractor": "~7.0.0",
    "resize-observer-polyfill": "^1.5.1",
    "rimraf": "^3.0.2",
    "source-map-explorer": "^2.5.2",
    "stylelint": "^13.7.0",
    "ts-node": "10.1",
    "tslint": "^6.1.0",
    "typescript": "^4.4.4",
    "webpack-bundle-analyzer": "^4.5.0"
  }

tsconfig.js

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "module": "es2020",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "dom"
    ],
    "paths" : {
      "stream": ["./node_modules/stream-browserify"],
      "buffer": ["./node_modules/buffer"],
    }
    // "plugins": [
    //   { "name": "tslint-language-service"}
    // ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": false
  }
}

[hexdecimal16]

I think nebular 9 is not stable yet best option is fallback to 8