У меня есть интерфейсный проект Cordova, Ioni c, Angular, который вызывает keycloak для аутентификации. Он отлично работает в сети. Однако, если я пытаюсь создать приложение для iOS, я получаю только белый экран. Это работает на iOS, если я добавлю setTimeout следующим образом:
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
}, 1000);
Но так как я сказал, что это не очень хорошая практика кодирования, я хотел бы написать это немного более профессионально, но я не смог найти рабочее решение.
У меня есть app-init.factory.ts:
export function AppInitFactory(keycloakService: KeycloakService): () => Promise<any> {
return (): Promise<any> => Promise.all([
KeycloakFactory(keycloakService)
]);
}
keycloak.factory.ts:
export function KeycloakFactory(keycloakService: KeycloakService): Promise<any> {
return new Promise(async (resolve, reject) => {
try {
await keycloakService.init({
config: {
url: environment.authUrl,
realm: environment.realm,
clientId: environment.clientId
},
loadUserProfileAtStartUp: false,
initOptions: {
onLoad: 'login-required',
checkLoginIframe: false
},
enableBearerInterceptor: true,
bearerExcludedUrls: ['/assets']
}).catch((error) => console.log(error));
resolve();
} catch (error) {
reject(error);
}
})
}
main.ts:
if (environment.production) {
enableProdMode();
}
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
}, 1000);
app.module.ts:
@NgModule({
declarations: [AppComponent, SharePopoverComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot(),
HttpClientModule,
KeycloakAngularModule,
PipesModule,
],
providers: [
AppInitProvider,
StatusBar,
SplashScreen,
AuthGuardService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
RestService,
File,
FileOpener,
SocialSharing,
Keyboard,
],
exports: [BrowserAnimationsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
app.provider.ts:
export const AppInitProvider = {
provide: APP_INITIALIZER,
useFactory: AppInitFactory,
deps: [KeycloakService],
multi: true
};
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private file: File
) {
this.platform.ready().then(() => {
this.initializeApp() })
}
initializeApp() {
this.statusBar.styleDefault();
this.splashScreen.hide();
if(this.platform.is('ios')) {
environment.fileDirectory = this.file.tempDirectory;
} else {
environment.fileDirectory = this.file.externalDataDirectory;
}
}
}