Angular 8 Interview Questions and Answers for 2025

Modules is basically grouping of multiple components, services, directives together to from a standalone unit of Application. 

For example, let us assume that we are building an E-Commerce web application, this application will have various key functionality like Login/register, Product listing, Shopping cart, Payment Gateway etc. Each of these functionalities will be developed using multiple components, pipes, directives etc. for it to work, this collection of Components, pipes, directives is grouped together in a Modules such that all that is required for a particular functionality to work is inside a Module that covers that functionality. This improves Application performance, makes it lightweight and maintainable the code. 

To define module, we can use the NgModule. When we create a new project using the Angular –cli command, the ngmodule is created in the app.module.ts file by default and it looks as follows 

import { BrowserModule } from '@Angular/platform-browser';import { NgModule } from '@Angular/core';import { AppComponent } from './app.component'; 
@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent]}) 
export class AppModule { } 

The Router is a module that is used for navigating between different views (components) in an application based on user interaction with the application. The router enables us to navigate between different parts of our application without the need for a page reload, which improves the user experience. 

The Angular Router enables developers to map specific URL patterns to a component, so that when a user navigates to that URL, the router will automatically instantiate and display the appropriate component. The router also allows for passing parameters to components through the URL, and it can also maintain the application's state and handle navigation events. 

To use the Angular Router, we need to import the RouterModule and Routes from the @Angular/router package. 

RouterModule is the main module for the router and the Routes is an array of route configuration objects. 

The Angular Router also provide a different way to navigate, we can navigate by URL, navigate with route's name, navigate with relative path and pass parameters, navigate with query parameters and many more. 

Here are some common use cases for using services in Angular: 

• HTTP communication: Services are commonly used to handle HTTP requests to a server, such as sending data or retrieving data. By placing http logic in a service, it can be reused across multiple components that eliminates the need for duplicating the same logic in multiple places. 
• Shared state: Services can be used to share state across multiple components. For example, if multiple components need to know a certain value, this state can be stored in a service and then injected into the various components that need it. 
• Utility functions: Services can contain utility/common functions that can be reused across multiple components, such as validation logic, formatting logic, or any other type of logic that is needed by multiple components. 
• Centralized data management: Services can be used to centralize the management of data, such as fetching data from a server or managing the data in memory. This keeps the data management logic in a single place and makes it easier to maintain the application. 
• Intercomponent communication: Services can be used to facilitate communication between components that are not in a parent-child relationship. For example, one component may want to notify another component when an event occurs, this can be done using services. 
• Dependency injection: Services can be easily injected into components by Angular's dependency injection system, making it easy to use the service across multiple components and making the codebase more maintainable and compact. 

Angular Observables is used for transmitting or passing the data from one component to another or from a service to a component. Observables is one of the core concepts of Angular which is used for Asynchronous Programming. 

Observables do not execute on its own, it only executes and passes the data when someone subscribes to it. The method that emits the value when subscribed is called Observable and the method that subscribes to the Observable is called subscriber. 

One of the common use cases of observables in Angular is calling an API end point asynchronously and returning the result back to the subscriber once the API execution is complete and it returns the response. 

See the example below where we call an http endpoint and mark the function as Observable and then subscribe the Observable function to get the asynchronous response 

getApiRespnse(): Observable<any> { 
return this.http.get(apiUrl); 
); 
} 
this.apiService.getApiResponse().subscribe((res) => { 
console.log('APi response from observable is:', res); 
}) 

Both Promises and observables are a way to handle asynchronous data in JavaScript, but they have some key differences. 

Promises: 

• A promise represents a single value that will be returned at some point in the future. 
• Once a promise is fulfilled or rejected, it cannot change state. 
• A promise can be used only once. 
• A promise can be consumed by using the then method, which allows to attach callbacks for when the promise is fulfilled or rejected. 

Observables: 

• An observable is a stream of values that can emit multiple values over time. 
• Observables are lazy, the source only starts to emit values when you subscribe to it. 
• An observable can emit multiple values over a period of time, unlike a promise which only resolves a single value. 
• An observable can be consumed by subscribing to it, this allows to attach multiple callbacks to the stream of values and allows to handle errors and complete events. 
• Observables allow to use operators to transform and filter the stream of data. 

In general, we can use promises for one-time-events and when the use-case is simple and we don't expect multiple values. On the other hand, observables are more powerful and should be used when working with async data streams, multiple values and complex use-cases where we need operators for the data flow. 

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables, to make it easier for composing asynchronous and event-based programs. 

An observable is a stream of values that can emit multiple values over time, similar to an event. With RxJS, we can create observables from a wide variety of data sources such as events, promises, or even plain arrays, and we can use them to transform, filter, and compose streams of data. 

RxJS provides a large set of operators that we can use to transform and filter the data in an observable stream. These operators include basic operations such as map, filter, and reduce, as well as more advanced operators like merge, concat, switchMap, and debounceTime. 

RxJS also allows us to handle errors in the observable stream, with error handling operators like catchError, and it provide a way to complete the stream with complete and finally operators. 

RxJS is widely used in Angular for handling asynchronous data and events. Angular's HTTP client and the Angular Router both use RxJS observables, and many third-party libraries also rely on RxJS. The library is also commonly used in other types of web and mobile development to handle asynchronous events, real-time communication and data streams. 

RxJS is a powerful library, but it requires a certain level of understanding to effectively use it. Understanding the concepts of observables, operators, and the observer pattern will help us to use RxJS effectively. 

• Components: These are the basic building blocks of an Angular application. Each component controls a portion of the screen, called a view, and manages a small section of the overall application logic. 
• Templates: These define the layout of a component's view and determine how the component's data is displayed. Templates are written using HTML, CSS, and Angular's template syntax. 
• Services: These are used to share data and functionality across different parts of the application. Services are typically used to encapsulate business logic or to interact with a server. 
• Modules: These are used to organize an Angular application by grouping together related components, services, and other pieces of functionality. 
• Data binding: This is the mechanism that Angular uses to connect a component's view with its underlying data model. Data binding makes it easy to update the view when the data model changes and vice versa. 
• Dependency injection: This is a mechanism that Angular uses to manage the dependencies of different parts of an application. Dependency injection makes it easy to replace or mock dependencies in different parts of the application. 
• Routing: This is the mechanism that Angular uses to navigate between different views in an application. Routing allows us to define different URLs for different parts of the application and to easily navigate between them. 

Angular provides several built-in pipes that we can use in our templates to transform data. Here is a list of some commonly used built-in pipes in Angular: 

• date: Formats a date according to the specified format. 
• currency: Formats a number as currency. 
• decimal: Formats a number as a decimal. 
• percent: Formats a number as a percentage. 
• json: Converts a value to JSON string. 
• lowercase: Transforms a string to lowercase. 
• uppercase: Transforms a string to uppercase. 
• async: Waits for a promise or an observable to emit a value and then transforms it. 
• slice: Extracts a section of an array or a string. 
• i18nSelect: Transforms a value into a string based on the current locale. 
• i18nPlural: Chooses a value from an object based on the plural category of the value. 
• KeyValue: Transforms an Object to an array of key value pairs. 
• titlecase: Transforms a string to Title Case 
• number: Formats a number to a string. 
• percent: Formats a number as a percentage. 

In Angular 8, the HttpClient module is a built-in module that allows us to make HTTP requests. It is part of the @Angular/common/http package and can be imported in our component or service to make use of its methods. The HttpClient module replaces the previous Http module and has some added features such as support for typed return values and interceptors. With HttpClient, we can make requests using methods such as GET, POST, PUT, DELETE, etc. and handle the response with observables.  

Angular common modules are a collection of modules that provide utility functions and services that are commonly used by other parts of an Angular application. These modules are part of the @Angular/common package, which is a built-in package included with an Angular application. 

Some of the common modules that are part of this package include: 

• FormsModule: provides directives and services for building forms in Angular. 
• HttpClientModule: provides an HttpClient for making HTTP requests 
• CommonModule: provides a set of common directives and pipes that are often used by other modules in an application, such as ngIf and ngFor. 
• PlatformLocation : Gives information about the current location of the application 
• BrowserModule : Provides services and directives that are specific to web browsers. 
• LocationStrategy : abstract class used to configure the service that is used to look up the location of a component in the DOM 

These modules are automatically imported in @NgModule when we create a new Angular application using Angular CLI. 

ng-container is a syntax element that is used to render the data in the HTML without actually taking up the space in the DOM. ng-container as an element does not render in DOM unlike span, div tags, only the data inside the ng-container element is rendered. 

This is quite useful when we want to render the data based on certain conditional statement but don't want to take up unnecessary DOM space for the conditions that are not satisfied. 

See example below: 

<ng-container *ngIf="marks >= 50"> 
<p>Your have Passed the Exam</p> 
</ng-container> 
<ng-container *ngIf="marks < 50"> 
<p>Your have Failed the Exam</p> 
</ng-container> 

localStorage is used to store the data in the user's browser to access it at some later point in time. Usually some frequently used data is used in the localStorage so that is can be accessed again without the need to fetch or calculate the result again. We can set the localStorage by giving it a unique name and also retrieve the data stored into localStorage by its name 

Example of Using storing data into localStorage: 

localStorage.setItem('discountedPrice', price); 

Example of reading stored value from localStorage: 

var priceAfterDiscount = localStorage.getItem('discountedPrice'); 

In Angular, routing allows us to navigate between different views or pages of our application. To route from one page to another, we need to set up routing in our application by configuring routes and a router outlet. 

Here's an example of how we might set up routing in an Angular application: 

First, we need to import the RouterModule and Routes from @Angular/router in our app.module.ts file. 

Next, we need to create an array of routes, where each route is an object with a path and a component property. The path property is the URL path that the route corresponds to, and the component property is the component that should be displayed when the route is activated. 

import { CommonModule } from '@Angular/common'; 
import { Routes, RouterModule } from '@Angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactUsComponent} from './about/contactUs.component'; 

Underneath the imports, add a new routes array to store the paths that we will use when routing to each page. 

const routes: Routes = [ 
  { path: '', component: HomeComponent }, 
  { path: 'contactUs', component: ContactUsComponent} 
]; 

Replace the NgModule block with the following, which adds the RouterModule to the imports and exports array. 

@NgModule({ 
  declarations: [], 
  imports: [ 
    CommonModule, 
    RouterModule.forRoot(routes) 
  ], 
  exports: [RouterModule] 
}) 

In our HTML file where we wish to route from add 

<div class="navbar"> 
  <a class="link" href="">Home</a> 
  <a class="link" href="/contactUs">Contact Us</a> 
</div> 

In Angular, a routerLink is a directive that allows us to create links between different routes in our application. When we create a link using the routerLink directive, it automatically updates the displayed component when the link is clicked. 

We can use the routerLink directive in an a element or any other elements like button in our template to create a link to a specific route. The value of the routerLink directive is a string or an array of link parameters that correspond to the route we want to navigate to. 

<h1>Angular Router</h1> 
<nav> 
<a routerLink="/home" >Home</a> 
<a routerLink="/user" >Users</a> 
</nav> 
<router-outlet></router-outlet> 

An active routerLink is a state of the routerLink directive, it will add a CSS class to the link element when the current route matches the link route. 

We can use the routerLinkActive directive to add a CSS class to an element when the route becomes active. For example, we could use the routerLinkActive directive to highlight the currently active link in a navigation menu like this: 

<h1>Angular Router</h1> 
<nav> 
<a routerLink="/home" routerLinkActive="active">Home</a> 
<a routerLink="/user" routerLinkActive="active">Users</a> 
</nav> 
<router-outlet></router-outlet> 

Angular has large number of third party libraries that we can use in our application to enhance the performance and develop applications quickly with ready to use functions using these libraries. We need to install these libraries using npm install and use in our project as follows:

Install the library:

npm install --save underscore

Use the Library in Angular component:

import * as _ from 'underscore'; 
export class AppComponent { 
constructor() { 
const myArray: number[] = [9, 1, 5]; 
const lastItem: number = _.last(myArray); //Using underscore 
console.log(lastItem); //5 
}} 

An Observable does not publish records on its won't unless someone subscribes to it. So we need to subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications. Let's take an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console.

In addition to default inbuilt directives provided by Angular we can also create our own custom directive as per our requirement. To create a custom directive, we need to replace the @Component decorator with @Directive decorator. 

Example of Custom Attribute Directive to highlight the background color of text: 

import { Directive, ElementRef } from '@Angular/core'; 
@Directive({ 
selector: '[appTextHighlight]' 
}) 
export class TextHighlightDirective { 
constructor(private eleref: ElementRef) { 
eleref.nativeElement.style.background = 'yellow'; 
} 
} 

Using Custom Directive in component: 

Import the custom directive in app.module.ts and add it in declarations 

import { TextHighlightDirective } from './text-highlight.directive'; 
@NgModule({ 
declarations: [ 
TextHighlightDirective 
] 
}) 

Now we can use it in our component as 

<appTextHighlight>Highligh my text</appTextHighlight>

Lazy loading is one of the important concepts of Angular Routing. Lazy Loading download the web pages in chunks instead of downloading everything altogether in a big bundle. Lazy Loading is used to load only required module with the help of property loadChildren. 

The lazy load of the modules can be done using the root routing module. This loads the modules lazily by using loadChildren method. 

 Let's load both Customer and Order feature modules lazily as below, 

const routes: Routes = [ 
{ 
path: 'customers', 
loadChildren: () => import('./customers/customers.module').then(module => module.CustomersModule) 
}, 
{ 
path: 'orders', 
loadChildren: () => import('./orders/orders.module').then(module => module.OrdersModule) 
}, 
{ 
path: ", 
redirectTo: ", 
pathMatch: 'full' 
} 
]; 

Decorators acts as metadata that is used to decorate a class. Decorators are helps in configuring the expected behavior of the class. Different Types of Decorators are 

1. Class Decorators e.g. @Component and @NgModule 

import { NgModule, Component } from '@Angular/core'; 
@Component({ 
selector: 'my-component', 
template: '<div>Class decorator</div>', 
}) 
export class MyComponent { 
constructor() { 
console.log('Hey I am a component!'); 
} 
} 
@NgModule({ 
imports: [], 
declarations: [], 
}) 
export class MyModule { 
constructor() { 
console.log('Hey I am a module!'); 
} 
} 

2. Property Decorators Used for properties inside classes, e.g. @Input() and @Output() 

import { Component, Input } from '@Angular/core'; 
@Component({ 
selector: 'my-component', 
template: '<div>Property decorator</div>' 
}) 
export class MyComponent { 
@Input() title: string; 
} 

3. Method Decorators Used for methods inside classes, e.g. @HostListener() 

import { Component, HostListener } from '@Angular/core'; 
@Component({ 
selector: 'my-component', 
template: '<div>Method decorator</div>' 
}) 
export class MyComponent { 
@HostListener('click', ['$event']) 
onHostClick(event: Event) { 
// clicked, `event` available 
} 
} 

4. Parameter Decorators Used for parameters inside class constructors, e.g. @Inject() 

import { Component, Inject } from '@Angular/core'; 
import { MyService } from './my-service'; 
@Component({ 
selector: 'my-component', 
template: '<div>Parameter decorator</div>' 
}) 
export class MyComponent { 
constructor(@Inject(MyService) myService) { 
console.log(myService); // MyService 
} 
} 

TypeScript classes like OOPS classes has a default method called constructor which is normally used for the initialization of variables, properties. Whereas ngOnInit method is one of the Angular LifeCycle hook, especially used to define Angular bindings. Even though constructor gets called first, it is preferred to move all our Angular bindings to ngOnInit method. In order to use ngOnInit, we need to implement OnInit interface as below, 

export class App implements OnInit{ 
constructor(){ 
//called first time before the ngOnInit() 
} 
ngOnInit(){ 
//called after the constructor and called after the first ngOnChanges() 
} 
} 

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While normal Observables are unicast, Subjects are multicast. 

A Subject is like an Observable, but it has ability to multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. 

import { Subject } from 'rxjs'; 
const subject = new Subject<number>(); 
subject.subscribe({ 
next: (v) => console.log(`observerA: ${v}`) 
}); 
subject.subscribe({ 
next: (v) => console.log(`observerB: ${v}`) 
}); 
subject.next(1); 
subject.next(2)

BehaviourSubject requires initialization while its creation i.e. it requires an initial value to be assigned while creating the subject and stores the current value that it emits  first time to the subscribers. 

import { Component, VERSION } from "@Angular/core"; 
import { BehaviorSubject, Subject } from "rxjs"; 
@Component({ 
selector: "my-app", 
templateUrl: "./app.component.html", 
styleUrls: ["./app.component.css"] 
}) 
export class AppComponent { 
subject$ = new BehaviorSubject("0"); 
ngOnInit() { 
this.subject$.subscribe(val => { 
console.log("Sub1 " + val); 
}); 
this.subject$.next("1"); 
this.subject$.next("2"); 
this.subject$.subscribe(val => { 
console.log("sub2 " + val); 
}); 
this.subject$.next("3"); 
this.subject$.complete(); 
} 
} 
/* 
Result 
Sub1 0 
Sub1 1 
Sub1 2 
sub2 2 
Sub1 3 
sub2 3 
*/ 

Notice how we have initialized the subject with initial value of 0 

subject$ = new BehaviorSubject("0"); 

ReplaySubject transmit old values to new subscribers when they first subscribe.

The ReplaySubject stores every value it emits in its buffer and will emit them to the new subscribers in the same order it received them. Buffer can be configured using the arguments bufferSize and windowTime bufferSize is the no. of items that ReplaySubject will keep in its buffer, bydefault this value is infinity WindowTime is the duration for which it has to keep the value in the buffer, it defaults to infinity. 

AsyncSubject only emits the latest value that too only when it completes. If it errors out then it will emit an error and will not emit any values. 

import { Component, VERSION } from "@Angular/core"; 
import { AsyncSubject, Subject } from "rxjs"; 
@Component({ 
selector: "my-app", 
templateUrl: "./app.component.html", 
styleUrls: ["./app.component.css"] 
}) 
export class AppComponent { 
subject$ = new AsyncSubject(); 
ngOnInit() { 
this.subject$.next("1"); 
this.subject$.next("2"); 
this.subject$.subscribe( 
val => console.log("Sub1 " + val), 
err => console.error("Sub1 " + err), 
() => console.log("Sub1 Complete") 
); 
this.subject$.next("3"); 
this.subject$.next("4"); 
this.subject$.subscribe(val => { 
console.log("sub2 " + val); 
}); 
this.subject$.next("5"); 
this.subject$.complete(); 
this.subject$.error("err"); 
this.subject$.next("6"); 
this.subject$.subscribe( 
val => console.log("Sub3 " + val), 
err => console.error("sub3 " + err), 
() => console.log("Sub3 Complete") 
); 
} 
} 
/* 
Result 
Sub1 5 
sub2 5 
Sub1 Complete 
Sub3 5 
Sub3 Complete 
*/ 

In the above example, all the subscribers will receive the value 5 including those who subscribe after the complete event. But if the AsyncSubject gives error, then all subscribers will receive an error notification but no value 

Angular Animations is used to implement sophisticated and compelling animations for our Angular single page web application that makes the UI/UX more interactive and attractive. The animation transition function is used to specify the changes that occur between one state and another over a period of time. It accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an animate() function. 

BrowserAnimationsModule needs to be imported from @Angular/platform-browser/animations to use animations in Angular. Let us see an example of changing the color of the button using Angular animations. 

import { Component, OnInit } from '@Angular/core'; 
import { trigger, state, style, animate, transition } from '@Angular/animations'; 
@Component({ 
selector: 'app-example', 
template: ` 
<h3>Click the button to change its color!</h3> 
<button (click)="clickMe()" [@buttonClicked]="isGreen">Toggle Me!</button> 
`, 
animations: [ // metadata array 
trigger('buttonClicked', [ // trigger block 
state('true', style({ // final CSS following animation 
backgroundColor: 'green' 
})), 
state('false', style({ 
backgroundColor: 'red' 
})), 
transition('true => false', animate('1000ms linear')), // animation timing 
transition('false => true', animate('1000ms linear')) 
]) 
] // end of trigger block 
}) 
export class ExampleComponent { 
isGreen: string = 'true'; 
clickMe() { 
this.isGreen = this.isGreen === 'true'? 'false': 'true'; // change in data-bound value 
} 
} 

It is recommended to use case conventions in Angular to distinguish the names of various types. Angular follows the list of the below case types. 

• camelCase Symbols, properties, methods, pipe names, non-component directive selectors, constants use lowercase on the first letter of the item. For example, "selectedUser" 
• UpperCamelCase (or PascalCase) Class names, including classes that define components, interfaces, NgModules, directives, and pipes uses uppercase on the first letter of the item. 
• dash-case (or "kebab-case") The descriptive part of file names, component selectors uses dashes between the words. For example, "app-user-list". 
• UPPER_UNDERSCORE_CASE All constants use capital letters connected with underscores. For example, "NUMBER_OF_USERS". 

Dynamic content can be displayed in the component template using content projection. The <ng-content></ng-content> tag act as a placeholder for dynamic content, then when the template is parsed Angular will replace <ng-content> placeholder tag with our content this is called content projection. 

Content projection allows a directive to use templates while still being able to clone the original content and add it to the DOM, which is a programming interface for HTML and XML documents and represents a page where programs can change the document structure, style, and content. 

Example of content projection: 

Create a component and add ng-conent tag in the template as below 
@Component({  selector: 'app-demo', 
template: `  
 <h2>Content Projection</h2> 
  Heading:  
 <ng-content></ng-content>   
Description:  
 <ng-content select="[description]"></ng-content> 
`}) 

Project the content to the component as follows: 

<app-demo> 
 <p>Projected content!</p> 
<p description>  Content Projection in Angular </p> 
</app-demo> 

Here as we had multiple ng-content tags, we add a name to one of the tags and use the same name with ng-content tag with select attribute to load the desired content in respective ng-content tag. 

If a url does not match any defined route in Angular then application throws an error, to handle these cases where url does not match any route we can make use of Wildcard route. Wildcard route will match any url that is not defined in Angular Routes and display the default component as defined in the routes.: 

Suppose we want to display PageNoFoundComponent as a wildcard route we can do it as below 

{ path: '**', component: PageNotFoundComponent } 

The @ViewChild() and @ViewChildren() decorators in Angular provide a way to access and manipulate DOM elements, directives and components. @ViewChild() is used to query one element from the DOM and @ViewChildren() for multiple elements. 

If we want to access following inside the Parent Component, use @ViewChild() decorator of Angular. 

1. Child Component 
2. Directive 
3. DOM Element 

ViewChild returns the first element that matches the selector. Example: @ViewChild() 

We are using MessageComponent inside AppComponent as shown in below listing: 

import { Component, OnInit } from '@Angular/core'; 
@Component({ 
selector: 'app-root', 
template: ` 
<div> 
<h1>Messages</h1> 
<app-message [message]='message'></app-message> 
</div> 
` 
}) 
export class AppComponent implements OnInit { 
message: any; 
ngOnInit() { 
this.message = 'Hello World !'; 
} 
} 

Here MessageComponent is located inside template of AppComponent, so it can be accessed as ViewChild. 

export class AppComponent implements OnInit, AfterViewInit { 
message: any; 
@ViewChild(MessageComponent) messageViewChild: MessageComponent; 
ngAfterViewInit() { 
console.log(this.messageViewChild); 
} 
ngOnInit() { 
this.message = 'Hello World !'; 
} 
} 

• RouterModule.forRoot(ROUTES): forRoot creates a module that contains all the directives, the given routes, and the router service itself. 
• RouterModule.forChild(ROUTES): forChild creates a module that contains all the directives and the given routes, but does not include the router service. 

Example: 

RouterModule.forRoot(ROUTES) 
import { Routes, RouterModule } from '@Angular/router'; 
export const ROUTES: Routes = []; 
@NgModule({ 
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)], 
  // ...}) 
export class AppModule {} 
Example: RouterModule.forChild(ROUTES) 
import { NgModule } from '@Angular/core'; 
import { CommonModule } from '@Angular/common'; 
import { Routes, RouterModule } from '@Angular/router'; 
export const ROUTES: Routes = []; 
@NgModule({ 
  imports: [CommonModule, RouterModule.forChild(ROUTES)], 
  // ...}) 
export class ChildModule {} 

• forRoot(): service register to entire application 
• forChild(): service register to particular child component