typescript - Angular 8 Kan ikke få tilgang til 'PlanningModule' før initialisering

Jeg bruker Apex-temaet fra ThemeForest. Jeg prøver å få tilgang til siden: /planning Men konsollen viser en feil:

core.js:6014 ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'PlanningModule' before initialization
ReferenceError: Cannot access 'PlanningModule' before initialization
    at Module.PlanningModule (planning.component.ts:12)
    at planning-layout.routes.ts:6

Jeg har ikke dobbel initialisering av komponenten eller modulen. Den eneste initialiseringen er tjenesten i app.module. Hvorfor fikk jeg denne feilen, og hvordan kan jeg løse den?

App-routing.module.ts:

{
    path: 'planning',
    component: FullLayoutComponent,
    children: Planning_ROUTES,
    canActivate: [AuthGuard],
},

Planning.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {PlanningComponent} from './planning.component';
import {FormsModule} from '@angular/forms';
import {DragulaModule} from 'ng2-dragula';
import {Ng2SmartTableModule} from 'ng2-smart-table';
import {NgSelectModule} from '@ng-select/ng-select';
import {PlanningRoutingModule} from './planning-routing.module';


@NgModule({
  declarations: [
    PlanningComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    DragulaModule.forRoot(),
    Ng2SmartTableModule,
    NgSelectModule,
    PlanningRoutingModule
  ]
})
export class PlanningModule { }

Planning-routing.module.ts:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {PlanningComponent} from './planning.component';


const routes: Routes = [
  {
    path: '',
    component: PlanningComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PlanningRoutingModule {
  constructor() {
    console.log('hier komt die(niet)');
  }
}

PlanningComponent.ts:

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {PlanningService} from './planning.service';

@Component({
  selector: 'app-planning',
  templateUrl: './planning.component.html',
  styleUrls: ['./planning.component.scss'],
})
export class PlanningComponent implements OnInit {

  constructor(private router: Router,
    private planningService: PlanningService) {}

  ngOnInit(): void {}
}

Planning-ruter.ts:

import { Routes, RouterModule } from '@angular/router';

export const Planning_ROUTES: Routes = [
  {
    path: '',
    loadChildren: () => import('../../pages/planning/index/planning.module').then(m => m.PlanningModule)
  },
];

Svar #1

Dette skjer når du har en sirkulær avhengighet mellom ett eller flere Angular-moduler. Jeg har funnet ut at det skjer selv om avhengigheten er indirekte, for eksempel en tjenesteimport. Jeg antar at dette har å gjøre med initialiseringsrekkefølgen.

For eksempel -

Denne komponenten har en avhengighet av en tjeneste definert i en annen moduls undermappe -

// declared in A_Module
export class A_Component implements OnInit {
//...
  constructor(
    private service: B_Service) {} // <-- dependency on B_Module??

}


// B_Module
@NgModule({
  imports: [
    CommonModule,
    A_Module // <-- dependency 
  ],
  exports: [],
  declarations: [...],
  providers: []
})
export class B_Module { }

// In B_Module sub-directory
@Injectable({providedIn: 'root'})
export class B_Service {}

For å løse det, brukte jeg en Input()-binding i A_Component. Et alternativ kan være å flytte tjenesten under en delt modulmappe.

Relaterte artikler