Skip to content

Commit

Permalink
build: bootstrap app after theme is loaded
Browse files Browse the repository at this point in the history
Usually themes are loaded as global styles which are blocking. This allows us to assume that by the time to app is bootstrapped, the theme should have loaded. Our own demo app doesn't work this way, because we're inserting the theme inside the main entrypoint, because we need to determine whether to insert an M2 or M3 theme. This prevented us from properly testing the theme loaded warning.

These changes switch to bootstrapping the app after the theme has loaded.

(cherry picked from commit 1214b4e)
  • Loading branch information
crisbeto committed May 28, 2024
1 parent 466e249 commit e1a9f76
Showing 1 changed file with 23 additions and 19 deletions.
42 changes: 23 additions & 19 deletions src/dev-app/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
// Load `$localize` for examples using it.
import '@angular/localize/init';

import {HttpClientModule} from '@angular/common/http';
import {
importProvidersFrom,
provideZoneChangeDetection,
Expand All @@ -36,23 +35,28 @@ const theme = document.createElement('link');
theme.href = cachedAppState.m3Enabled ? 'theme-m3.css' : 'theme.css';
theme.id = 'theme-styles';
theme.rel = 'stylesheet';

// Bootstrap the app after the theme has loaded so we can properly test the
// theme loaded checks. This also avoids a flicker if it takes too long to load.
theme.addEventListener('load', bootstrap, {once: true});
document.head.appendChild(theme);

bootstrapApplication(DevApp, {
providers: [
importProvidersFrom(
BrowserAnimationsModule.withConfig({
disableAnimations: !cachedAppState.animations,
}),
RouterModule.forRoot(DEV_APP_ROUTES),
HttpClientModule,
),
provideNativeDateAdapter(),
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
{provide: Directionality, useClass: DevAppDirectionality},
cachedAppState.zoneless
? provideExperimentalZonelessChangeDetection()
: provideZoneChangeDetection({eventCoalescing: true, runCoalescing: true}),
],
});
function bootstrap(): void {
bootstrapApplication(DevApp, {
providers: [
importProvidersFrom(
BrowserAnimationsModule.withConfig({
disableAnimations: !cachedAppState.animations,
}),
RouterModule.forRoot(DEV_APP_ROUTES),
),
provideNativeDateAdapter(),
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
{provide: Directionality, useClass: DevAppDirectionality},
cachedAppState.zoneless
? provideExperimentalZonelessChangeDetection()
: provideZoneChangeDetection({eventCoalescing: true, runCoalescing: true}),
],
});
}

0 comments on commit e1a9f76

Please sign in to comment.