Having issues routing with LazyLoading and SCAM Architecture

user_11676393 0
Viewed 457

I am having issues routing with LazyLoading in Angular 8. I use the SCAM architecture (https://medium.com/wishtack/your-angular-module-is-a-scam-b4136ca3917b) in my components, which means I don't have module.ts but my module is directly inserted in my component. For example:

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 {}

But then, when I'm loading my component like this in my routing module:

feature-routing.module.ts

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

I'm having absolutely no errors, from yarn, from the console, nothing except a blank page when I go on the route. It is obviously not loaded and I don't know why, it looks like loadChildren can't load my module.

EDIT: Also, the path is good, when it is not I have directly an error ;).

EDIT2: Here is my Recruiters Module:

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 {}
angular lazy-loading routing module
1 Answers

I generated a fresh application using Angular CLI to try to reproduce your problem.

I added a TypeScript path similar to the one you're using to rule that out since that was my initial thought.

tsconfig.json in root project directory

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

I used this simple AppRoutingModule in the main bundle.

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 { }

You didn't tell us what your recruiters Angular module looks like.

I created this sample component and module.

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 {}

Everything seems to work. What does your RecruitersModule look like?

By the way, SCAMs are for linking declarable dependencies and exporting at most a single declarable. Router configuration is a separate Angular module concern. It should be done in a separate Angular module.

I just published another article on SCAMs with more examples and details.

Emulating Tree-shakable Components Using Single Component Angular Modules

user_10712000
Related