Unable to get passed Okta sign in page on my Angular SPA

Hi,
I connected my Angular app to Okta login functionality for SPA.

I followed along this guide and when the user clicks on the login button made from the guide, the redirect to the Okta login page works well. Then the user enters the credentials and clicks login. Here, the application is loading until it crashes (site can’t be reached). I feel like this may be due to my configuration of the callback route, or redirect URI but have been unable to find a solution.

import { OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuthModule } from '@okta/okta-angular';
import { OktaCallbackComponent } from '@okta/okta-angular';
import { OktaAuthGuard } from '@okta/okta-angular';
import { ProfileComponent } from './profile/profile.component';
import { OktaLoginRedirectComponent } from '@okta/okta-angular';
import { LoginComponent } from './login/login.component';

const CALLBACK_PATH = 'login/callback';
const config = {
  clientId: '0f52ad1bksljVESOw5d6',
  issuer: 'https://dev-3761672.okta.com/oauth2/default',
  redirectUri: 'http://localhost:44311/login/callback',
  scopes: ['openid', 'profile', 'email'],
  pkce: true
}

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    AuthorWithBooksComponent,
    AuthorsComponent,
    BooksComponent,
    ProfileComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    OktaAuthModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'author-with-books/:id', component: AuthorWithBooksComponent },
      { path: 'authors', component: AuthorsComponent },
      { path: 'login', component: LoginComponent },
      { path: 'books', component: BooksComponent, canActivate: [OktaAuthGuard] },
      { path: CALLBACK_PATH, component: OktaCallbackComponent },
      { path: 'profile', component: ProfileComponent }
    ])
  ],
  providers: [
    {
      provide: OKTA_CONFIG, useValue: config
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OktaAuthService } from '@okta/okta-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';
  isAuthenticated: boolean;

  constructor(public oktaAuth: OktaAuthService) {
    // Subscribe to authentication state changes
    this.oktaAuth.$authenticationState.subscribe(
      (isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
    );
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
  }

  login() {
    this.oktaAuth.signInWithRedirect();
  }
}

app.component.html

<body>
  <app-nav-menu></app-nav-menu>
  <div class="container">
    <button *ngIf="!isAuthenticated" (click)="login()"> Login </button>
    <router-outlet></router-outlet>
  </div>
</body>

My general settings


What the dev tools shows

okta-help-3|690x387

Let me know if you need to see any other code fragments or setup.

Thanks much for your help.

@smar It could be easier to discuss your code in a case. Could you open a support ticket through an email to support@okta.com with this issue. One of our Developer Support Engineers will take the case and narrow down the cause of the issue.