Angular Standalone vs NgModule — Interview Quick Revision

1. What is a standalone component in Angular?

A standalone component does not need to be declared inside an NgModule. It directly imports the components, directives, pipes, or modules it needs.
@Component({ standalone: true, imports: [CommonModule] })

2. How were Angular applications structured before standalone components?

Traditionally, Angular applications were organized using NgModules, such as AppModule and feature modules. Components, directives, and pipes were registered in a module's declarations.

3. What is NgModule?

NgModule is an Angular class decorated with @NgModule that groups components, directives, pipes, services, and other modules.
NgModule({ declarations: [...], imports: [...], providers: [...] })

4. What was the purpose of AppModule in traditional Angular applications?

AppModule was the root NgModule of a traditional Angular application. It configured application-level imports, providers, declarations, and the root component to bootstrap.

5. What was the purpose of the declarations array in NgModule?

declarations registered non-standalone components, directives, and pipes that belonged to that module.
declarations: [AppComponent, HeaderComponent, MyPipe]

6. What was the purpose of the imports array in NgModule?

imports made functionality exported by other NgModules available to the current module.
imports: [BrowserModule, FormsModule, AppRoutingModule]

7. What was the purpose of the providers array in NgModule?

providers registered services/dependencies with Angular's dependency injection system.
providers: [AuthService]

8. What was the purpose of the bootstrap array in NgModule?

bootstrap specified the root component Angular should create when starting the application.
bootstrap: [AppComponent]

9. How were components registered before standalone components?

Components were added to the declarations array of an NgModule.
@NgModule({ declarations: [ProductComponent] })

10. How were directives and pipes registered before standalone APIs?

Custom directives and pipes were normally registered in the declarations array of an NgModule.
declarations: [HighlightDirective, CurrencyPipe]

11. How were services provided before standalone APIs?

Services could be registered in an NgModule's providers, although providedIn: 'root' became the preferred application-wide approach.
@Injectable({ providedIn: 'root' })

12. How was routing configured using AppRoutingModule?

A routing module typically called RouterModule.forRoot(routes) and exported RouterModule. AppModule then imported AppRoutingModule.
imports: [RouterModule.forRoot(routes)]

13. How was HttpClientModule configured before standalone APIs?

HttpClientModule was imported into an NgModule, usually AppModule, to make HttpClient available.
imports: [HttpClientModule]

14. How was BrowserModule used in module-based Angular?

The root AppModule imported BrowserModule to provide browser-specific Angular functionality required to run the application.
imports: [BrowserModule]

15. How was FormsModule imported before standalone components?

FormsModule was added to an NgModule's imports array for template-driven forms.
imports: [FormsModule]

16. How was ReactiveFormsModule imported before standalone components?

ReactiveFormsModule was added to the appropriate NgModule's imports array to use reactive forms.
imports: [ReactiveFormsModule]

17. What replaced AppModule in a standalone Angular application?

Standalone Angular does not require a root AppModule. The application is bootstrapped using bootstrapApplication(), with providers commonly configured through app.config.ts.

18. What replaced platformBrowserDynamic().bootstrapModule(AppModule)?

The standalone approach uses bootstrapApplication().
Old: platformBrowserDynamic().bootstrapModule(AppModule) → New: bootstrapApplication(App, appConfig)

19. What is bootstrapApplication()?

bootstrapApplication() starts Angular using a standalone root component without requiring AppModule.
bootstrapApplication(App, appConfig);

20. What is ApplicationConfig?

ApplicationConfig defines application-level providers for a standalone Angular application, such as routing and HTTP.
const appConfig: ApplicationConfig = { providers: [...] };

21. What is app.config.ts?

app.config.ts commonly contains the application's global provider configuration in standalone Angular.
Example: providers: [provideRouter(routes), provideHttpClient()]

22. What is app.routes.ts?

app.routes.ts commonly contains the application's route definitions as a Routes array.
export const routes: Routes = [{ path: 'products', component: Products }];

23. What does standalone: true mean?

standalone: true means the component, directive, or pipe can be used without being declared in an NgModule. It manages template dependencies through its own imports.

24. How are dependencies imported directly into standalone components?

A standalone component uses its own imports array to import required components, directives, pipes, or NgModules.
@Component({ standalone: true, imports: [FormsModule, RouterLink] })

25. What is the difference between NgModule imports and standalone component imports?

NgModule imports make dependencies available through the module. Standalone imports declare dependencies directly where the component needs them.
Standalone therefore reduces module-level indirection.

26. What replaced RouterModule.forRoot() in standalone Angular?

For standalone application configuration, provideRouter(routes) replaces the common root RouterModule.forRoot(routes) setup.
providers: [provideRouter(routes)]

27. What is provideRouter()?

provideRouter() registers Angular's Router and route configuration using standalone provider APIs.
provideRouter(routes)

28. What replaced HttpClientModule in modern standalone configuration?

Modern standalone applications generally use provideHttpClient() instead of importing HttpClientModule at the root.
providers: [provideHttpClient()]

29. What is provideHttpClient()?

provideHttpClient() configures Angular's HttpClient service using the modern provider-based API.
provideHttpClient()

30. How are HTTP interceptors configured in standalone Angular?

Modern Angular can register functional interceptors using withInterceptors().
provideHttpClient(withInterceptors([authInterceptor, errorInterceptor]))

31. How are route guards configured in standalone Angular?

Standalone routing commonly uses functional guards directly in route definitions.
{ path: 'admin', component: Admin, canActivate: [authGuard] }

32. Can standalone components use existing NgModules?

Yes. Standalone components can import existing NgModules, which makes gradual migration possible.
imports: [FormsModule, SharedModule]

33. Can NgModule-based components use standalone components?

Yes. An NgModule can import a standalone component through its imports array, rather than declarations.
imports: [StandaloneHeader]

34. Can standalone and NgModule approaches coexist?

Yes. Angular supports hybrid applications containing both standalone APIs and NgModules. This is especially useful during incremental migration.

35. How do you migrate an NgModule-based Angular application to standalone?

Convert components/directives/pipes to standalone, move their dependencies to local imports, replace module-level providers with provider APIs, and eventually bootstrap with bootstrapApplication().

36. What are the advantages of standalone Angular?

Standalone APIs provide less boilerplate, simpler dependency management, easier lazy loading, and fewer NgModules. Dependencies are also more explicit at the component level.

37. What are the disadvantages or migration challenges of standalone Angular?

Large existing applications may require migration effort, and teams maintaining older code still need NgModule knowledge. Some older libraries or architecture patterns may also remain module-oriented.

38. Standalone vs NgModule — what is the difference?

NgModule: components are grouped and declared inside modules.
Standalone: components manage their dependencies directly and can work without NgModules.

39. Is NgModule deprecated?

No. NgModule is still supported, but standalone APIs are the recommended approach for new Angular development. Existing NgModule applications continue to work.

40. When maintaining an older Angular project, why is understanding NgModule still important?

Many enterprise Angular applications were built using AppModule, feature modules, declarations, and module-based routing. Understanding NgModule is therefore important for maintenance and migration.