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

Answer 2

对于那些感兴趣的人，我找到了解决方案。我使用了https://medium.com/wishtack/a-scalable-angular-project-structure-63aca36a6cbc中所述的视图，这是我之前发布的链接的第一部分。

使用LazyLoading和SCAM架构路由时遇到问题

2 个答案: