Configure Angular environment injector with Standalone Component

Since the arrival of Standalones Component with Angular 15, NgModules are now completely optional.

It is still necessary to declare providers to configure the root injector of the application.

With modules, it is possible to import other NgModules that define their own providers like HttpClientModule, BrowserAnimationsModule, RouterModule, etc.

Without the modules, it is necessary to declare these providers when bootstrapping the application. Fortunately, there are functions provided by angular to facilitate the declaration of these providers. For example:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations()
]})

Here is a non-exhaustive list of functions to set up regularly used providers :

Core

importProvidersFrom(): Sets up providers collected from a given module

Animation

provideAnimations(): Enable animation
provideNoopAnimations(): Disable animation

HTTP

provideHttpClient(): Sets up HttpClient service and configures it with some features

• withInterceptors()
• withInterceptorsFromDi()
• withXsrfConfiguration()
• withNoXsrfProtection()
• withJsonpSupport()
• withRequestsMadeViaParent()

provideHttpClientTesting(): Sets up a mocked HttpClient service

Router

provideRouter(): Sets up router functionality for the application

• withInMemoryScrolling()
• withEnabledBlockingInitialNavigation()
• withDisabledInitialNavigation()
• withDebugTracing()
• withPreloading()
• withRouterConfig()

provideLocationMocks(): Sets up a mocked router for testing

NgRx

provideStore(): Sets up the global store
provideState(): Provides additional slices of state in the store
provideEffects(): Sets up given effects
provideStoreDevtools(): Sets up debug functionality
provideMockStore(): Sets up a mocked store