Angular App not running because of localization

Question

I have an application which was working till a few days back. The application uses localization. Everything looked perfect. Suddenly it stopped working and started giving me this error.

Uncaught Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
    at push../node_modules/@angular/core/fesm5/core.js._global.$localize (core.js:32666:1)
    at Module../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js (ng-bootstrap.js:70:1)
    at __webpack_require__ (bootstrap:84:1)
    at Module../src/app/app.module.ts (app.component.ts:9:26)
    at __webpack_require__ (bootstrap:84:1)
    at Module../src/main.ts (main.ts:1:1)
    at __webpack_require__ (bootstrap:84:1)
    at Object.0 (main.ts:15:35)
    at __webpack_require__ (bootstrap:84:1)
    at checkDeferredModules (bootstrap:45:1)

I am not sure whether I upgraded the angular cli or not. But once I started getting this error, i uninstalled the angular cli and installed the latest version. But of no use.

Tried executing ng add @angular/localize

Installing packages for tooling via npm.
An unhandled exception occurred: npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @ng-bootstrap/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"9.1.11" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^9.1.1" from the root project
npm ERR!   peer @angular/common@"9.1.11" from @angular/[email protected]
npm ERR!   node_modules/@angular/platform-browser
npm ERR!     peer @angular/platform-browser@"9.1.11" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"^9.1.1" from the root project
npm ERR!     peer @angular/platform-browser@"9.1.11" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser-dynamic
npm ERR!       peer @angular/platform-browser-dynamic@"^9.0.6" from [email protected]     
npm ERR!       node_modules/angular-datatables
npm ERR!         angular-datatables@"^9.0.2" from the root project
npm ERR!       1 more (the root project)
npm ERR!     3 more (@angular/router, angular-datatables, the root project)
npm ERR!   9 more (@angular/platform-browser-dynamic, @angular/router, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.0.0" from @ng-bootstrap/[email protected]
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!   @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^10.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Shah Jahan\AppData\Local\npm-cache\eresolve-report.txt for a full report.  

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Shah Jahan\AppData\Local\npm-cache\_logs\2022-04-30T07_47_17_303Z-debug-0.log
Package install failed, see above.
See "C:\Users\SHAHJA~1\AppData\Local\Temp\ng-fYNTDv\angular-errors.log" for further details.

The log file generated is as follows:

[error] Error: npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @ng-bootstrap/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"9.1.11" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^9.1.1" from the root project
npm ERR!   peer @angular/common@"9.1.11" from @angular/[email protected]
npm ERR!   node_modules/@angular/platform-browser
npm ERR!     peer @angular/platform-browser@"9.1.11" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"^9.1.1" from the root project
npm ERR!     peer @angular/platform-browser@"9.1.11" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser-dynamic
npm ERR!       peer @angular/platform-browser-dynamic@"^9.0.6" from [email protected]
npm ERR!       node_modules/angular-datatables
npm ERR!         angular-datatables@"^9.0.2" from the root project
npm ERR!       1 more (the root project)
npm ERR!     3 more (@angular/router, angular-datatables, the root project)
npm ERR!   9 more (@angular/platform-browser-dynamic, @angular/router, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.0.0" from @ng-bootstrap/[email protected]
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!   @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^10.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"^7.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Shah Jahan\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Shah Jahan\AppData\Local\npm-cache\_logs\2022-04-30T07_47_17_303Z-debug-0.log
Package install failed, see above.
    at Object.installPackage (C:\Devs\Projects\LibMan\LibManWeb\node_modules\@angular\cli\tasks\install-package.js:39:15)
    at AddCommand.run (C:\Devs\Projects\LibMan\LibManWeb\node_modules\@angular\cli\commands\add-impl.js:148:31)
    at async AddCommand.validateAndRun (C:\Devs\Projects\LibMan\LibManWeb\node_modules\@angular\cli\models\command.js:134:28)
    at async Object.runCommand (C:\Devs\Projects\LibMan\LibManWeb\node_modules\@angular\cli\models\command-runner.js:201:24)
    at async default_1 (C:\Devs\Projects\LibMan\LibManWeb\node_modules\@angular\cli\lib\cli\index.js:62:31)

Can anyone help pls?

Answer 1

I suspect that it is trying to install the incorrect version of @angular/localize. It should be installing 9.1.11. Update your package.json to include that version and then run npm install. You may need to delete the node_modules folder first as it may have already installed the incorrect file dependencies.

Note that all @angular/xxx packages are versioned so that the first number matches the angular version you are running. i.e. @angular/localize : 9.1.11 we know it is for Angular 9.