Why it is impossible to address from an external dialog box in a component method?

Please help me understand the situation. I will consider 2 cases, and then I will tell you how they can not perform the same action.

Case 1:

There is a component:

import { Component, OnInit, Inject } from '@angular/core'; import { Http } from '@angular/http'; import { MatDialog } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { PositionComponent } from './modals/position/position.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor(private http: Http, private matDialog: MatDialog) { }; public test() { console.log('test'); alert('test'); }; public test2() { console.log('test2'); alert('test2'); }; private addParticipant() { this.matDialog.open(DialogOverviewExampleDialog, { width: '400px', data: { title: 'Создание нового участника.', id: 666 } }); }; } В ЭТОМ ЖЕ файле я добавил компонент для material диалогового окна(шаблон dialog-overview-example-dialog.html тоже создал): @Component({ selector: 'dialog-overview-example-dialog', templateUrl: 'dialog-overview-example-dialog.html', providers: [AppComponent], }) export class DialogOverviewExampleDialog { private id_: string = ''; constructor( private appComponent: AppComponent, public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) private data: any) { this.id_ = data.id; setTimeout(function() { appComponent.test(); }, 1000); } } 

As a result, when an event occurs in the AppComponent (I omitted the details), the dialog box is invoked via addParticipant (). This kono opens. Then after 1 second, the dialog box component calls the test () method of the AppComponent component. It all works.

Case 2:

I created a separate dialog box component (that is, in a separate file). Here is his code:

 import { Component, OnInit, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ParticipantsService } from '../../services/participants.service'; import { AppComponent } from '../../app.component'; @Component({ selector: 'app-position', templateUrl: './position.component.html', styleUrls: ['./position.component.scss'], providers: [AppComponent] }) export class PositionComponent implements OnInit { private position: string = ''; private id: string = ''; constructor(private matDialogRef: MatDialogRef<PositionComponent>, private appComponent: AppComponent, private participantsService: ParticipantsService, @Inject(MAT_DIALOG_DATA) public data: any) { this.position = data.position; this.id = data.id; } private submit2(): void { this.appComponent.test2(); }; } 

As you can see, I similarly imported AppComponent and registered it in providers. And also in the designer created an instance.

Further, when in the template the user clicks on the button:

 <button class="btn btn-common" mat-button (click)="submit2()"> вызвать </button> 

, the submit2 () call is triggered. BUT this method cannot call the component's AppComponent method.

The browser console shows the following error:

 Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files. at syntaxError (http://localhost:4200/vendor.bundle.js:47518:34) at http://localhost:4200/vendor.bundle.js:61654:40 at Array.forEach (native) 

The Linux console does not display any errors.