What is the scope of an Angular module Import

Question

If I have three modules

1. AppModule
2. SharedModule
3. ItemModule

Inside the SharedModule I have a PaginatorComponent that is exported as follows:

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PaginatorComponent } from './paginator/paginator.component';

@NgModule({
  imports: [
      CommonModule
  ],
  declarations: [
      PaginatorComponent
  ],
  providers: [],
  exports: [
      PaginatorComponent
  ]
})
export class SharedModule { }

I then import the shared module into my AppModule using the lines

app.module.ts

import { SharedModule } from './shared/shared.module';

imports: [
      ...
      SharedModule,
      ...

Question; Should my third "ItemModule" automatically have access to the PaginatorComponent or do I need to import directly into the 3rd module? Currently I get a variation of the generic error:

Can't bind to 'totalItems' since it isn't a known property of 'app-paginator'.
1. If 'app-paginator' is an Angular component and it has 'totalItems' input, then verify that it is part of this module.

Many thanks.

Answer 1

The answer can be found at https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407 thanks to @Rama

In short, the answer is

1. If the module is imported for components, you'll need to import it in each module needing them;

2. If the module is imported for services, you'll need to import it only once, in the first app module.

Answer 2

This is something I misunderstood when I started Angular 2+/

You need to re-import every component you use in every module.

With you example, if you need to use PaginatorComponent into your ItemModule , you will need to import SharedModule into your ItemModule to make it work. (because SharedModule exports PaginatorComponent)

This is not the case for services/providers. If you inject a service, every child component will be able to access it.