In standalone mode, how to I import a module in Angular 17?

Question

everyone. I've noticed that Angular 17 defaults to the standalone mode, which means it doesn't automatically generate the file app.module.ts... The code below generates an Angular app in standalone mode:

ng new project-name

The code below generates an angular app in not-standalone mode:

ng new project-name --no-standalone

However, if I'm working with this new standalone version, could someone guide me on which file to use and how to import a module that was previously imported in the app.module.ts file?

As an example: if I want to import the module BrowserModule from @angular/platform-browser, do I have to import it in all the components that will use it in the component decorator? Because before, I need to import just at the app.module.ts. Or am I missing something here?

Answer 1

Sure, here is a way to do it:

in your app.config.ts in your providers array, use importProvidersFrom and then add the module and their (optional) configuration :

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(
      SnackbarModule.forRoot({
        configuration: { configA: 'abc', configB: 'xyz' },
      })
    ),
  ],
};

Have a look here in the documentation

Answer 2

In Angular 17's standalone mode, where the traditional app.module.ts file is not automatically generated, you can organize your application without a central module file. Instead, you can import the necessary modules directly into the components where they are needed.

In this code you have a DemoComponent that uses various Angular modules. To import these modules directly into the component, you've done it correctly. Each import statement brings in the necessary module for the component.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatRadioModule } from '@angular/material/radio';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [
    CommonModule,
    MatMenuModule,
    MatTabsModule,
    MatRadioModule,
    ReactiveFormsModule,
    FormsModule
  ],
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})

export class DemoComponent implements OnInit {
    constructor () {}
    ngOnInit (): void {}
}

In this case, you don't need a central app.module.ts file. The component itself specifies its dependencies using the imports property of the @Component decorator.