What is the proper way to fix the compilation error after upgrading Angular 7.x to Angular 13.x?

Question

I've a task to upgrade Angular v7.x to v13.x app, i followed the steps as per angular official documentation but getting below issues when executing ng serve

Samples -------

Error: src/app/app.component.ts:1:46 - error TS2792: Cannot find module '@angular/core'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 1 import { Component, OnDestroy, OnInit } from '@angular/core'; ~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:2:58 - error TS2792: Cannot find module '@angular/router'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 2 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router'; ~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:3:48 - error TS2792: Cannot find module '@my-custom-lib/ng-common'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 3 import { LANG, AppLogger} from '@my-custom-lib/ng-common'; ~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:4:70 - error TS2792: Cannot find module '@my-custom-lib-2/ng-common'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 4 import { Action, PermissionsService, PreventNavigationService } from '@my-custom-lib-2/ng-common'; ~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:5:34 - error TS2792: Cannot find module '@ngx-translate/core'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 5 import { TranslateService } from '@ngx-translate/core'; ~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.ts:7:56 - error TS2792: Cannot find module 'rxjs/operators'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 7 import { filter, map, mergeMap, take, takeWhile } from 'rxjs/operators'; import { triggerAsyncId } from 'async_hooks'

Current tsConfig.json

{
   "compilerOptions": {
     "outDir": "dist/out-tsc",
     "target": "es5",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "typeRoots": [
       "node_modules/@types"
     ],
     "experimentalDecorators": true
   },
   "angularCompilerOptions": {
     "strictTemplates": true,
     "preserveWhitespaces": true,
   },
 }

SO answers i tried ------------------

1.

{
  "compilerOptions": {
    "outDir": "dist/out-tsc",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "experimentalDecorators": true,
    "moduleResolution": "node" // this gives me below error
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "preserveWhitespaces": true,
  },
}

Generating browser application bundles (phase: setup)...(node:10204) UnhandledPromiseRejectionWarning: Error: The target entry-point "@my-custom-lib/ng-common" has missing dependencies:

• @angular/forms/src/directives/control_value_accessor

• @angular/core/src/type

  at TargetedEntryPointFinder.findEntryPoints (/node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:941:13) at /node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1264:33 at SingleProcessExecutorSync.doExecute (/node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1573:23) at /node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1594:35 at SyncLocker.lock (/node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1765:14) at SingleProcessExecutorSync.execute (/node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1594:19) at mainNgcc (/node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:2103:19) at Module.process (/node_modules/@angular/compiler-cli/bundles/ngcc/index.js:34:10) at NgccProcessor.processModule (node_modules@ngtools\webpack\src\ngcc_processor.js:171:27) at node_modules@ngtools\webpack\src\ivy\host.js:150:18

2. name aliases

{
   "compilerOptions": {
     "outDir": "dist/out-tsc",
     "target": "es5",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "typeRoots": [
       "node_modules/@types"
     ],
     "experimentalDecorators": true,
     "baseUrl": "./",
     "paths": {
       "@shared/*" : ["src/app/shared/*"],
       "@core/*" : ["src/app/core/*"]
     }
   },
   "angularCompilerOptions": {
     "strictTemplates": true,
     "preserveWhitespaces": true,
   },
 }





 /* import { CoreModule } from './core/core.module';
    import { SharedModule } from './shared/shared.module'; */
    
    import { CoreModule } from '@core/core.module';
    import { SharedModule } from '@shared/shared.module';
    
    but im seeing  'CoreModule' does not appear to be an NgModule class.(-996002)
    core.module.ts(33, 3): Is it missing an @NgModule annotation?

even after changing like, getting same error

Error: src/app/app.component.ts:1:46 - error TS2792: Cannot find module '@angular/core'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? 1 import { Component, OnDestroy, OnInit } from '@angular/core'; ~~~~~~~~~~~~~~~

My local App and Node version

Angular CLI: 13.3.8
Node: 14.17.3
Package Manager: npm 8.13.2


Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.8
@angular-devkit/build-angular   13.3.8
@angular-devkit/core            13.3.8
@angular-devkit/schematics      13.3.8
@angular/cdk                    7.3.5
@angular/cli                    13.3.8
@angular/http                   7.2.10
@schematics/angular             13.3.8
rxjs                            6.6.7
typescript                      4.6.4