NGRX routing with Lazy Loading

Question

I'm currently doing a test project with angular ngrx and trying to use lazy loading. However, my feed toggler doesn't seem to be working properly and I don't quite understand why: https://github.com/MiguelSchool/AngularNGRX

this is my toggle component that gives me the links to the different routes

export class FeedTogglerComponent implements OnInit {

  @Input('tagName')tagNameProps: string | null | undefined;
  isLoggedIn$: Observable<boolean> | undefined;
  constructor(private store: Store) { }

  ngOnInit(): void {
   this.initializeValues();
  }

  private initializeValues(): void {
    this.isLoggedIn$ = this.store.pipe(select(isLoggedInSelector));
  }
}

<div class="feed-toggle">
  <ul class="nav nav-pills outline-active">
    <li class="nav-item" *ngIf="(isLoggedIn$|async)">
      <a
        class="nav-link"
        [routerLink]="['/home/feed']"
        routerLinkActive="active">
        Your Feed
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        [routerLink]="['/home']"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact:true}">
        Global Feed
      </a>
    </li>
    <li class="nav-item" *ngIf="tagNameProps">
      <a
        class="nav-link"
        [routerLink]="['/tags',tagNameProps]"
        routerLinkActive="active">
        #{{tagNameProps}}
      </a>
    </li>
  </ul>
</div>

My routes are in app module to load the different routes

const routes:Routes = [
  {
    path:'',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('src/app/globalFeed/GlobalFeed.module')
      .then(module => module.GlobalFeedModule)
  },
  {
    path: 'home/feed',
    loadChildren: () => import('src/app/your-feed/your-feed.module')
      .then(module => module.YourFeedModule)
  },
  {
    path:'login',
    loadChildren: () => import('src/app/auth/auth.module')
      .then(module => module.AuthModule)
  },
  {
    path:'register',
    loadChildren: () => import('src/app/auth/auth.module')
      .then(module => module.AuthModule)
  },
  {
    path: 'tags/:slug',
    loadChildren: () => import('src/app/tag-feed/tag-feed.module')
      .then(module => module.TagFeedModule)
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];
export const appRouter = RouterModule.forRoot(routes);

Here are the routes in the different modules:

//your feed module

const routes: Routes = [
  {
    path: '',
    component: YourFeedComponent
  }
];
export const router = RouterModule.forChild(routes);

//tagfeed module
const routes: Routes = [

  {
    path: 'tags/:slug',
    component: TagFeedComponent
  }
];
export const router = RouterModule.forChild(routes);

Answer 1

this is how your router files should be:

const routes: Routes = [
  { path: "", component: YourFeedComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class YourFeedRoutingModule { }

I checked your github repo, you need to change every routing file to a routing module even the appRouter, and then import the RoutingModule class instead of the exported variables you are creating