title: Angular upgrade issues
body: <p>We are trying to upgrade angular version from 7.2 to 12.x. We have followed steps on the document available on angular.io. We have updated our module libraries also with the latest ones. Now when we started application we encountered the errors as below:</p>
  <pre><code>./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0&amp;sockPath=/sockjs-node - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
  RangeError: Maximum call stack size exceeded
      at MetadataDtsModuleScopeResolver.resolve (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\dependency.js:47:69)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:515:51)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:365:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
  
  [36m./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
  RangeError: Maximum call stack size exceeded
      at MetadataDtsModuleScopeResolver.resolve (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\dependency.js:47:69)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:515:51)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:365:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
  
  ./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
  RangeError: Maximum call stack size exceeded
      at MetadataDtsModuleScopeResolver.resolve (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\dependency.js:47:69)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:515:51)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:365:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
      at LocalModuleScopeRegistry.getScopeOfModuleReference (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:257:44)
      at LocalModuleScopeRegistry.getExportedScope (D:\workspace\1.3-uiux\NextGeneUI\nextgeneui-app\node_modules\@angular\compiler-cli\src\ngtsc\scope\src\local.js:519:29)
  
  
  
  ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  
  
  × Failed to compile.
  </code></pre>
  <hr />
  <p>We have tried deleting node_modules and package-lock.json and reinstalling node_modules, but these didn't help.</p>
  <p>Please help.</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;nextgeneui-app&quot;,
    &quot;version&quot;: &quot;1.3.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
      &quot;test&quot;: &quot;ng test&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/cdk&quot;: &quot;^12.2.13&quot;,
      &quot;@angular/common&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/compiler&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/core&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/forms&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~12.2.0&quot;,
      &quot;@angular/router&quot;: &quot;~12.2.0&quot;,
      &quot;@ng-idle/core&quot;: &quot;^11.1.0&quot;,
      &quot;@ng-idle/keepalive&quot;: &quot;^11.0.3&quot;,
      &quot;@ng-select/ng-select&quot;: &quot;^7.4.0&quot;,
      &quot;@ngu/carousel&quot;: &quot;^4.0.0&quot;,
      &quot;@types/backbone&quot;: &quot;^1.3.43&quot;,
      &quot;@types/dagre&quot;: &quot;^0.7.46&quot;,
      &quot;@types/jquery&quot;: &quot;^3.5.9&quot;,
      &quot;@types/lodash&quot;: &quot;^4.14.123&quot;,
      &quot;@types/underscore&quot;: &quot;^1.11.4&quot;,
      &quot;angular-dual-listbox&quot;: &quot;^6.0.0&quot;,
      &quot;angular-gridster2&quot;: &quot;^12.1.1&quot;,
      &quot;angular-plotly.js&quot;: &quot;^1.3.2&quot;,
      &quot;angular-resize-event&quot;: &quot;^3.0.2&quot;,
      &quot;angular2-highlight-js&quot;: &quot;^9.0.0&quot;,
      &quot;apexcharts&quot;: &quot;^3.30.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.6.1&quot;,
      &quot;bootstrap-colorpicker&quot;: &quot;^3.0.3&quot;,
      &quot;bootstrap-duallistbox&quot;: &quot;^3.0.6&quot;,
      &quot;bootstrap-markdown&quot;: &quot;^2.10.0&quot;,
      &quot;bootstrap-progressbar&quot;: &quot;^0.9.0&quot;,
      &quot;bootstrap-slider&quot;: &quot;^10.6.1&quot;,
      &quot;bootstrap-tagsinput&quot;: &quot;^0.7.1&quot;,
      &quot;bootstrap-timepicker&quot;: &quot;^0.5.2&quot;,
      &quot;chart.js&quot;: &quot;^2.7.2&quot;,
      &quot;d3&quot;: &quot;^5.9.1&quot;,
      &quot;d3-graphviz&quot;: &quot;^2.6.1&quot;,
      &quot;d3-hexbin&quot;: &quot;^0.2.2&quot;,
      &quot;diff2html&quot;: &quot;^3.4.13&quot;,
      &quot;dropzone&quot;: &quot;^6.0.0-beta.2&quot;,
      &quot;easy-pie-chart&quot;: &quot;^2.1.7&quot;,
      &quot;file-saver&quot;: &quot;^2.0.2&quot;,
      &quot;highlight.js&quot;: &quot;^11.3.1&quot;,
      &quot;html2canvas&quot;: &quot;^1.3.3&quot;,
      &quot;html2pdf.js&quot;: &quot;^0.10.1&quot;,
      &quot;jointjs&quot;: &quot;^3.4.4&quot;,
      &quot;jquery&quot;: &quot;3.3.1&quot;,
      &quot;jquery-knob&quot;: &quot;^1.2.11&quot;,
      &quot;jquery-ui-npm&quot;: &quot;^1.12.0&quot;,
      &quot;jquery-validation&quot;: &quot;^1.19.0&quot;,
      &quot;jquery.maskedinput&quot;: &quot;^1.4.1&quot;,
      &quot;js-yaml&quot;: &quot;^4.1.0&quot;,
      &quot;ng-apexcharts&quot;: &quot;^1.6.0&quot;,
      &quot;ng-circle-progress&quot;: &quot;^1.6.0&quot;,
      &quot;ng-dynamic-component&quot;: &quot;^10.1.0&quot;,
      &quot;ng-multiselect-dropdown&quot;: &quot;^0.3.7&quot;,
      &quot;ng2-eonasdan-datetimepicker&quot;: &quot;^0.1.3&quot;,
      &quot;ng2-search-filter&quot;: &quot;^0.5.1&quot;,
      &quot;ngx-bootstrap&quot;: &quot;^7.1.0&quot;,
      &quot;ngx-color-picker&quot;: &quot;^11.0.0&quot;,
      &quot;ngx-cookie-service&quot;: &quot;^2.2.0&quot;,
      &quot;ngx-json-viewer&quot;: &quot;^2.4.0&quot;,
      &quot;ngx-logger&quot;: &quot;^5.0.4&quot;,
      &quot;ngx-papaparse&quot;: &quot;^5.0.0&quot;,
      &quot;papaparse&quot;: &quot;^5.3.1&quot;,
      &quot;plotly.js&quot;: &quot;^2.8.3&quot;,
      &quot;primeicons&quot;: &quot;^5.0.0&quot;,
      &quot;primeng&quot;: &quot;^12.2.3&quot;,
      &quot;redux&quot;: &quot;^4.1.2&quot;,
      &quot;resumablejs&quot;: &quot;^1.1.0&quot;,
      &quot;rxjs&quot;: &quot;~6.6.7&quot;,
      &quot;Select2&quot;: &quot;^3.5.7&quot;,
      &quot;smartadmin-plugins&quot;: &quot;^1.0.22&quot;,
      &quot;tslib&quot;: &quot;^2.3.0&quot;,
      &quot;tslint&quot;: &quot;^6.1.3&quot;,
      &quot;util&quot;: &quot;^0.12.4&quot;,
      &quot;vis&quot;: &quot;^4.21.0-EOL&quot;,
      &quot;webpack&quot;: &quot;^5.65.0&quot;,
      &quot;xlsx&quot;: &quot;^0.17.4&quot;,
      &quot;yarn&quot;: &quot;^1.22.17&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;^12.2.14&quot;,
      &quot;@angular/cli&quot;: &quot;^12.2.14&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~12.2.0&quot;,
      &quot;@ngtools/webpack&quot;: &quot;^12.2.14&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.10.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;jasmine-core&quot;: &quot;~3.10.0&quot;,
      &quot;karma&quot;: &quot;~6.3.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;~1.7.0&quot;,
      &quot;typescript&quot;: &quot;~4.2.4&quot;
    }
  }
  </code></pre>
  <p><strong>tsconfig.json</strong></p>
  <p>/* To learn more about this file see: <a href="https://angular.io/config/tsconfig" rel="nofollow noreferrer">https://angular.io/config/tsconfig</a>. */</p>
  <pre><code>{
    &quot;compileOnSave&quot;: false,
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: false,
      &quot;downlevelIteration&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;importHelpers&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;strict&quot;: false,
      &quot;noPropertyAccessFromIndexSignature&quot;: true,
      &quot;noImplicitReturns&quot;: false,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;emitDecoratorMetadata&quot;: true,    
      &quot;allowJs&quot;: true,
        &quot;suppressImplicitAnyIndexErrors&quot;: true,
        &quot;allowSyntheticDefaultImports&quot;: true,
        &quot;skipLibCheck&quot;: true,
      &quot;target&quot;: &quot;es2015&quot;,
      &quot;esModuleInterop&quot;: true,
      &quot;module&quot;: &quot;es2020&quot;,
          &quot;typeRoots&quot;: [ 
                &quot;./types&quot;, &quot;./node_modules/@types&quot;
          ],
          &quot;lib&quot;: [
              &quot;es2018&quot;,
              &quot;dom&quot;
          ]
      },
      &quot;angularCompilerOptions&quot;: {
      &quot;enableI18nLegacyMessageIdFormat&quot;: false,
        &quot;fullTemplateTypeCheck&quot;: true,
      &quot;strictInjectionParameters&quot;: true,
      &quot;strictInputAccessModifiers&quot;: true,
      &quot;strictTemplates&quot;: true,
        &quot;strictPropertyInitialization&quot;: false,
      &quot;enableIvy&quot;: false
    }
  }
  </code></pre>