Blank white screen after updating Angular from 7.3 to 13

I really hope someone can help us.
I am new to Angular and got a project inherited.
I have an Angular project with version 7.3, which causes us troubles when we really try to work with it or to update it.
With version 7.3 the project is running so long as you dont add any packages or delete the node-modules file and run "npm i" for installing all dependencies/packages again. The results in these cases are a blank white screen when running the application.
So now we considered it a better idea to update the project to the newer version 13 of anuglar, so everything is up to date and that the handling will maybe be better. The node version is 16.3.0, npm is version 8.1.3.

1. So I followed the instructions of the angular update guide: https://update.angular.io/
2. I deleted node_modules and package-lock.json serveral times an did "npm i --legacy-peer-deps" after that
3. I deleted "es5BrowserSupport": true in angular.json
4. I added "enableIvy": true, "fullTemplateTypeCheck": false under "angularCompilerOptions" in the tsconfig.json
5. I added types/jest
6. In angular.modules I added "CUSTOM_ELEMENTS_SCHEMA" under Ng-Modules.schema

My current package.json file:

"name": "webapp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"build": "ng serve",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"type": "commonjs",
"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/cdk": "~13.0.0",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "^13.0.0",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~13.0.0",
"@angular/material": "^13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "^13.0.0",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"angular-plotly.js": "^1.1.0",
"angular-resizable-element": "^4.0.0",
"angular-resize-element": "^1.2.0",
"bootstrap": "^5.1.3",
"core-js": "^3.19.1",
"express": "^4.16.4",
"http-server": "^14.0.0",
"lodash": "^4.17.21",
"material-design-icons": "^3.0.1",
"mongoose": "^5.4.11",
"ng-sidebar": "^8.0.0",
"ngx-bootstrap": "^3.2.0",
"plotly.js": "^1.45.2",
"raphael": "^2.2.8",
"rxjs": "~6.6.7",
"tslib": "^1.14.1",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "13.0.0",
"@angular-devkit/build-angular": "^13.0.1",
"@angular/cli": "^13.0.1",
"@angular/compiler-cli": "^13.0.0",
"@angular/language-service": "~13.0.0",
"@types/hammerjs": "^2.0.40",
"@types/jasmine": "~3.10.2",
"@types/jasminewd2": "~2.0.3",
"@types/jest": "^27.0.3",
"@types/node": "^8.9.5",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.7",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"process": "^0.11.10",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "^5.11.0",
"typescript": ">=4.4.0 <4.5.0",
"webpack": "~5.64.4",
"webpack-cli": "~4.9.1",
"webpack-dev-server": "~4.5.0"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.0.",
"main": "index.js",
"author": "",
"license": "ISC"
}


My current tsconfig.json file:

{
"compileOnSave": false,
"compilerOptions": {
"resolveJsonModule": true,
"esModuleInterop": true,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"types" : ["node", "jest"],
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]


},
"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": false
}
}


My tsconfig.app.json :

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": [
"node"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}


My tsconfig.spec.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}


My terminal after "ng serve" :

Browser application bundle generation complete.

Initial Chunk Files | Names | Size
main.js | main | 943.59 kB
styles.css, styles.js | styles | 370.39 kB
polyfills.js | polyfills | 164.77 kB
runtime.js | runtime | 1.32 kB

| Initial Total | 1.45 MB

Build at: 2021-12-02T10:14:14.625Z - Hash: d4934bcc2eb62a37 - Time: 27493ms

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/app/pre-analysis.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/app/resizable.directive.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.


The output on the browser console:

[webpack-dev-server] Disconnected! polyfills.js:1:15309
[webpack-dev-server] Trying to reconnect... polyfills.js:1:15309
[webpack-dev-server] Live Reloading enabled. polyfills.js:1:15309
[webpack-dev-server] Warnings while compiling. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/app/pre-analysis.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/app/resizable.directive.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
Uncaught ReferenceError: process is not defined
607 http://localhost:4200/main.js:1
a http://localhost:4200/runtime.js:1
185 http://localhost:4200/main.js:1
a http://localhost:4200/runtime.js:1
J http://localhost:4200/main.js:1
<anonymous> http://localhost:4200/main.js:1
n http://localhost:4200/runtime.js:1
<anonymous> http://localhost:4200/main.js:1


I already tried to "Add only entry points to the 'files' or 'include' properties in your tsconfig." , but I just got errors. Also tried to add a webpack.config.json file , but this didnt work either.

What do I miss?

Thank you for your help, it is really appreciated. Thank you.

Continue reading...