How to Access ASP.NET Web API Backend with Mobile Phone Android Browser using Angular Local Host

Question

I am building my first website (total newbie) using Angular and ASP.NET Web API. I can access my web app on localhost 4200 and using 192.168.100.2:4200 on my pc browser.

But when I try to log on the same localhost with a Mobile Phone Android Browser, It returns a server error.

Following are the commands I tried

ng serve --host 192.168.100.2
ng serve --host 192.168.100.2 --disable-host-check
ng serve --host 0.0.0.0

This is my Login method on the Component

  login(){
    if(this.loginForm.valid){
      const record = this.loginForm.getRawValue();
      console.log(record);
      
      this.authService.login({
        username: record.userName,
        password: record.password,
      }).subscribe({
        next:(data: any) => {
                    this.authService.authToken = JSON.parse(data).token;
          console.log("Orig Token: ", data);
          console.log("Parsed Token: ", this.authService.authToken);
          console.log("Parsed Token (Subject): ", this.authService.authToken.split('.')[1]);
          console.log("JSON (after atob) ",this.authService.atob);
          console.log("Object (Payload): ",this.authService.payLoad);
          console.log("User id: ",this.authService.userID);
          console.log("Name: ",this.authService.userName);
          console.log("Modules: ",this.authService.accessibleModulesOfUser);

          this.router.navigateByUrl('');
          this.toastr.success("Welcome Back.")
        },
        error: (e) => {

                    if (e.status == 0) {
                        // this.msgs.push({ severity: 'warn', detail: 'Server is not available. Please try again later.' });
            // this.toastr.error("Server is not available. Please try again later")
            this.toastr.error("Server is not available. Please try again later")
                    }
                    else if (e.status == ApiCallStatusCodes.UNAUTHORIZED) {
                        // this.msgs.push({ severity: 'error', detail: err.error });
            // console.log(e);
            this.toastr.error(e.error)
                    }
                    else {
                        // this.msgs.push({ severity: 'warn', detail: err.error });
            // console.log(e);
            this.toastr.error(e.error)
                    }
        }
      })
    }
    else{
      this.toastr.warning("Enter username and password.")
    }
  }

I already try adding Inbound Rule to my Windows Defender Firewal but it doesnt work.

Also, I modify the CORS in startup of ASP.NET but still has no luck.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "WebAPIv5 v1"));
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(policy => policy.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200", "http://192.168.100.2:4200"));

    app.UseAuthentication();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}