Возникли проблемы с маршрутизацией в LazyLoading и SCAM Architecture

Question

У меня проблемы с маршрутизацией с LazyLoading в Angular 8. Я использую архитектуру SCAM (https://medium.com/wishtack/your-angular-module-is-a-scam-b4136ca3917b) в моих компонентах, что означает, что у меня нет module.ts, но мой модуль непосредственно вставлен в мой компонент.Например:

header.component.ts

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

  ngOnInit() {
  }

}

@NgModule({
  imports: [CommonModule],
  declarations: [HeaderComponent],
  exports: [HeaderComponent],
})
export class HeaderModule {}

Но потом, когда я загружаю свой компонент, как это в моем модуле маршрутизации:

feature-routing.module.ts

{
    path: FeaturesRoutingEnum.Recruiters,
    loadChildren: () => import('@features/recruiters/recruiters/recruiters.component').then(m => m.RecruitersModule),
  },

У меня абсолютно нет ошибок, из пряжи, из консоли, ничего, кроме пустой страницы, когда я иду по маршрутуОчевидно, что он не загружен, и я не знаю, почему, похоже, loadChildren не может загрузить мой модуль.

РЕДАКТИРОВАТЬ: Кроме того, путь хорош, когда это не так, у меня есть напрямую ошибка;).

РЕДАКТИРОВАТЬ2: Вот мой модуль рекрутеров:

import { DragDropModule} from '@angular/cdk/drag-drop';
import {CommonModule} from "@angular/common";
import {ChangeDetectionStrategy, Component, NgModule, OnInit} from '@angular/core';
import {ColumnModule} from "@commons/column/column.component";
import {HeaderModule} from "@commons/header/header.component";
import {SvgIconModule} from "@commons/svg-icon/svg-icon.component";


@Component({
  selector: 'app-recruiters',
  templateUrl: './recruiters.component.html',
  styleUrls: ['./recruiters.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RecruitersComponent implements OnInit {
  status!: string[];

  ngOnInit() {
    this.status = ['Certifié', 'En attente', 'Nécessite modification(s)', 'Refusé'];

  }

  trackByString(_: string, value: string): string {
    return value;
  }
}
@NgModule({
  imports: [CommonModule, SvgIconModule, DragDropModule, ColumnModule, HeaderModule],
  declarations: [RecruitersComponent],
  exports: [RecruitersComponent],
})
export class RecruitersModule {}

Answer 1

Для интересующихся я нашел решение.Я использовал представления, как объяснено в https://medium.com/wishtack/a-scalable-angular-project-structure-63aca36a6cbc,, это первая часть ссылки, которую я разместил ранее.

Answer 2

Я сгенерировал новое приложение, используя Angular CLI, чтобы попытаться воспроизвести вашу проблему.

Я добавил путь TypeScript, аналогичный тому, который вы используете, чтобы исключить это, поскольку это было моей первоначальной мыслью.

tsconfig.json в корневом каталоге проекта

{
  "compilerOptions": {
    "paths": {
      "@features/*": ["src/app/features/*"]
    }
  }
}

Я использовал этот простой AppRoutingModule в основном комплекте.

src/app/app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'recruiters',
    loadChildren: () =>
      import('@features/recruiters/recruiters/recruiters.component')
        .then(m => m.RecruitersModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Вы не сказали нам, как выглядит модуль Angular ваших рекрутеров.

Я создал этот пример компонента и модуля.

src/app/features/recruiters/recruiters/recruiters.component.ts

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

@Component({
  template: '<p>Recruiters feature works!</p>',
})
export class RecruitersComponent {}

@NgModule({
  declarations: [RecruitersComponent],
  imports: [
    RouterModule.forChild([
      { path: '', component: RecruitersComponent },
    ]),
  ],
})
export class RecruitersModule {}

Кажется, все работает,Как выглядит ваш RecruitersModule?

Кстати, мошенники предназначены для связывания декларируемых зависимостей и экспорта не более одного декларируемого.Конфигурация маршрутизатора - это отдельная проблема углового модуля.Это должно быть сделано в отдельном модуле Angular.

Я только что опубликовал еще одну статью о мошенниках с большим количеством примеров и подробностей.

Эмуляция компонентов с возможностью расщепления деревьев с использованием однокомпонентных угловых модулей