Running my Angular app using localhost works but using IP address something is not working...

I have an Angular v19 app that currently I was starting only localhost on my local machine and everything is working fine. If I run the app using ng serve --host 0.0.0.0 --port 8000 My app starts on these IPs:

➜ Local: http://localhost:8000/
➜ Network: http://172.20.48.1:8000/
➜ Network: http://172.30.208.1:8000/
➜ Network: http://192.168.0.185:8000/


Using localhost everything is working. However using any of the IP (my public local IP is 192.168.0.185) my app is opening a blank page only and I see this in the console:

installHook.js:1 TypeError: Cannot read properties of undefined (reading 'Message')
at main.js:67:68
at _ZoneDelegate.invoke (polyfills.js:300:158)
at Object.onInvoke (chunk-6WFDJY4T.js?v=842b056e:5691:25)
at _ZoneDelegate.invoke (polyfills.js:300:46)
at _ZoneImpl.run (polyfills.js:94:35)
at _NgZone.run (chunk-6WFDJY4T.js?v=842b056e:5572:24)
at _GlobalErrorHandler.handleError (main.js:67:15)
at chunk-6WFDJY4T.js?v=842b056e:23052:53
at _ZoneDelegate.invoke (polyfills.js:300:158)
at _ZoneImpl.run (polyfills.js:94:35)


On the "Network" tab there are no errors

I realized that if I put something in my index.html file before component it is displayed on the screen, but everything what is inside is not visible:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AZ Integrator</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

Continue reading...