1

In angular 7, I'm facing following issue, where I need to inject my MenuWidgetComponent in home component, I have imported it in widget component and exported in via index.ts. But still I'm getting,

I googled it but, could not found any solution. Did I miss something in my code?

Angular 7 : ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MenuWidgetComponent -> TripsMenu]:

Above error, Please help.

Folder Structrue:

ApplicationWorkspace >
   1. GlobalApp > 
       - App > 
         - app.module
         - home Component
   2. Libs >
        - widget >
            src > 
              - MenuWidgetComponent
              - widget module
            index.ts

index.ts

export * from './lib/widgets.module';
export * from './lib/menu-widget/menu-widget.component';

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NxModule } from '@nrwl/nx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { WidgetsModule } from '@gp-angular-workspace/widgets';
@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    NxModule.forRoot(),
    AppRoutingModule,
    WidgetsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Home.html

<div class="home" background="assets/images">
  <pfj-menu-widget></pfj-menu-widget>
</div>

widget.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetWrapperComponent } from './widget-wrapper/widget-wrapper.component';

@NgModule({
  imports: [CommonModule],
  declarations: [MenuWidgetComponent],
  exports: [ModalWidgetComponent]
})
export class WidgetsModule {}
TheDoozyLulu
  • 384
  • 2
  • 6
  • 23
  • Possible duplicate of [Uncaught (in promise): Error: StaticInjectorError(AppModule)\[options\]](https://stackoverflow.com/questions/49776562/uncaught-in-promise-error-staticinjectorerrorappmoduleoptions) –  Feb 15 '19 at 12:55
  • Where is TripsMenu in your source code? – Hien Nguyen Feb 15 '19 at 13:42
  • @HienNguyen I have created it inside widgetsfolder, Inside folder menu-widget > both menu-widget.component files and tripsMenu.ts file widget > src > - MenuWidgetComponent > -1. menu-widget.component -2. trips-menu.ts - widget module – TheDoozyLulu Feb 15 '19 at 13:45
  • Try adding the child component to entryComponents in your module.ts definitions. – Josh Harkema Feb 15 '19 at 15:24

2 Answers2

0

This should get you fixed up:

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    NxModule.forRoot(),
    AppRoutingModule,
    WidgetsModule
  ],
  providers: [],
  entryComponents: [
    WidgetsModule
  ],
  bootstrap: [AppComponent]
})

Anything you want to inject into another component must be defined as an entry component. It's the same as if you were to inject a component into a mat-dialog.

See: https://angular.io/guide/entry-components for more info.

Josh Harkema
  • 250
  • 3
  • 11
0

I had missed to import TripsMenu in widgets module.

import { TripsMenu } from './menu-widget/trips-menu';

And it worked!

TheDoozyLulu
  • 384
  • 2
  • 6
  • 23