@angular/core#APP_INITIALIZER TypeScript Examples

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        AlertComponent,
        HomeComponent
    ],
    providers: [
        { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AccountService] },
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

        // provider used to create fake backend
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    NzSpinModule,
    NzIconModule.forRoot([]),
    environment.production ? [] : AkitaNgDevtools,
    AkitaNgRouterStoreModule,
    QuillModule.forRoot()
  ],
  providers: [
    {
      provide: NG_ENTITY_SERVICE_CONFIG,
      useValue: { baseUrl: 'https://jsonplaceholder.typicode.com' }
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler()
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [Sentry.TraceService],
      multi: true,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

/**
 * This module implements client services for the Sinequa web service APIs
 */
// @dynamic
@NgModule({
    imports: [
        CommonModule,
        HttpClientModule,
        BaseModule,
        IntlModule
    ],
    declarations: [
    ],
    exports: [
    ],
    providers: [
        // Ensure that the StartConfigWebService is instantiated so StartConfig is initialized
        {provide: APP_INITIALIZER, useFactory: StartConfigInitializer, deps: [StartConfigWebService], multi: true},
        ...WEB_SERVICES_MODULE_PROVIDERS
    ]
})
export class WebServicesModule {
    /**
     * Configures the module with a start configuration
     *
     * @param startConfig The start configuration object
     *
     * @returns The configured module
     */
    static forRoot(startConfig: StartConfig) : ModuleWithProviders<WebServicesModule> {
        return {
            ngModule: WebServicesModule,
            providers: [
                // Provide START_CONFIG
                {provide: START_CONFIG, useValue: startConfig},
            ]
        };
    }
}

/**
 * This module contains core internationalization functionality for the formatting of numbers, dates and strings.
 * It is based on the industry standard
 * [Intl]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl} API
 * and an implementation of the ICU Message syntax provided by [FormatJS]{@link https://formatjs.io/}.
 *
 * The module provides mechanisms for the definition and loading of locales which can be extended with library specific
 * locale information. By default, locales contain support for `Moment.js` and `D3.js`.
 *
 * The module can be initialized by importing it using the `forRoot` static method or otherwise providing the
 * {@link LOCALES_CONFIG} injection token
 */
@NgModule({
    imports: [
        CommonModule,
        BaseModule
    ],
    declarations: [
        MessagePipe
    ],
    exports: [
        MessagePipe
    ],
    providers: [
        {provide: APP_INITIALIZER, useFactory: IntlInitializer, deps: [IntlService], multi: true},
        ...INTL_MODULE_PROVIDERS
    ]
})
export class IntlModule {
    static forRoot(localeConfig: Type<LocalesConfig>): ModuleWithProviders<IntlModule> {
        return {
            ngModule: IntlModule,
            providers: [
                {provide: LOCALES_CONFIG, useClass: localeConfig},
            ]
        };
    }
}

static forRoot(): ModuleWithProviders<ErrorReportModule> {
    return {
      ngModule: ErrorReportModule,
      providers: [
        {
          provide: ErrorHandler,
          useValue: Sentry.createErrorHandler(),
        },
        {
          provide: Sentry.TraceService,
          deps: [Router],
        },
        {
          provide: APP_INITIALIZER,
          // eslint-disable-next-line @typescript-eslint/no-empty-function
          useFactory: () => () => {},
          deps: [Sentry.TraceService],
          multi: true,
        },
      ],
    };
  }

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChatModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => initDatabase,
      multi: true,
      deps: [/* your dependencies */]
    },
    DatabaseService,
    { provide: APP_BASE_HREF, useValue: '/' },
    {
      provide: LocationStrategy,
      useClass: PathLocationStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

static forRoot(
    config?: InoElementsConfig
  ): ModuleWithProviders<InoElementsModule> {
    return {
      ngModule: InoElementsModule,
      providers: [
        {
          provide: ConfigToken,
          useValue: config,
        },
        {
          provide: APP_INITIALIZER,
          useFactory: appInitialize,
          multi: true,
          deps: [ConfigToken, DOCUMENT, NgZone],
        },
      ],
    };
  }

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent
    ],
    providers: [
        { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AuthenticationService] },
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

        // provider used to create fake backend
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        EditAccountComponent,
        LoginComponent
    ],
    providers: [
        { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AccountService] },
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

        // provider used to create fake backend
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    AppComponent,
    ProtectedComponent,
    UnprotectedComponent,
    ChildRouteComponent,
    NestedChildRouteComponent,
    ErrorComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,

    // This playground has been configured by default to use dynamic configuration.
    // If you wish to specify configuration to `forRoot` directly, uncomment `authConfig`
    // here, and comment out the APP_INITIALIZER config in the providers array below.
    AuthModule.forRoot(/* authConfig */),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configInitializer,
      deps: [HttpBackend, AuthClientConfig],
      multi: true,
    },
    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

// end::host-app:register-initializer[]

// tag::micro-app:initializer[]
@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: provideConnectToHostFn, // <1>
      deps: [NgZone], // <2>
      multi: true,
    },
  ],
  // ... other metadata omitted
})
export class AppModule {
}

// end::host-app:initializer[]

// tag::host-app:register-initializer[]
@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: providePlatformInitializerFn, // <1>
      deps: [PlatformInitializer], // <2>
      multi: true,
    },
  ],
  // ... other metadata omitted
})
export class AppModule {
}

@NgModule({
  declarations: [
    AppComponent,
    SplashComponent,
    AlertComponent,
    MoreInfoComponent,
    ConfirmationDialogComponent,
    ErrorDialogComponent,
    ConfigurationComponent,
    WalletBalanceComponent,
    ContractsComponent,
    EventsComponent,
    OffersComponent,
    ContractDetailComponent,
    EventDetailComponent,
    NewOfferComponent,
    BuildAcceptOfferComponent,
    AcceptOfferComponent,
    NewAddressDialogComponent,
    SendFundsDialogComponent,
    FeeRateDialogComponent,
    DlcFileComponent,
    DebugComponent,
    HeaderComponent,
    AboutComponent,
    NetworkComponent,
    LoginComponent,
    LogoutDialogComponent,
    AddressLabelComponent,
    ContactsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    MaterialModule,
    NgChartsModule,
    QrCodeModule,
    ZXingScannerModule,
    AppRoutingModule,
  ],
  providers: [{
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService],
      multi: true
    }, {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }, {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AboutComponent,
    OracleComponent,
    AnnouncementDetailComponent,
    NewAnnouncementComponent,
    AlertComponent,
    MoreInfoComponent,
    LastResultDetailComponent,
    SplashComponent,
    
    ConfigurationComponent,
    SignMessageComponent,

    ConfirmationDialogComponent,
    ErrorDialogComponent,
    LogoutDialogComponent,
    HeaderComponent,
    AdvancedComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    MaterialModule,
    AppRoutingModule,
  ],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [TranslateService],
    multi: true
  }, {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }, {
    provide: HTTP_INTERCEPTORS,
    useClass: ErrorInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [MaintenanceComponent, RubicFooterComponent],
  providers: [
    CookieService,
    {
      provide: APP_INITIALIZER,
      useFactory: configLoader,
      deps: [ContentLoaderService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: WalletsInfoInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RubicExchangeInterceptor,
      multi: true
    },
    NG_EVENT_PLUGINS
  ],
  imports: [
    CommonModule,
    HeaderModule,
    WalletsModule,
    ErrorsModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    SwapsModule,
    MyTradesModule
  ],
  exports: [MaintenanceComponent, RouterModule, HeaderComponent, RubicFooterComponent]
})
export class CoreModule {}

InitProvider = {
  provide: APP_INITIALIZER,
  useFactory: (initService: InitService) => () => initService.init(),
  deps: [InitService],
  multi: true,
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    GoogleMapsModule,
    SharedModule,
    HammerModule,
    HttpClientJsonpModule,
    SharedModule,
    HammerModule,
  ],
  providers: [
    GooglePlus,
    InAppBrowser,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: false,
      }),
    },
    CurrencyPipe,
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: ConfigService) => () => configService.loadConfigurationData(),
      deps: [ConfigService, RouterAuthService, TokenService, SecureStorageService, StorageService, Sentry.TraceService],
      multi: true,
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: MIN_SCREEN_WIDTH,
      useValue: 375,
    },
    TitleCasePipe,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

APPINIT_PROVIDES = [
  // 项目启动
  {
    provide: APP_INITIALIZER,
    useFactory: StartupServiceFactory,
    deps: [StartupService],
    multi: true,
  },
  // load阿里图标库cdn
  {
    provide: APP_INITIALIZER,
    useFactory: LoadAliIconCdnFactory,
    deps: [LoadAliIconCdnService],
    multi: true,
  },
  // 初始化锁屏服务
  {
    provide: APP_INITIALIZER,
    useFactory: InitLockedStatusServiceFactory,
    deps: [SubLockedStatusService],
    multi: true,
  },
  // 初始化主题
  {
    provide: APP_INITIALIZER,
    useFactory: InitThemeServiceFactory,
    deps: [InitThemeService],
    multi: true,
  },
  // 初始化监听屏幕宽度服务
  {
    provide: APP_INITIALIZER,
    useFactory: SubWindowWithServiceFactory,
    deps: [SubWindowWithService],
    multi: true,
  },
  // 初始化暗黑模式还是default模式的css
  {
    provide: APP_INITIALIZER,
    useFactory: (themeService: ThemeSkinService) => () => {
      return themeService.loadTheme();
    },
    deps: [ThemeSkinService],
    multi: true,
  }
]

@NgModule({
  declarations: [AppComponent, TitlebarComponent, FooterComponent, HorizontalTabsComponent, VerticalTabsComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    HomeModule,
    AppRoutingModule,
    DirectiveModule,
    MatModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler,
      },
    }),
    BrowserAnimationsModule,
    GalleryModule,
    CommonUiModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [
        WowUpService,
        WowUpApiService,
        AddonService,
        WarcraftInstallationService,
        IconService,
        AddonProviderFactory,
      ],
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: DefaultHeadersInterceptor,
      multi: true,
    },
    {
      provide: ErrorHandler,
      useClass: ErrorHandlerInterceptor,
      deps: [AnalyticsService],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  declarations: [
    AppComponent,
    AppShellComponent,
    BrowserOutletsComponent,
    BrowserOutletComponent,
    RouterOutletComponent,
    RouterOutletSettingsComponent,
    RouterOutletContextComponent,
    OutletRouterComponent,
    ContextComponent,
    ContextEntryComponent,
    LookupContextValueComponent,
    PublishMessageComponent,
    ReceiveMessageComponent,
    MessageListItemComponent,
    RegisterCapabilityComponent,
    RegisterIntentionComponent,
    LookupCapabilityComponent,
    LookupIntentionComponent,
    TopicSubscriberCountPipe,
    AppendParamDataTypePipe,
    MicrofrontendComponent,
    ScrollableMicrofrontendComponent,
    PreferredSizeComponent,
    PlatformPropertiesComponent,
    DevToolsComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    SciViewportModule,
    SciListModule,
    SciSashboxModule,
    SciAccordionModule,
    SciCheckboxModule,
    SciFormFieldModule,
    SciParamsEnterModule,
    SciQualifierChipListModule,
    SciPropertyModule,
    OverlayModule,
    A11yModule,
    AppRoutingModule,
  ],
  bootstrap: [
    AppComponent,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: providePlatformInitializerFn,
      deps: [PlatformInitializer],
      multi: true,
    },
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // required because <sci-router-outlet> is a custom element and unknown to Angular
})
export class AppModule {
}

@NgModule({
  declarations: [
    AppComponent,
    AppMenuComponent,
    AppListComponent,
    AppListItemComponent,
    AppDetailsComponent,
    CapabilityAccordionPanelComponent,
    CapabilityAccordionItemComponent,
    RequiredCapabilitiesComponent,
    IntentionAccordionPanelComponent,
    IntentionAccordionItemComponent,
    DependentIntentionsComponent,
    FindCapabilitiesComponent,
    FilterFieldComponent,
    CapabilityFilterResultComponent,
    QualifierChipListComponent,
    AppNamePipe,
    CustomParamMetadataPipe,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    A11yModule,
    ClipboardModule,
    AppRoutingModule,
    SciViewportModule,
    SciListModule,
    SciAccordionModule,
    SciFilterFieldModule,
    SciParamsEnterModule,
    SciPropertyModule,
    SciTabbarModule,
    SciFormFieldModule,
    SciSashboxModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: providePlatformInitializerFn,
      multi: true,
      deps: [NgZoneMessageClientDecorator, NgZoneIntentClientDecorator, NgZone],
    },
    {provide: MessageClient, useFactory: () => Beans.get(MessageClient)},
    {provide: IntentClient, useFactory: () => Beans.get(IntentClient)},
    {provide: OutletRouter, useFactory: () => Beans.get(OutletRouter)},
    {provide: ManifestService, useFactory: () => Beans.get(ManifestService)},
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

@NgModule({
  declarations: [
    AppComponent,
    TgSvgSpriteComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({}, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionTypeUniqueness: true,
      },
    }),
    extModules,
    EffectsModule.forRoot([]),
    StoreRouterConnectingModule.forRoot(),
    ReactiveComponentModule,
    TranslateModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [ConfigService, TranslateService],
      useFactory: (appConfigService: ConfigService, translate: TranslateService) => {
        return () => {
          return appConfigService.fetch().then((config) => {
            translate.setDefaultLang(config.defaultLanguage);
            translate.use(config.defaultLanguage);

            return config;
          });
        };
      },
    },
  ],
})
export class AppModule {}

@NgModule({
  declarations: [],
  imports: [
    LegacyModule,
    HttpClientModule,
    BrowserModule,
    StoreModule.forRoot({}, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
        strictActionTypeUniqueness: true,
      },
    }),
    extModules,
    EffectsModule.forRoot([]),
    ReactiveComponentModule,
    TextEditorModule,
    ProjectNavigationModule,
    TranslateModule.forRoot(),
    RouterTestingModule.withRoutes([
      {
        path: '**',
        component: EmptyComponent,
      },
    ]),
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [ConfigService, TranslateService],
      useFactory: (appConfigService: ConfigService, translate: TranslateService) => {
        return () => {
          return appConfigService.fetch().then((config) => {
            translate.setDefaultLang(config.defaultLanguage);
            translate.use(config.defaultLanguage);

            return config;
          });
        };
      },
    },
  ],
})
export class WebcomponentModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    for (const component of componentes) {
      const strategyFactory = new ElementZoneStrategyFactory(component[1], this.injector);
      const el = createCustomElement(component[1], {injector : this.injector, strategyFactory});

      customElements.define(component[0], el);
    }
  }
}

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    HeaderComponent,
    BreadcrumbComponent,
    NetworkToggleComponent,
    ExplorerComponent,
    ExplorerUiComponent,
    QueryInputComponent,
    ResponseLinksComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    FontAwesomeModule,
    ChartsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ThorchainNetworkService,
    AssetService,
    ConstantsService,
    NetworkService,
    NodeService,
    LastBlockService,
    PoolService,
    MemberService,
    StatsService,
    TransactionService,
    VersionService,
    VolumeService,
    UiStyleToggleService,
    LocalStorageService,
    CoinGeckoService,
    {provide: APP_INITIALIZER, useFactory: themeFactory, deps: [UiStyleToggleService], multi: true},
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }