Angular 16, Creating a standalone app with standalone components, how and where to import singletons services and or components?

Question

I am working through a course that doesnt use the new angular 16 features. So as i go i am trying to convert it to use standalone components.

App.module.ts of the course project currently looks like this:

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserModule,
    SharedModule,
    CoreModule,
    StoreModule.forRoot(fromApp.appReducer),
    EffectsModule.forRoot([AuthEffects, RecipeEffects]),
    StoreDevtoolsModule.instrument({
      logOnly: environment.production
    }),
    StoreRouterConnectingModule.forRoot()
  ],
  exports: [RouterModule],
  providers: [], //one instance of each service for the whole app
  bootstrap: [AppComponent]
})
export class AppModule {
}

Now i created a new project using the following flags: --no-strict --routing --style=scss --standalone

This then creates a new project without an app.module.ts which i understand as you now have to import everything directly on the components itself.

It creates an app.config.ts file :

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
  ],
};

Which is bootstrapped in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

I just fail to undestand how to convert the app.module.ts file from the non standalone project to an standalone version.

For example, as app.config is bootstrapped to the application it seems to me that this would be the place to import my coreModule and HttpClientModule. but it isnt allowed in that file.

if someone could help me converting/understanding how to make this change from non-standalone app to standalone it would be greatly appreciated.

Answer 1

There are no global imports when using standalone components.

What you might need to setup are the providers that will be available to the RootInjector.

For exemple, the providers for the HttpClientModule are accessible with the provideHttpClient() function.

For your NgRx store, you will need to use importProvidersFrom() for you that would be :

importProvidersFrom([
    StoreModule.forRoot(fromApp.appReducer),
    EffectsModule.forRoot([AuthEffects, RecipeEffects]),
]);