LazyLoading 和 SCAM 架构的路由问题

Posted 2023-02-19

【中文标题】LazyLoading 和 SCAM 架构的路由问题

【英文标题】：Having issues routing with LazyLoading and SCAM Architecture

【发布时间】：2019-11-03 08:49:29

【问题描述】：

我在 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 

【参考方案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

【讨论】：

感谢您的回答！我编辑了我的帖子，以便您可以看到我的招聘模块。