Error while importing a component to another component in angular 7

Question

Every time I try to import a component to another component (they are not siblings ) I got this error on console :

...
ERROR Error: "StaticInjectorError(AppModule)[LogsTableComponent -> FilterBarComponent]: 
StaticInjectorError(Platform: core)[LogsTableComponent -> FilterBarComponent]: 
NullInjectorError: No provider for FilterBarComponent!"
...

here is my app.module.ts file :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { LogsTableComponent } from './components/logs-table/logs- 
table.component';
import { FilterBarComponent } from './components/filter-bar/filter- 
bar.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { HttpClientTestService } from './http-client-test.service';

@NgModule({
  declarations: [
    AppComponent,
    FilterBarComponent,
    LogsTableComponent,
  ],

  imports: [
    BrowserModule,
    // HttpClientModule should be imported after BrowserModule.
    HttpClientModule,

    BsDatepickerModule.forRoot()

  ],
  providers: [HttpClientTestService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Can anyone help me to know why this error is occurring and how to resolve it.

Have you added those components to `declarations` array in `module.ts` file? Is `FilterBarComponent` placed inside form in `LogsTableComponent `? — porgo, May 23 '19 at 09:49
I added the app.module.ts file, No FilterBarComponent is not inside LogsTableComponent, they are not like parent and child components — user8845321, May 23 '19 at 09:51
I added FilterBarComponent to the providers of app.module.ts and both components work now but another issue appeared I will try to resolve it if I couldn't may be I will put it in another separated question. Thank you for you interest :) — user8845321, May 23 '19 at 10:00

score 1 · Accepted Answer · answered May 23 '19 at 09:24

1

This may be the key phrase: "No provider for FilterBarComponent!". I suppose, you should add the FilterBarComponent to the "imports/providers (?)" array in the "AppModule" file.

answered May 23 '19 at 09:24

Hunor

449
1
5
19

But still, your problem & solution may be similar to what I have posted. Check this problem too, it seems to be very similar: https://stackoverflow.com/questions/50945067/angular-6-staticinjectorerror-no-provider-for-options#answer-51835757 – Hunor May 23 '19 at 09:31
I added the filterBarComponent to the provider in app.module and both components works now but the service meant to be executed thanks to this "import component to other component " doesn't work ! Anyways thanks for you help :) – user8845321 May 23 '19 at 09:56

score 0 · Answer 2 · answered May 23 '19 at 09:45

0

You need to import the FilterBarComponent in app.module.ts file and also add the FilterBarComponent in declaration section of app.module.ts to use the component.

answered May 23 '19 at 09:45

AddWeb Solution Pvt Ltd

21,025
5
26
57

they are already imported, I edited the question by adding my app.module.ts file – user8845321 May 23 '19 at 09:51

Error while importing a component to another component in angular 7

2 Answers2