title: Unable to click to the button to redirect and connect via microsoft account in my angular application
body: <p>I built an angular application and I wanted to let users connect to it only via microsoft account using @azure/msal-angular and @azure/msal-browser packages.</p>
  <p>I created a component to handle the connection called login</p>
  <p>this is login.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MsalService } from '@azure/msal-angular';
  import { AuthenticationResult } from '@azure/msal-browser';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
    title = 'Authenticate with Microsoft';
  
    constructor(private msalService: MsalService){
    }
  
    isLoggedIn() : boolean {
      return this.msalService.instance.getActiveAccount() != null
    }
  
    login() {
      this.msalService.loginRedirect();
      // this.msalService.loginPopup().subscribe((response: AuthenticationResult) =&gt; {
      //   this.msalService.instance.setActiveAccount(response.account)
      // })
    }
  
    logout() {
      this.msalService.logout();
    }
  
    ngOnInit(): void {
      this.msalService.instance.handleRedirectPromise().then(
        res =&gt; {
          if (res != null &amp;&amp; res.account != null) {
            this.msalService.instance.setActiveAccount(res.account)
          }
        }
      )
    }
  
  }
  </code></pre>
  <p>login.component.html</p>
  <pre><code>&lt;div class=&quot;login_component&quot;&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;button (click)=&quot;login();&quot; *ngIf=&quot;!isLoggedIn()&quot;&gt;SIGN IN&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button (click)=&quot;logout();&quot; *ngIf=&quot;isLoggedIn()&quot;&gt;SIGN OUT&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;div *ngIf=&quot;isLoggedIn()&quot;&gt;
      &lt;h3&gt;The user is logged in&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div *ngIf=!isLoggedIn()&gt;
      &lt;h3&gt;You are NOT log in !!!&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
    .login_component {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  &lt;/style&gt;
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>// IMPORT FOR ANGULAR CORE
  import { LoginComponent } from './login/login.component';
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  // IMPORT FOR ANGULAR MATERIAL
  import { MatButtonModule } from '@angular/material/button';
  import { MatIconModule } from '@angular/material/icon';
  
  // OTHER
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { HomePageComponent } from './home-page/home-page.component';
  
  
  // START LOGIN WITH MICROSOFT
  import { MsalModule, MSAL_INSTANCE, MsalService } from '@azure/msal-angular';
  import { IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';
  
  export function MSALInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({
      auth: {
        clientId: 'something-here', // Application id
        authority: 'another-thing-here', // Directory (tenant) id
        redirectUri: 'http://localhost:4200' // Need to be changed in production
      }
    })
  }
  // END OF LOGIN WITH MICROSOFT
  
  @NgModule({
    declarations: [
      AppComponent,
      HomePageComponent,
      DealListComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatIconModule,
      MsalModule,
    ],
    providers: [
      {
        provide: MSAL_INSTANCE,
        useFactory: MSALInstanceFactory
      },
      MsalService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>app.component.html</p>
  <pre><code>
  &lt;div&gt;
    &lt;app-login&gt;&lt;/app-login&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>and finally my app-routing.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HomePageComponent } from './home-page/home-page.component';
  import { LoginComponent } from './login/login.component';
  
  
  // ROUTES
  const appRoutes: Routes =[
    {path: '', component: LoginComponent},
    {path: 'home', component: HomePageComponent},
  ]
  
  @NgModule({
    imports:
    [RouterModule.forRoot(appRoutes,{ enableTracing: true })
  
  
    ],
    exports: [RouterModule
    ]
  
  
  
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>When I click on that button</p>
  <pre><code>&lt;td&gt;&lt;button (click)=&quot;login();&quot; *ngIf=&quot;!isLoggedIn()&quot;&gt;SIGN IN&lt;/button&gt;&lt;/td&gt;
  </code></pre>
  <p>to login, nothing is happening. When I tried to do it with loginPopup() in the login function (login.component.ts), I would've had a popup which disappeared right after appearing. I thought it was a registration application problem with portal.azure.com so I deleted the previous app registration and created a new one and put the id's in the app.module but still nothing.</p>
  <p>Any help will be appreciated.</p>
  <p>Thank you so much !</p>