LazyLoading和SCAM体系结构存在路由问题

Question

在LazyLoading 8中，我遇到了路由问题。我在组件中使用了欺骗体系结构(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无法加载我的模块。

编辑:而且，路径是好的，当它不是我有一个直接的错误;)。

EDIT2:这是我的招聘模块：

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

我使用角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 { }

你没告诉我们你的招聘者是什么样子的。

我创建了这个示例组件和模块。

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是什么样子的？

顺便说一句，骗局用于链接可声明的依赖项，最多导出一个可声明的依赖项。路由器配置是一个独立的角度模块关注。它应该在一个独立的角度模块中完成。

我刚刚发表了另一篇关于诈骗的文章，有更多的例子和细节。

模拟树-使用单组分角度模块的摇动元件