So I want to add machine detail and buton bar to my app, and this is what happens. I've used it in other parts aswell and it worked fine, only in core module are the errors.

The error message

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

core module (error appears when I add "IfaButtonModule" or "MachineModule")

@NgModule({
  declarations: [
    TakePhotoComponent,
    ConfirmationDialogComponent,
    ShareMachineComponent,
    NotificationsComponent,
  ],
  imports: [
    CommonModule,
    WebcamModule,
    MatButtonModule,
    TranslateModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule,
    MatIconModule,
    MatExpansionModule,
    MatBadgeModule,
    MatCardModule,
    MatMenuModule,
    IfaButtonModule,
    MachineModule
  ],
  exports: [
    TakePhotoComponent,
    ConfirmationDialogComponent,
    ShareMachineComponent,
    NotificationsComponent
  ],
  providers: [NgxImageCompressService]
})
export class CoreModule { }

button-module

@NgModule({
  declarations: [
    IfaButtonBarItemComponent,
    IfaButtonBarComponent,
    IfaButtonBarGroupComponent
  ],
  imports: [
    CommonModule,
    CoreModule,
    MatButtonModule,
    TranslateModule
  ],
  exports: [
    IfaButtonBarComponent,
    IfaButtonBarGroupComponent,
    IfaButtonBarItemComponent
  ]
})
export class IfaButtonModule { }

machine module

@NgModule({
  declarations: [
    MachineListComponent,
    MachineDetailEditComponent,
    MachineDetailComponent,
    MachineListItemComponent
  ],
  imports: [
    CommonModule,
    CoreModule,
    MatCardModule,
    MatMenuModule,
    MatListModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    NgxPaginationModule,
    MatFormFieldModule,
    MatInputModule,
    TranslateModule,
    MatDialogModule,
    MatExpansionModule,
    IfaButtonModule,
    OperationModeModule,
    ProtectionModule,
    ManipulationModule
  ],
  exports: [
    MatMenuModule,
    MachineDetailEditComponent,
    MachineListComponent,
    MachineDetailComponent
  ]
})
export class MachineModule {

}

the html that uses the components: (inside the core module area)

<ng-container>
  <app-machine-detail [machine]="completeMachine">
  </app-machine-detail>
  <app-ifa-button-bar-group>
    <app-ifa-button-bar-item [label]="'MISC.BACK'" (click)="navigateBack()">
    </app-ifa-button-bar-item>
  </app-ifa-button-bar-group>
</ng-container>

CodePudding user response：

This is probably happening because you import CoreModule in the MachineModule and the MachineModule in the CoreModule. This should not happen, you should re-work your module dependencies and fix the circular import. IfaButtonModule has the exact same issue.