In my code, I have some buttons and when you click them, a pop-up should open, and you are supposed to see the details in the form of a list. Whenever I click those buttons, I get the error below. I don't know why I can't reach the property I want. What could be wrong with my code, and How can I fix it?

TS Code:

@Component({
  selector: 'warehouse-detail-dialog',
  templateUrl: './warehouse-detail-dialogponent.html',
  styleUrls: ['./warehouse-detail-dialogponent.scss']
})
export class WarehouseDetailDialogComponent implements OnInit {

  cell: ICell;
  userRights: IActionRoleMap;


  displayedColumns: string[] = [
    'EntryPackageBarcode',
    'StockIntegrationCode',
    'ProductName',
    'Balance',
];
dataSource: MatTableDataSource<IStockPackageTransaction>;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;


  /**
   *
   */
  constructor(
      private _terminalService: TerminalService,
      private _router: Router
  ) {

    _terminalService.onCellDetailChanged.subscribe((response: ICell) => {
      this.cell = response;
      

      this.dataSource = new MatTableDataSource(response.StockPackageTransactions);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

  });

     
  }

TS for Service:

cellDetail: ICell;
    onCellDetailChanged: BehaviorSubject<any> = new BehaviorSubject([]);
 getCellDetailById(id: string) {
        return new Promise((resolve, reject) => {
            this._http
                .get("Production/GetCellDetailById/" + id)
                .subscribe((response: ICell) => {
                    this.cellDetail = response;
                    this.onCellDetailChanged.next(this.cellDetail);
                    resolve(this.cellDetail);
                }, reject);
        });
    }

Error:

WarehouseDetailDialogComponent_Host.ngfactory.js? [sm]:1 ERROR NullInjectorError: StaticInjectorError(AppModule)[WarehouseDetailDialogComponent -> TerminalService]: 
  StaticInjectorError(Platform: core)[WarehouseDetailDialogComponent -> TerminalService]: 
    NullInjectorError: No provider for TerminalService!
    at NullInjector.get (core.js:778)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveNgModuleDep (core.js:26403)
    at NgModuleRef_.get (core.js:27491)
    at resolveNgModuleDep (core.js:26403)

In my code, I have some buttons and when you click them, a pop-up should open, and you are supposed to see the details in the form of a list. Whenever I click those buttons, I get the error below. I don't know why I can't reach the property I want. What could be wrong with my code, and How can I fix it?

TS Code:

@Component({
  selector: 'warehouse-detail-dialog',
  templateUrl: './warehouse-detail-dialog.ponent.html',
  styleUrls: ['./warehouse-detail-dialog.ponent.scss']
})
export class WarehouseDetailDialogComponent implements OnInit {

  cell: ICell;
  userRights: IActionRoleMap;


  displayedColumns: string[] = [
    'EntryPackageBarcode',
    'StockIntegrationCode',
    'ProductName',
    'Balance',
];
dataSource: MatTableDataSource<IStockPackageTransaction>;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;


  /**
   *
   */
  constructor(
      private _terminalService: TerminalService,
      private _router: Router
  ) {

    _terminalService.onCellDetailChanged.subscribe((response: ICell) => {
      this.cell = response;
      

      this.dataSource = new MatTableDataSource(response.StockPackageTransactions);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

  });

     
  }

TS for Service:

cellDetail: ICell;
    onCellDetailChanged: BehaviorSubject<any> = new BehaviorSubject([]);
 getCellDetailById(id: string) {
        return new Promise((resolve, reject) => {
            this._http
                .get("Production/GetCellDetailById/" + id)
                .subscribe((response: ICell) => {
                    this.cellDetail = response;
                    this.onCellDetailChanged.next(this.cellDetail);
                    resolve(this.cellDetail);
                }, reject);
        });
    }

Error:

WarehouseDetailDialogComponent_Host.ngfactory.js? [sm]:1 ERROR NullInjectorError: StaticInjectorError(AppModule)[WarehouseDetailDialogComponent -> TerminalService]: 
  StaticInjectorError(Platform: core)[WarehouseDetailDialogComponent -> TerminalService]: 
    NullInjectorError: No provider for TerminalService!
    at NullInjector.get (core.js:778)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveNgModuleDep (core.js:26403)
    at NgModuleRef_.get (core.js:27491)
    at resolveNgModuleDep (core.js:26403)

• javascript
• angular
• typescript

• 1 Where are you providing the service? Are you using providedIn: 'root'? – eko Commented May 7, 2021 at 9:19

2 Answers 2

Add TerminalService to the providers: [] array in respective the root module (possibly app.module.ts). The error has clue which is No provider for TerminalService!

Providing it in the providers array in the root module is a solution but you should be using the providedIn pattern for 1 simple and important reason: tree-shaking. If you provide your services with

@Injectable({
  providedIn: 'root'
})

when you don't use them, they will be tree-shaked and your bundle size will be smaller

Source: https://angular.io/guide/providers#providedin-and-ngmodules