title: Why angular is not recognizing if a user is logged in with keycloak?
body: <p>So I'm trying to set up a sso system with keycloak on my angular app.</p>
  
  <p>I have downloaded the keycloak library keycloak-angular@4.0.2, setted up a keycloak server at localhost:8080/auth, added the keycloak.json on the root of the app, that keycloak made for me:</p>
  
  <pre><code>   {
    "realm": "my-app",
    "auth-server-url": "http://localhost:8080/auth",
    "ssl-required": "external",
    "resource": "my-app",
    "public-client": true,
    "confidential-port": 0
    }
  </code></pre>
  
  <p>Also I added the keycloak initi function in the main.ts:</p>
  
  <pre><code>import { enableProdMode } from '@angular/core';
  //....some other import....
  import { KeycloakService } from 'keycloak-angular';
  
  
  var injector = ReflectiveInjector.resolveAndCreate([KeycloakService]);
  var keycloak = injector.get(KeycloakService)
  
  if (environment.production) {
      enableProdMode();
  }
  
  
  
  keycloak.init()
      .then(() =&gt; platformBrowserDynamic().bootstrapModule(AppModule))
      .catch(e =&gt; {
          console.error(e);
      });
  </code></pre>
  
  <p>Now, if I try to make a registration page, something like this:</p>
  
  <pre><code>export class registration implements OnInit {
  
    constructor(keycloak:KeycloakService) {
  
      keycloak.register();
  
     }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>It works and sends me to a registration page and if I create an account it appears in the keycloak server.
  BUT... even if I am not logged in with any account it lets me access any page, also, if I try:</p>
  
  <pre><code>keycloak.isLoggedIn().then(() =&gt; console.log("logged"), ()=&gt;console.log("Not logged"));
  </code></pre>
  
  <p>The result is "logged", but if I try:</p>
  
  <pre><code>keycloak.loadUserProfile();
  </code></pre>
  
  <p>Then it says </p>
  
  <pre><code>The user profile was not loaded as the user is not logged in.
  </code></pre>
  
  <p>I can't understand how it works, am I missing something?<br>
  So my question is:<br>
  - How do I prevent pages to show if I am not logged in?
  - How do I make a user log and stay logged and angular to recognize who is logged and who is not.</p>
  
  <p>UPDATE: As asked I'm adding app.module.ts</p>
  
  <pre><code>import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
  import { NgModule, APP_INITIALIZER } from '@angular/core';
  import { TranslateModule } from '@ngx-translate/core';
  import { HttpClientModule } from '@angular/common/http';
  import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
  import { initializer } from './utils/app-init';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  
  import { AuthenticationModule } from './core/auth/authentication.module';
  import { NgxPermissionsModule } from 'ngx-permissions';
  
  import { LayoutModule } from './content/layout/layout.module';
  import { PartialsModule } from './content/partials/partials.module';
  import { CoreModule } from './core/core.module';
  import { AclService } from './core/services/acl.service';
  import { LayoutConfigService } from './core/services/layout-config.service';
  import { MenuConfigService } from './core/services/menu-config.service';
  import { PageConfigService } from './core/services/page-config.service';
  import { UserService } from './core/services/user.service';
  import { UtilsService } from './core/services/utils.service';
  import { ClassInitService } from './core/services/class-init.service';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { GestureConfig, MatProgressSpinnerModule } from '@angular/material';
  import { OverlayModule } from '@angular/cdk/overlay';
  
  import { MessengerService } from './core/services/messenger.service';
  import { ClipboardService } from './core/services/clipboard.sevice';
  
  import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
  import { LayoutConfigStorageService } from './core/services/layout-config-storage.service';
  import { LogsService } from './core/services/logs.service';
  import { QuickSearchService } from './core/services/quick-search.service';
  import { SubheaderService } from './core/services/layout/subheader.service';
  import { HeaderService } from './core/services/layout/header.service';
  import { MenuHorizontalService } from './core/services/layout/menu-horizontal.service';
  import { MenuAsideService } from './core/services/layout/menu-aside.service';
  import { LayoutRefService } from './core/services/layout/layout-ref.service';
  import { SplashScreenService } from './core/services/splash-screen.service';
  import { DataTableService } from './core/services/datatable.service';
  
  
  import 'hammerjs';
  import { AppAuthGuardComponent } from './utils/keycloak/app-auth-guard/app-auth-guard.component';
  import { KEYCLOAK_HTTP_PROVIDER } from './utils/keycloak/keycloak.http';
  
  const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
      // suppressScrollX: true
  };
  
  @NgModule({
      declarations: [AppComponent, AppAuthGuardComponent],
      imports: [
          BrowserAnimationsModule,
          BrowserModule,
          AppRoutingModule,
          HttpClientModule,
          LayoutModule,
          PartialsModule,
          CoreModule,
          OverlayModule,
          AuthenticationModule,
          NgxPermissionsModule.forRoot(),
          NgbModule.forRoot(),
          TranslateModule.forRoot(),
          MatProgressSpinnerModule,
          KeycloakAngularModule,
      ],
      providers: [
          AclService,
          LayoutConfigService,
          LayoutConfigStorageService,
          LayoutRefService,
          MenuConfigService,
          PageConfigService,
          UserService,
          UtilsService,
          ClassInitService,
          MessengerService,
          ClipboardService,
          LogsService,
          QuickSearchService,
          DataTableService,
          SplashScreenService,
          KeycloakService,
          KEYCLOAK_HTTP_PROVIDER,
          {
              provide: PERFECT_SCROLLBAR_CONFIG,
              useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
          },
          {
              provide: APP_INITIALIZER,
              useFactory: initializer,
              multi: true,
              deps: [KeycloakService]
          },
  
  
          // template services
          SubheaderService,
          HeaderService,
          MenuHorizontalService,
          MenuAsideService,
          {
              provide: HAMMER_GESTURE_CONFIG,
              useClass: GestureConfig
          }
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>