Hybrid module and standalone component usage in Angular

Load module routes and providers using a standalone root

Published: 7/10/2024

Have a standalone application.

Add a module that’s in a folder, making a kind of hybrid approach. In the given case it was a module for auth.

Issue#

When the auth module has routes, these can be imported as a list, but then the providers of the module aren’t captured and made available.

Solution#

Loading the module this way will ensure the providers are available, and the routes are accessible.

Key changes:

• withPreloading(PreloadAllModules)
• importProvidersFrom(AuthModule)
• withDebugTracing() will add console logs for routes

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import {
  PreloadAllModules,
  provideRouter,
  withDebugTracing,
  withPreloading,
} from '@angular/router';

import { routes } from './app.routes';
import { AuthModule } from './auth/auth.module';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withPreloading(PreloadAllModules)
      // withDebugTracing()
    ),
    importProvidersFrom(AuthModule),
  ],
};

Use the auth module#

To use my auth module in a project, simply copy the auth module folder into the project and do the Key changes (outlined above):

• withPreloading(PreloadAllModules)
• importProvidersFrom(AuthModule)