Is there a way of providing the common module in all modules in Angular StandAlone?

Question

In every component I have to import this CommonModule to use directives like NgIf and so on.

I want a way of injecting this module in all my modules.

   @Component({
      selector: 'app-register',
      standalone: true,
      imports: [ReactiveFormsModule, CommonModule, TextInputComponent],
      templateUrl: './register.component.html',
      styleUrl: './register.component.scss'
    })

Richardson

are you using angular 17? just use @if and @for – Octamerous

Does this answer your question? How to import CommonModule for root in standalone components appoach? – Amalle

But What if I need | async in my if, like this: @if(basketService.basketSource$ | async; as post) I still need to import this common annoying module – Richardson

Answer 1

you need to specify modules in imports, that can't be avoided to resolve services and other dependencies.

you can use this common approach

create a shared module file and Add -"imports and exports" common module / some forms module in that (the one's that is being used in all / most of them ) , and then import that sharedModule in your component file. it will reduce no. of imports line in you standalone component.

Constabulary

Answer 2

I recommend you to use @if to avoid duplicate modules. Further theoretical information is below if you wonder.

That's pretty much the point of a standalone component. It's completely standalone.

In your case what you can do is instead of a giant shared module that imports/exports shared code, make each component it's own module and export the component from the module. Then you can import each module individually within your app from shared/componentA, shared/componentB, etc. This way everything is in a module that can be shared without duplicating code.

From a discussion about Standalone Components and Modules. In addition to this quote, about working standalone with using shared modules or not, there is a big difference. Those are bundled separated and they allow for deep imports, meaning if I import a single component only that component is added, while a shared module bring all the components that are declared in it. And it means that you will import your standalone component to your root and it imports shared modules again. That's why duplicating codes bring loads to your application.

Example according to quote, FirstComponent.module.ts:

@NgModule({
  declarations: [FirstComponent],
  exports: [FirstComponent]
})
export class FirstComponentModule {}

app.module.ts:

@NgModule({
  declarations: [ ... ,
  ],
  imports: [...,
    FirstComponentModule
  ],
  exports: [ ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

This was the modular architecture.

If you want to pull your component out from your root and make it standalone, you shouldn't crack the architecture and that's why Angular made a new type of ngIf and ngFor like @if and @for.

Amalle

Answer 3

If you are using Angular 17 or latest, follow the instructions:

Create a file named(any name) app.common.module.ts right under app directory of your angular project. Declare a class named AppCommonModule having @NgModule decoration. Follow the code like below:

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
    imports: [
        ReactiveFormsModule,
        CommonModule,
    ],
    exports: [
        ReactiveFormsModule,
        CommonModule,
    ]
})
export class AppCommonModule { }

Now open the app.config.ts file under app directory and use AppCommonModule as argument like:

Note: If you are using Angular 17 or latest standalone app, you will find the file right under app directory.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { AppCommonModule } from './app.common.module';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      AppCommonModule
    ),
    // Others providers
  ]
};

Now import the AppCommonModule where your component needs:

import { AppCommonModule } from '../../app.common.module';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [
    AppCommonModule
  ],
  templateUrl: './standalone.component.html',
  styleUrl: './standalone.component.scss'
})
export class StandaloneComponent {}

If you have any question about this, feel free to ask. Enjoy with happy coding ...

Twink