Angular 7: problem with include Component

Question

i have this component, already registered in the app.module.ts:

    import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  providers: [MessageService]
})

export class ModalComponent {

  constructor(
    private messageService: MessageService
  ) { }

  onConfirm() {
  }

  showError(error) {
  }

}

but i cannot include this component in another component. i get this error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TopbarComponent -> ModalComponent]: StaticInjectorError(Platform: core)[TopbarComponent -> ModalComponent]:

this is my TopbarComponent:

import { Component } from '@angular/core';
import { SessionStorageService } from 'angular-web-storage';
import { Router } from "@angular/router"
import { AppComponent } from '../app.component';
import { ModalComponent } from '../modal/modal.component';
import { HomeComponent } from '../home/home.component';
import { JhttpService } from '../jhttp.service';

@Component({
  selector: 'app-topbar',
  templateUrl: './topbar.component.html'
})

export class TopbarComponent {

  user = this.session.get('USER');

  constructor(
    private jhttpService: JhttpService,
    private session: SessionStorageService,
    private router: Router,
    private glob: AppComponent,
    private modal: ModalComponent,
    private app: HomeComponent
  ) { }

  onLogoutButtonClick(event) {
    this.modal.showError('CIAO');
    event.preventDefault();
  }
}

any suggestion??

ok, i put the stacktrace here: https://pastebin.com/GPzJZ7gU — matteo, Dec 07 '18 at 17:10

Sunil Singh · Answer 1 · 2018-12-07T17:35:45.923

0

Remove components from the constructor injection.

import { Component } from '@angular/core';
import { SessionStorageService } from 'angular-web-storage';
import { Router } from "@angular/router"
import { AppComponent } from '../app.component';
import { ModalComponent } from '../modal/modal.component';
import { HomeComponent } from '../home/home.component';
import { JhttpService } from '../jhttp.service';

@Component({
  selector: 'app-topbar',
  templateUrl: './topbar.component.html'
})

export class TopbarComponent {

  user = this.session.get('USER');

  constructor(
    private jhttpService: JhttpService,
    private session: SessionStorageService,
    private router: Router
  ) { }

  onLogoutButtonClick(event) {
    this.modal.showError('CIAO');
    event.preventDefault();
  }
}

edited Dec 07 '18 at 17:35

answered Dec 07 '18 at 17:13

Sunil Singh

11,001
2
27
48

i put into declarations declarations: [ AppComponent, LoginComponent, HomeComponent, MenuComponent, SubMenuComponent, TopbarComponent, FooterComponent, ProfileComponent, BreadcrumbComponent, ModalComponent ], – matteo Dec 07 '18 at 17:17
Can you check your `TopbarComponent` if you are injecting `ModalComponent` that could be causing the issue. – Sunil Singh Dec 07 '18 at 17:20
i shared the TopbarComponent! – matteo Dec 07 '18 at 17:34
Updated the answer. It should fix your issue. – Sunil Singh Dec 07 '18 at 17:36
ok, but in this way the function modal.showError, that is in ModalComponent, doesn't work! – matteo Dec 07 '18 at 17:41
You shouldn't do that way. It looks like your implementation approach is wrong. Better would be if you can provide the stackblitz demo for the same. – Sunil Singh Dec 07 '18 at 17:45
i would like to create a common component with some modal window, and reuse it in all the pages.....is it possible to do something like that?? – matteo Dec 07 '18 at 17:48
Here is the sample demo - https://stackblitz.com/edit/angular-modal-example-hdf9gj – Sunil Singh Dec 07 '18 at 17:52
I think you need to add `entryComponents: []` in your app.module and add component you want to use – Abhishek Dec 07 '18 at 17:53
Here is the another sample - https://stackblitz.com/edit/ng-modal-playground-e81pxz – Sunil Singh Dec 07 '18 at 17:53

score 0 · Answer 2 · answered Dec 07 '18 at 17:59

0

Do not add Components in the constructor. Also make sure that the other ModalComponent needs to be part of the module where it's being used. Either import the module of 'ModalComponent' in the module where it is used or add ModalComponent to the declaration array of the module where you are using it.

answered Dec 07 '18 at 17:59

nircraft

8,242
5
30
46

Ok, i have already added the componenti in the moudule,But how can i call that function in that component?.....And, why only the ModalComponent give me that error?? – matteo Dec 07 '18 at 18:11
May be because ModalComponet is not part of the module where it's being used.. you can still call child component method : https://stackoverflow.com/questions/31013461/call-a-method-of-the-child-component – nircraft Dec 07 '18 at 18:15

Angular 7: problem with include Component

2 Answers2