Convert an Angular Module into a Project App in Nx Monorepo

Following steps explain how to convert an existing Angular module from old angular application into a standalone project app within an Nx Monorepo, ensuring a seamless migration with proper routing, asset handling, and dependency resolution.

In this example, I will be covering migration of "contact" module into a new Application in Nx Monorepo workspace setup.

1. Create a New Project in Nx

Use the Nx CLI to generate a new project matching the name of your Angular module. This sets up the project structure in the Monorepo.

nx g @nrwl/angular:application apps/contact        

2. Copy the Angular Module

Copy your existing Angular module folder into the newly created project's src/app directory. The file path should look like this:

nx-angular-monorepo\apps\contact\src\app        

3. Configure App Component for Routing

Replace the contents of app.component.html with a <router-outlet> to enable routing.

<router-outlet></router-outlet>        

In app.routes.ts, configure the route for your module:

?{
??path: "contact",
??loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
}        

4. Handle Assets

Organize the assets (i18n, images, styles) from your module into the assets folder of the new project. Resolve any import paths to point correctly to the new locations. In our case, following would be the path for assets folder:

nx-angular-monorepo\apps\contact\public\assets        

5. Resolve Dependencies

Update the import paths for all dependencies, install any missing packages, and ensure that there are no errors remaining in the code.

6. Configure Hash-Based Routing

Finally, configure hash-based routing for the project if required, ensuring compatibility with different environments. Following changes would be required for implementing the same:

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

//app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes, withHashLocation()),
  ],
};        

//app.routes.ts
export const appRoutes: Route[] = [
    {
        path: "contact",
        loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
    }
];        

7. Setting up Httpclient

Also, within the Nx monorepo, since we have moved the common services into the shared libraries and that we are consuming from our remote applications. We would need to provide the Httpclient within the consuming application. To provide the HttpClient service, you will need to call provideHttpClient() in the providers' array during the application bootstrap process. Here’s how to do it:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient() // Provide the HttpClient service
  ]
});        

After setting up provideHttpClient(), we can inject HttpClient into any component or service within your application. Using provideHttpClient() is essential for enabling the HttpClient service in Angular 17+ applications that leverage the standalone API, especially when consuming libraries from an Nx monorepo. This approach allows for better modularization and flexibility in managing dependencies within your application.

Click here to navigate to the guide for Configuring Micro Frontends Using Native Federation in Angular 18 Nx Monorepo.