How to migrate Angular CoreModule to standalone APIs

Tomas Trajan
9 min readSep 5, 2023
Standalone APIs are beautiful! (📸 by Kuno Schweizer)

In this article we’re going to learn how to migrate commonly used Angular CoreModule (or any other Angular module) to standalone APIs!

Angular standalone components and APIs are the future! Angular CLI now allows us to generate new Angular applications with standalone setup out of the box, simply by using the new --standalone flag when running ng new command!

This works really great for new greenfield projects, but we might encounter some issues in more complex enterprise environments which often tend to abstract base setup into NgModules in reusable libraries which are then consumed by multiple Angular apps.

Such module might prevent us from using of the standalone setup in consumer apps because we can’t import such module directly in the new app.config.ts and the provider workaround in form of importProvidersFrom handles only providers which is often just not enough!

// app.config.ts
import { MyOrgCoreModule } from '@my-org/core'

// standalone app setup generated by Angular CLI with --standalone
export const appConfig: ApplicationConfig = {
providers: [
// providers ...

MyOrgCoreModule, // ⚠️ doesn't work ...

importProvidersFrom(MyOrgCoreModule), // ⚠️ often not enough, doesn't work
],
};

First, let’s talk about the CoreModule

Before we can show how to migrate to the new standalone APIs we have to explore what kind of use cases are solved by a typical Angular CoreModule, and then we will be able to see how each piece of that puzzle falls into its new place!

Want to learn how to create a robust extendable Angular architecture for your project? Check out my Angular Enterprise Architecture E-book!

The CoreModule is a very common pattern in lots of existing Angular applications. It usually takes care of a large range of responsibilities with application wide impact, most typical being…

  • logging / tracing
  • authentication (and auth state)
  • long-running processes
  • translations
  • main layout

Let me know in the responses what are some other…

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer