LazyLoading 和 SCAM 架构的路由问题

Question

我在 Angular 8 中使用 LazyLoading 进行路由时遇到问题。我在我的组件中使用 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 无法加载我的模块。

编辑：另外，路径很好，当它不是我直接有一个错误;）。

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

我使用 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 是什么样的？

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

我刚刚发表了另一篇关于 SCAM 的文章，其中包含更多示例和详细信息。

Emulating Tree-shakable Components Using Single Component Angular Modules