Another 404

[MonizDave]

• bug report -> please search issues before submitting
• feature request
• documentation issue or request
• regression (a behavior that used to work and stopped in a new release)

### Minimal steps to reproduce
> Click on the example "here" link in the "Exploring the sample" section

### Any log messages given by the failure
> N/A

### Expected/desired behavior
> Directs to the correct link


### Mention any other details that might be useful

I tried using the "Angular Single-page application with MSAL-Angular using the implicit flow" client
to connect with this sample and followed all available instructions but when I press "Login" and
provide my credentials I'm met with: "unauthorized_client: The client does not exist or is not enabled
for consumers. If you are the application developer, configure a new application through the App
Registrations in the Azure Portal at https://go.microsoft.com/fwlink/?linkid=2083908."


I tried to use the sample at the link instead but it's another 404


> ---------------------------------------------------------------
> Thanks! We'll be in touch soon.

[derisen]

@MonizDave thank you very much for catching this! I'll fix the link asap. About your issue, can you share your Angular SPA configuration file? (i.e.active-directory-javascript-singlepageapp-angular/src/app/app.module.ts/).

To call this API, it should look like this:

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatButtonModule,
    MatListModule,
    AppRoutingModule,
    MsalModule.forRoot({
      auth: {
        clientId: 'SPA_CLIENT_ID',
        authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
        redirectUri: 'http://localhost:4200',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
        'api://API_CLIENT_ID/access_as_user'
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['http://localhost:5000/api', ['api://API_CLIENT_ID/access_as_user']]
      ],
      extraQueryParameters: {}
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, your active-directory-javascript-singlepageapp-angular/src/app/profile/profile.component.ts file should be modified like this:

const API_ENDPOINT = 'https://graph.microsoft.com/v1.0/me';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  profile;

  constructor(private authService: MsalService, private http: HttpClient) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(API_ENDPOINT)
    .subscribe({
      next: (profile) => {
        this.profile = profile;
      },
      error: (err: AuthError) => {
        // If there is an interaction required error,
        // call one of the interactive methods and then make the request again.
        if (InteractionRequiredAuthError.isInteractionRequiredError(err.errorCode)) {
          this.authService.acquireTokenPopup({
            scopes: this.authService.getScopesForEndpoint(API_ENDPOINT)
          })
          .then(() => {
            this.http.get(API_ENDPOINT)
              .toPromise()
              .then(profile => {
                this.profile = profile;
              });
          });
        }
      }
    });
  }
}

[MonizDave]

Thank you!

This level of detail should be added to the instructions.

[derisen]

Will work on that, thanks @MonizDave